Динамическое изменение цветов в Material темах

Все Material темы написаны с использованием CSS Variables, соответственно нет нужды делать несколько тем (например светлую и темную) в проекте. А это значит — что вы можете менять цвета на лету (работает через Fashion.css.setVariables). Сама тема предоставляет удобный API для этого. Рассмотрим примеры использования.

Список доступных цветов можно получить с помощью:

Ext.theme.Material.getColors()

Установить новые цвета:

Ext.theme.Material.setColors({
    'darkMode': false,
    'base': 'amber',
    'accent': 'blue-grey'
});

Список интересных сочетаний, которые мне понравились

[{
    style: 'America\'s Captain',
    base: 'red',
    accent: 'blue'
}, {
    style: 'Royal Appeal',
    base: 'deep-purple',
    accent: 'indigo'
}, {
    style: 'Creamsicle',
    base: 'deep-orange',
    accent: 'grey'
}, {
    style: 'Mocha Pop',
    base: 'brown',
    accent: 'blue-grey'
}, {
    style: 'Dry Shores',
    base: 'blue-grey',
    accent: 'grey'
}, {
    style: 'Bubble Gum',
    base: 'pink',
    accent: 'light-blue'
}, {
    style: '120° Compliments',
    base: 'green',
    accent: 'deep-purple'
}, {
    style: 'Roboto House',
    base: 'grey',
    accent: 'blue-grey'
}, {
    style: 'Daylight & Tungsten',
    base: 'light-blue',
    accent: 'grey'
}]

Для добавления новой палитры цветов, необходимо внести их в следующие файлы по подобию уже существующих.

you-theme\sass\etc\functions\color.scss
you-theme\src\theme\Material.js

Подробнее о цветовой палитре (цветах и их весах и пр) можно почитать в официальном гайде.

Если вы наследуетесь от Material темы, в app.json (манифест приложения), в профиль сборки вы должны добавить следующие параметры для темы, иначе будет исключение при динамическом изменении цветов.

...
        "... you build profile ...": {
            "toolkit": "...your toolkit...",
            "theme": "...your inherited material theme...",
            "material": {
                "toolbar": {
                    "color": "#1976d2",
                    "dynamic": true
                }
            }
        }
...

Пример работы переключения цветов можно посмотреть в примерах.

Добавить комментарий

Ваш адрес email не будет опубликован.