material-theme-generator v0.1.0

Material Theme Generator

Readme

Суть проблемы - для 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 и позволяет гибко выбирать темы прямо внутри приложения.

Installation

Development

Contributing

License

MIT