So we are thinking we want our own color pallet for a new site built using the Material Design Lite framework.
Explored a bunch of links:
http://knizia.biz/mcg/#/
https://github.com/mbitson/mcg
https://angular-md-color.com/#/
http://www.colorzilla.com/firefox/
http://www.materialpalette.com
http://materialdesignblog.com/tools-for-creating-brilliant-material-design-color-pallets/
http://zavoloklom.github.io/material-design-color-palette/#custom
http://mdlhut.com/2015/08/creating-an-mdl-theme/
Asked on SO:
I’d like to use a “customized version” of a Material Design Lite “theme”.
MDL is basically the CSS and JS elements of Material Design extracted for use in web apps. MDL has a web interface through which one can generate a CSS file using one of their custom theme color variations, but we want to use our own colors.
I have installed MDL with Bower and am using SASS to compile the components.
Aside from changing the MDL files themselves, how/where can the following variables be overwritten:
$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;
// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;
Further details:
In the MDL codebase the bower_components/material-design-lite/src/_variables.scss
file contains the “theme declaration” variables (shown above), which I could of course change, but I think there’s a way of overriding them from outside the component.
I tried adding the following to my own assets/styles/common/_variables.scss
file, but I think the variables as declared within the component have already been used to create styles by the time Gulp reaches this document:
@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";
$trim-color-classes: false !default;
// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;
// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;
I’m not sure if the way bower is pulling in the component CSS (as a single file) would require changing:
"material-design-lite": {
"main": [
"./src/material-design-lite.scss",
"./src/mdlComponentHandler.js"
]
}
Is the common approach simply to change the MDL source _variables.scss
file?
In case it’s useful to anyone else working on custom Material Design Color Pallet:
I used angular-md-color.com/#/, which actually generates the hex values in format of an angular code block based on custom hex values:
angular.module('myApp', ['ngMaterial']).config(function ($mdThemingProvider, palettes) {
var customPrimary = {
'50': '#ffffff',
'100': '#ffffff',
'200': '#ffffff',
'300': '#ffffff',
'400': '#fbfaf8',
'500': '#f2efe8',
'600': '#e9e4d8',
'700': '#e0d8c7',
'800': '#d6cdb7',
'900': '#cdc2a7',
'A100': '#ffffff',
'A200': '#ffffff',
'A400': '#ffffff',
'A700': '#c4b697'
};
$mdThemingProvider
.definePalette('customPrimary',
customPrimary);
var customAccent = {
'50': '#233f95',
'100': '#2847a9',
'200': '#2d50be',
'300': '#355bcf',
'400': '#4a6bd4',
'500': '#5e7cd9',
'600': '#889ee3',
'700': '#9cafe8',
'800': '#b1bfed',
'900': '#c6d0f1',
'A100': '#889ee3',
'A200': '#738dde',
'A400': '#5e7cd9',
'A700': '#dae1f6'
};
$mdThemingProvider
.definePalette('customAccent',
customAccent);
var customWarn = {
'50': '#ffb280',
'100': '#ffa266',
'200': '#ff934d',
'300': '#ff8333',
'400': '#ff741a',
'500': '#ff6400',
'600': '#e65a00',
'700': '#cc5000',
'800': '#b34600',
'900': '#993c00',
'A100': '#ffc199',
'A200': '#ffd1b3',
'A400': '#ffe0cc',
'A700': '#803200'
};
$mdThemingProvider
.definePalette('customWarn',
customWarn);
var customBackground = {
'50': '#989794',
'100': '#8c8a87',
'200': '#7f7d7b',
'300': '#72716e',
'400': '#656462',
'500': '#585755',
'600': '#4b4a48',
'700': '#3e3d3c',
'800': '#31312f',
'900': '#242423',
'A100': '#a5a4a1',
'A200': '#b1b0ae',
'A400': '#bebdbb',
'A700': '#171716'
};
$mdThemingProvider
.definePalette('customBackground',
customBackground);
$mdThemingProvider.theme('default')
.primaryPalette('customPrimary')
.accentPalette('customAccent')
.warnPalette('customWarn')
.backgroundPalette('customBackground')
});
Depending on what format you want to end up with you could use a tool like HSL Color Picker to get corresponding values (rgb, hsl).
I’m overriding the Material Design Gray to match a Benjamin Moore Paint value the client requested:
$palette-grey:
"152, 151, 148"
"140, 138, 135"
"127, 125, 123"
"114, 113, 110"
"101, 100, 98"
"88, 87, 85"
"75, 74, 72"
"62, 61, 60"
"49, 49, 47"
"36, 36, 35"
"165, 164, 161"
"177, 176, 174"
"190, 189, 187"
"23, 23, 22";
$palette-grey-50: nth($palette-grey, 1);
$palette-grey-100: nth($palette-grey, 2);
$palette-grey-200: nth($palette-grey, 3);
$palette-grey-300: nth($palette-grey, 4);
$palette-grey-400: nth($palette-grey, 5);
$palette-grey-500: nth($palette-grey, 6);
$palette-grey-600: nth($palette-grey, 7);
$palette-grey-700: nth($palette-grey, 8);
$palette-grey-800: nth($palette-grey, 9);
$palette-grey-900: nth($palette-grey, 10);
$palette-grey-A100: nth($palette-grey, 11);
$palette-grey-A200: nth($palette-grey, 12);
$palette-grey-A400: nth($palette-grey, 13);
$palette-grey-A700: nth($palette-grey, 14);
// Grey
.mdl-color-text--grey {
color: unquote("rgb(#{$palette-grey-500})") !important;
}
.mdl-color--grey {
background-color: unquote("rgb(#{$palette-grey-500})") !important;
}
.mdl-color-text--grey-50 {
color: unquote("rgb(#{$palette-grey-50})") !important;
}
.mdl-color--grey-50 {
background-color: unquote("rgb(#{$palette-grey-50})") !important;
}
.mdl-color-text--grey-100 {
color: unquote("rgb(#{$palette-grey-100})") !important;
}
.mdl-color--grey-100 {
background-color: unquote("rgb(#{$palette-grey-100})") !important;
}
.mdl-color-text--grey-200 {
color: unquote("rgb(#{$palette-grey-200})") !important;
}
.mdl-color--grey-200 {
background-color: unquote("rgb(#{$palette-grey-200})") !important;
}
.mdl-color-text--grey-300 {
color: unquote("rgb(#{$palette-grey-300})") !important;
}
.mdl-color--grey-300 {
background-color: unquote("rgb(#{$palette-grey-300})") !important;
}
.mdl-color-text--grey-400 {
color: unquote("rgb(#{$palette-grey-400})") !important;
}
.mdl-color--grey-400 {
background-color: unquote("rgb(#{$palette-grey-400})") !important;
}
.mdl-color-text--grey-500 {
color: unquote("rgb(#{$palette-grey-500})") !important;
}
.mdl-color--grey-500 {
background-color: unquote("rgb(#{$palette-grey-500})") !important;
}
.mdl-color-text--grey-600 {
color: unquote("rgb(#{$palette-grey-600})") !important;
}
.mdl-color--grey-600 {
background-color: unquote("rgb(#{$palette-grey-600})") !important;
}
.mdl-color-text--grey-700 {
color: unquote("rgb(#{$palette-grey-700})") !important;
}
.mdl-color--grey-700 {
background-color: unquote("rgb(#{$palette-grey-700})") !important;
}
.mdl-color-text--grey-800 {
color: unquote("rgb(#{$palette-grey-800})") !important;
}
.mdl-color--grey-800 {
background-color: unquote("rgb(#{$palette-grey-800})") !important;
}
.mdl-color-text--grey-900 {
color: unquote("rgb(#{$palette-grey-900})") !important;
}
.mdl-color--grey-900 {
background-color: unquote("rgb(#{$palette-grey-900})") !important;
}
.mdl-color--grey-A100 {
background-color: unquote("rgb(#{$palette-grey-A100})") !important;
}
.mdl-color--grey-A200 {
background-color: unquote("rgb(#{$palette-grey-A200})") !important;
}
.mdl-color--grey-A400 {
background-color: unquote("rgb(#{$palette-grey-A400})") !important;
}
.mdl-color--grey-A700 {
background-color: unquote("rgb(#{$palette-grey-A700})") !important;
}
Now I can do something like this:
<header class="mdl-layout__header mdl-color--grey-800 mdl-color-text--grey-100">
and get the custom color.
Finally figured it out:
Turns out, according to the MDL docs you have to “define variables before the import of the default variables.”
So MY _variables.scss
as above:
@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";
$trim-color-classes: false !default;
// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-grey-500 !default;
$color-primary-dark: $palette-grey-700 !default;
$color-accent: $palette-indigo-A200 !default;
// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-yellow-500 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-yellow-500 !default;
And that file needs to be called before Bower adds the material design component import to my main.scss
file:
@import "common/_variables";
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/material-design-lite/src/material-design-lite.scss";
// endbower
// more import statements here
And to view my custom colors, I put this in a page:
<div class="content-grid mdl-grid" style="height:300px">
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-50">
50
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-100">
100
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-200">
200
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-300">
300
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-400">
400
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-500">
500
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-600">
600
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-700">
700
</div><div class="mdl-cell mdl-cell--1-col mdl-color--grey-A100">
A100
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-A200">
A200
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-A400">
A400
</div>
<div class="mdl-cell mdl-cell--1-col mdl-color--grey-A700">
A700
</div>
</div>