Css 即时导入

问题描述

有没有办法在 Vaadin14 中即时导入 css 样式表？我在班级顶部使用 @CssImport("./views/main/main-view.css")，并且

Button lumoBtn = new Button("Lumo",click -> {
            UI ui = this.getUI().get();
            ThemeList themeList = ui.getCurrent().getElement().getThemeList(); //
            if (themeList.contains(Lumo.DARK)) { //
                themeList.remove(Lumo.DARK);
            } else {
                themeList.add(Lumo.DARK);
            }
        });

动态地在黑暗和光明之间切换。但现在我也希望能够在 Material、Lumo 和其他 AbstracTheme 之间动态切换。

解决方法

您无法在运行时切换主题，这是一个缺失的功能：https://github.com/vaadin/flow/issues/5163

,

我找到的解决方案： 创建主题的变体，并从一个主题快速更改为另一个主题。

• java 文件

//I used the lLumo theme from Vaadin as base,with some colors modifications
html {
--lumo-primary-color: hsl(189,57%,38%);
--lumo-primary-color-70pct: hsla(189,38%,0.7);
--lumo-primary-color-50pct: hsla(189,0.5);
--lumo-primary-color-10pct: hsla(189,0.1);
}
[theme~="variant2"]{
--lumo-primary-color: hsl(189,0.1);
}
[theme~="varinat3"]{
--lumo-primary-color: hsla(88,62%,40%);
--lumo-primary-color-70pct: hsla(88,40%,0.7);
--lumo-primary-color-50pct: hsla(88,0.5);
--lumo-primary-color-10pct: hsla(88,0.1);
}

• css 文件

import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.runBlocking
import kotlinx.coroutines.withTimeoutOrNull

fun main(): Unit = runBlocking {
    withTimeoutOrNull(5000) {
        getFlow().collect { println("printing flow iteration $it on ${Thread.currentThread().name}") }
    }

    withTimeoutOrNull(5000) {
        getSequence().forEach { println("printing sequence iteration $it on ${Thread.currentThread().name}") }
    }
}

fun getSequence() = sequence<Int> {
    for (i in 1..10) {
        wasteCpuCycles(1000)
        yield(i)
    }
}

fun getFlow() = flow<Int> {
    for (i in 1..10) {
        wasteCpuCycles(1000)
        emit(i)
    }
}

fun wasteCpuCycles(durationInMillis: Int) {
    val endTime = System.currentTimeMillis() + durationInMillis
    while (endTime >= System.currentTimeMillis()) {
    }
}