feeles-ide/lib/js/getCustomTheme.js

The hackable and serializable IDE to make learning material

import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import _extends from 'babel-runtime/helpers/extends';
import transitions from 'material-ui/styles/transitions';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { redA100, pinkA100, purpleA100, deepPurpleA100, indigoA100, blueA100, lightBlueA100, cyanA100, tealA100, greenA100, lightGreenA100, limeA100, yellowA100, amberA100, orangeA100, deepOrangeA100, brown100, blueGrey100, fullWhite } from 'material-ui/styles/colors';
import { fade, emphasize, convertColorToString, decomposeColor } from 'material-ui/utils/colorManipulator';

var bgColors = [redA100, pinkA100, purpleA100, deepPurpleA100, indigoA100, blueA100, lightBlueA100, cyanA100, tealA100, greenA100, lightGreenA100, limeA100, yellowA100, amberA100, orangeA100, deepOrangeA100, brown100, blueGrey100];

// Twitter theme colors without 'ABB8C3' (Gray)
var themeColors = ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#F78DA7', '#EB144C', '#9900EF'];

export var defaultPalette = {
  canvasColor: fullWhite,
  primary1Color: random(themeColors),
  accent1Color: random(themeColors),
  backgroundColor: fade(random(bgColors), 0.15)
};

export default (function (feelesrc) {
  // Mui Theme (plain object)
  var theme = getMuiTheme({
    palette: getPalette(feelesrc.palette)
  });
  // 影の設定
  overrideShadow(theme, feelesrc.enableShadow);
  // トランジションの設定
  overrideTransition(theme, feelesrc.enableTransition);
  return theme;
});

function getPalette() {
  var palette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var _defaultPalette$palet = _extends({}, defaultPalette, palette),
      backgroundColor = _defaultPalette$palet.backgroundColor,
      canvasColor = _defaultPalette$palet.canvasColor,
      primary1Color = _defaultPalette$palet.primary1Color,
      accent1Color = _defaultPalette$palet.accent1Color;

  return _extends({
    primary1Color: primary1Color,
    primary2Color: emphasize(primary1Color),
    primary3Color: monochrome(primary1Color),
    accent1Color: accent1Color,
    accent2Color: monochrome(accent1Color),
    accent3Color: emphasize(monochrome(accent1Color)),
    textColor: fade(emphasize(canvasColor, 1), 1),
    secondaryTextColor: fade(emphasize(canvasColor, 1), 0.54),
    alternateTextColor: fade(emphasize(emphasize(canvasColor, 1), 1), 1),
    canvasColor: canvasColor,
    borderColor: fade(accent1Color, 0.4),
    disabledColor: fade(emphasize(canvasColor, 1), 0.3),
    pickerHeaderColor: primary1Color,
    clockCircleColor: fade(emphasize(canvasColor, 1), 0.07),
    shadowColor: fade(emphasize(canvasColor, 1), 1),
    backgroundColor: backgroundColor
  }, palette);
}

function overrideShadow(theme) {
  var enableShadow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

  if (!enableShadow) {
    // box-shadow: none
    theme.paper.zDepthShadows = theme.paper.zDepthShadows.map(function () {
      return 'none';
    });
    theme.chip.shadow = 'none';
  }
}

function overrideTransition(theme) {
  var enableTransition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

  if (enableTransition) {
    theme.transitions = transitions;
  } else {
    theme.transitions = {
      easeOut: function easeOut() {
        return 'none';
      },
      create: function create() {
        return 'none';
      }
    };
  }
}

function monochrome(color) {
  color = decomposeColor(color);

  var _color$values = _slicedToArray(color.values, 3),
      r = _color$values[0],
      g = _color$values[1],
      b = _color$values[2];

  var _ = r * 0.3 + g * 0.59 + b * 0.11;
  color = { type: 'rgb', values: [_, _, _] };
  return convertColorToString(color);
}

function random(colors) {
  var index = Math.random() * colors.length >> 0;
  return colors[index];
}