如何在Material Design Lite中使用自定义颜色？

Question

I am new to Material Design Lite. I want to use a custom color scheme, particularly the primary color and accent color.

I have seen their theme builder tool , but it only offers a few colors.

How can I do that? How can I use custom (primary and accent) colors (which are not included in their theme builder tool) in my site, which uses Material Design Lite?

Answer 1

i reckon there is no out-of-the-box way to achieve this.

I guess we may have to tinker around _color_definitions.scss which has pre-defined colors as selected in the theme-picker ,like

$palette-red:
"255,235,238"
"255,205,210"
"239,154,154"
"229,115,115"
"239,83,80"
"244,67,54"
"229,57,53"
"211,47,47"
"198,40,40"
"183,28,28"
"255,138,128"
"255,82,82"
"255,23,68"
"213,0,0";

or build your own sass rules to generate required custom theme.

Answer 2

by now there is a way to do this, check out this question (including the fixes in the answer).

In short: (the following lines were taken and fixed from that question, but I didn't test them myself)

scss:

@import 'colors';
@import '../../../node_modules/material-design-lite/src/material-design-lite'; `

_colors.scss:

$color-primary: "255, 0, 0";
$color-accent: "0, 0, 255";

Github reference