Суть проблемы - для react material-ui имеется 2 стандартных темы, темная и светлая.
Задача, написать удобный интерактивный генератор тем, чтобы было наглядно и удобно примерно как тут https://www.materialpalette.com/blue/lime
пример кастомной темы:
import * as colors from 'material-ui/styles/colors';
/* Palette generated by Material Palette - materialpalette.com/blue-grey/indigo */
// .dark-primary-color { background: #455A64; } /* blueGrey700 */
// .default-primary-color { background: #607D8B; } /* blueGrey500 */
// .light-primary-color { background: #CFD8DC; } /* blueGrey100 */
// .text-primary-color { color: #FFFFFF; } /* white */
// .accent-color { background: #536DFE; } /* indigoA200 */
// .primary-text-color { color: #212121; } /* grey900 */
// .secondary-text-color { color: #757575; } /* grey600 */
// .divider-color { border-color: #BDBDBD; } /* grey400 */
export default {
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: colors.blueGrey500,
primary2Color: colors.blueGrey700,
primary3Color: colors.blueGrey100,
primary4Color: colors.blueGrey200,
primary5Color: colors.blueGrey50,
accent1Color: colors.indigoA200,
accent2Color: colors.indigoA100,
accent3Color: colors.grey500,
textColor: colors.darkBlack,
secondaryTextColor: colors.lightBlack,
alternateTextColor: colors.white,
canvasColor: colors.white,
alternateСanvasColor: colors.grey100,
borderColor: colors.grey300,
disabledColor: colors.minBlack,
pickerHeaderColor: colors.blueGrey500,
clockCircleColor: colors.faintBlack,
shadowColor: colors.fullBlack,
},
};Генератор отображает палитру как на https://www.materialpalette.com/blue/lime и позволяет выбрать 2 или более цветов, в правой части отображаются компоненты, которые в реальном времени отображаются с использованием выбранной палитры.
Генератор позволяет экспортировать тему в нескольких форматах для разных целей и задач. Один из обязательных форматов для экспорта - стандартный формат темы для material-ui, который позволяет из коробки стилизовать любое react-приложение, построенное на базе material-ui.
Программа максимум - генератор тем минимальными усилиями внедряется в любое react приложение на базе material-ui и позволяет гибко выбирать темы прямо внутри приложения.
MIT