I am interested in implementing a personalized version of a Material Design Lite "theme".
MDL is essentially the CSS and JS components of Material Design that have been extracted for use in web applications. While MDL provides a web interface to generate a CSS file using their preset theme color variations, we prefer to customize our own colors.
I have integrated MDL with Bower and am utilizing SASS to compile the components.
In addition to modifying the MDL files directly, I am seeking guidance on how and where to override the following variables:
$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;
Additional Information:
Within the MDL codebase, the
bower_components/material-design-lite/src/_variables.scssI attempted to include the variables in my own
assets/styles/common/_variables.scss@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";
$trim-color-classes: false !default;
// Use color primarily for emphasis. Choose colors that align with
// your brand and provide adequate contrast among visual elements.
$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;
Is it necessary to modify the source _variables.scss file in MDL?
For those working on customizing Material Design Color Palette:
I utilized angular-md-color.com/#/, which generates hex values formatted as an angular code block based on custom hex values.
(AngularJS code snippet)You could also use a tool like HSL Color Picker to obtain corresponding color values (rgb, hsl) depending on the desired output format.
I have personally altered the Material Design Gray shade to match a Benjamin Moore Paint value requested by the client:
(Custom grey palette code snippet)Now, I can easily apply the custom color scheme as required.