Vaadin 24 Dynamic CSS с потоком ⇐ CSS

[Anonymous]

Есть ли способ применять динамический CSS с селекторами через поток ваадин? Очевидно, что в большинстве случаев вы можете установить CSS. Моя конкретная проблема заключается в том, что у меня есть динамические фоновые цвета для элементов, которые я хочу, чтобы пользователи определили себя. И даже тогда это было бы легко, за исключением цветов, отличающихся между светом и темным режимом.

Код: Выделить всё

html {
--section-background-color-01: #fc7c7c;
--section-background-color-02: #fcb67c;
--section-background-color-03: #fced7c;
--section-background-color-04: #dafc7c;
--section-background-color-05: #8bfc7c;
--section-background-color-06: #7cfce9;
--section-background-color-07: #7cc9fc;
--section-background-color-08: #7c7efc;
--section-background-color-09: #b37cfc;
--section-background-color-10: #fc7cfa;
--section-background-color-11: #fc7cd2;
--section-background-color-12: #fc7c9e;
}
html[theme~="dark"] {
--section-background-color-01: #420000;
--section-background-color-02: #422300;
--section-background-color-03: #414200;
--section-background-color-04: #174200;
--section-background-color-05: #004203;
--section-background-color-06: #004238;
--section-background-color-07: #001f42;
--section-background-color-08: #000042;
--section-background-color-09: #200042;
--section-background-color-10: #320042;
--section-background-color-11: #42003d;
--section-background-color-12: #42001e;
}
< /code>
Я тогда применял его в своем коде как таковой: < /p>
VerticalLayout section1 = new VerticalLayout();
section1.getStyle().setBackgroundColor("var(--section-background-color-01)");
< /code>
Проблема заключается в том, чтобы динамически решить эту проблему, а также учитывает темную тему.String userSelectedColor = "#ffffff";
UI.getCurrent().getStyle().set("--section-background-color-01", userSelectedColor);
...

section1.getStyle().setBackgroundColor("var(--section-background-color-01)");
< /code>
Это работает, но цвет одинаково, независимо от того, что такое тема. Это не то, что я ищу. Мне нужно иметь изменение цвета между экземплярами. Он обрабатывается с компонентом из каталога, Select Theme - https://vaadin.com/directory/component/theme-select
Этот компонент является чистым браузером, и я не знаю, есть ли даже способ получить значение из него.  В противном случае это было совершенно идеально для наших целей.
html {
--section-background-light-color-01: #fc7c7c;
--section-background-light-color-02: #fcb67c;
--section-background-light-color-03: #fced7c;
--section-background-light-color-04: #dafc7c;
--section-background-light-color-05: #8bfc7c;
--section-background-light-color-06: #7cfce9;
--section-background-light-color-07: #7cc9fc;
--section-background-light-color-08: #7c7efc;
--section-background-light-color-09: #b37cfc;
--section-background-light-color-10: #fc7cfa;
--section-background-light-color-11: #fc7cd2;
--section-background-light-color-12: #fc7c9e;
--section-background-dark-color-01: #420000;
--section-background-dark-color-02: #422300;
--section-background-dark-color-03: #414200;
--section-background-dark-color-04: #174200;
--section-background-dark-color-05: #004203;
--section-background-dark-color-06: #004238;
--section-background-dark-color-07: #001f42;
--section-background-dark-color-08: #000042;
--section-background-dark-color-09: #200042;
--section-background-dark-color-10: #320042;
--section-background-dark-color-11: #42003d;
--section-background-dark-color-12: #42001e;
}

html {
--section-background-color-01: var(--section-background-light-color-01);
--section-background-color-02: var(--section-background-light-color-02);
--section-background-color-03: var(--section-background-light-color-03);
--section-background-color-04: var(--section-background-light-color-04);
--section-background-color-05: var(--section-background-light-color-05);
--section-background-color-06: var(--section-background-light-color-06);
--section-background-color-07: var(--section-background-light-color-07);
--section-background-color-08: var(--section-background-light-color-08);
--section-background-color-09: var(--section-background-light-color-09);
--section-background-color-10: var(--section-background-light-color-10);
--section-background-color-11: var(--section-background-light-color-11);
--section-background-color-12: var(--section-background-light-color-12);
}
html[theme~="dark"] {
--section-background-color-01: var(--section-background-dark-color-01);
--section-background-color-02: var(--section-background-dark-color-02);
--section-background-color-03: var(--section-background-dark-color-03);
--section-background-color-04: var(--section-background-dark-color-04);
--section-background-color-05: var(--section-background-dark-color-05);
--section-background-color-06: var(--section-background-dark-color-06);
--section-background-color-07: var(--section-background-dark-color-07);
--section-background-color-08: var(--section-background-dark-color-08);
--section-background-color-09: var(--section-background-dark-color-09);
--section-background-color-10: var(--section-background-dark-color-10);
--section-background-color-11: var(--section-background-dark-color-11);
--section-background-color-12: var(--section-background-dark-color-12);
}
< /code>
Это работает само по себе. Но моя проблема в том, что мои цвета, применяемые через Java, вообще не работают. < /P>
String userSelectedColorLight = "#ffffff";
String userSelectedColorDark = "#000000";
UI.getCurrent().getStyle().set("--section-background-light-color-01", userSelectedColorLight);
UI.getCurrent().getStyle().set("--section-background-dark-color-01", userSelectedColorDark);
...

section1.getStyle().setBackgroundColor("var(--section-background-color-01)");

Свет/темные цвета сверху не применяются. В лучшем случае применяются только мои цвета по умолчанию из CSS. Казалось бы, я не могу цепорить переменные CSS через поток. По крайней мере, не так, как я в настоящее время делаю это. select.addValueChangeListener(new ValueChangeListener() {
@Override
public void valueChange( ValueChangeEvent event ) {
// Get the new font family
String fontFamily = select.getValue().toString();
// Get the stylesheet of the page
Styles styles = Page.getCurrent().getStyles();
// inject the new font size as a style. We need .v-app to override Vaadin's default styles here
styles.add(".v-app .v-textarea.text-label { font-family:" + fontFamily + "; }");
}
});
< /code>
Полное определение CSS с селектором может применяться. Этот код, однако, предназначен для Ваадина 8 и, по -видимому, не имеет эквивалента в Ваадине 24. Существует ли способ, которым я могу объединить определения переменных CSS во всем мире для моего текущего представления (Ala My '-Section Background-Light-Color' и '-Section Background-Dark-Color' попытка выше), или есть способ, который я могу раздвинуть полное определение CSS, которое включает в себя селекторы?>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -with-flow