Все 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
}
}
}
...
Пример работы переключения цветов можно посмотреть в примерах.