Как установить темную тему lumo в качестве базовой темы, а затем переопределить ее с помощью пользовательской темы

Я хочу, чтобы темная тема lumo была темой по умолчанию, а затем в некоторых аспектах модифицировала компоненты, используя мою пользовательскую тему. У меня есть тема, установленная с помощью @Theme("myTheme"), и я думаю, что должна быть возможность установить родительскую тему с помощью theme.json и установить родительский параметр, но я не могу понять, правильно ли это или как это сделать правильно.

Обновлено: я последовал совету из принятого ответа, и вот результирующая «темная» тема, содержащая точно такие же значения для люмо-темного:

html {
    /* Base (background) */
    --lumo-base-color: hsl(214, 35%, 21%);

    /* Tint */
    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
    --lumo-tint: hsl(214, 100%, 98%);

    /* Shade */
    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
    --lumo-shade: hsl(214, 33%, 13%);

    /* Contrast */
    --lumo-contrast-5pct: var(--lumo-tint-5pct);
    --lumo-contrast-10pct: var(--lumo-tint-10pct);
    --lumo-contrast-20pct: var(--lumo-tint-20pct);
    --lumo-contrast-30pct: var(--lumo-tint-30pct);
    --lumo-contrast-40pct: var(--lumo-tint-40pct);
    --lumo-contrast-50pct: var(--lumo-tint-50pct);
    --lumo-contrast-60pct: var(--lumo-tint-60pct);
    --lumo-contrast-70pct: var(--lumo-tint-70pct);
    --lumo-contrast-80pct: var(--lumo-tint-80pct);
    --lumo-contrast-90pct: var(--lumo-tint-90pct);
    --lumo-contrast: var(--lumo-tint);

    /* Text */
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    /* Primary */
    --lumo-primary-color: hsl(214, 90%, 48%);
    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
    --lumo-primary-text-color: hsl(214, 90%, 77%);
    --lumo-primary-contrast-color: #fff;

    /* Error */
    --lumo-error-color: hsl(3, 79%, 49%);
    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
    --lumo-error-text-color: hsl(3, 100%, 80%);

    /* Success */
    --lumo-success-color: hsl(145, 72%, 30%);
    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
    --lumo-success-text-color: hsl(145, 85%, 46%);
}

java vaadin

19.11.2022 17:18

LeetCode запись решения 2536. Увеличение подматриц на единицу

Увеличение подматриц на единицу - LeetCode

Версия Java на основе версии загрузки

Если вы зайдете на официальный сайт Spring Boot , там представлен start.spring.io , который упрощает создание проектов Spring Boot, как показано ниже.

Документирование API с помощью Swagger на Springboot

В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .

Что происходит, когда создается объект класса в Java?

Как включить TLS в gRPC-клиенте и сервере : 2

Здравствуйте! 🙏🏻 Надеюсь, у вас все хорошо и добро пожаловать в мой блог.

Сортировка hashmap по значениям

На Leetcode я решал задачу с хэшмапой и подумал, что мне нужно отсортировать хэшмапу по значениям.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, вам придется продолжать в том же духе. Это означает, что вам придется переключитесь на вариант dark в своей теме.

Например. добавьте @Theme(value = 'app-theme', variant = "dark"), а затем добавьте ваш frontend/themes/app-theme/styles.css что-то вроде:

[theme~ = "dark"] {
    --lumo-base-color: hsl(0, 0%, 0%);
    --lumo-primary-color: hsl(122, 96%, 47%);
    --lumo-primary-color-50pct: hsl(122, 96%, 47%, 0.5);
    --lumo-primary-color-10pct: hsl(122, 96%, 47%, 0.1);
}

Затем продолжайте делать это для компонентов (добавьте [theme~ = "dark"]); ты может захотеть заглянуть в консоль разработчика браузера, чтобы убедиться, что вы правильно переопределяют.

Вы можете начать с темной темы --lumo... vars в своей собственной теме и надеяться, что расчеты сработают до конца; но есть оптимизации для dark повсюду, и ИМХО вам лучше делать это таким образом.

На самом деле нет необходимости добавлять к вашим собственным стилям префикс [theme~ = "dark"] до тех пор, пока ваши селекторы имеют более высокую специфичность, чем значения по умолчанию Lumo, поскольку стили компонентов по умолчанию в большинстве случаев сами не используют этот атрибут темы, они просто используют стиль Lumo. свойства, значения по умолчанию которых установлены с этим атрибутом в темной теме.

— 21.11.2022 14:53

19.11.2022 20:38