css - 使用 Gulp、Sass 在 Material Design Lite 主题上定制变体

Question

我想使用 Material Design Lite“主题”的“自定义版本”。

MDL基本上是提取用于 Web 应用程序的 Material Design 的 CSS 和 JS 元素。 MDL 有一个 Web 界面，通过它可以使用他们的自定义主题颜色变体之一生成 CSS 文件，但我们想使用我们自己的颜色。

我已经用 Bower 安装了 MDL并使用 SASS 编译 components .

除了更改 MDL 文件本身之外，如何/在何处可以覆盖以下变量:

$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;

更多细节:

在 MDL 代码库中，bower_components/material-design-lite/src/_variables.scss 文件包含“theme declaration”变量(如上所示)，我当然可以更改这些变量，但是我认为有一种方法可以从组件外部覆盖它们。

我尝试将以下内容添加到我自己的 assets/styles/common/_variables.scss 文件中，但我认为组件中声明的变量 已经被使用按时间创建样式 Gulp到达此文档:

@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;

我不确定 bower 引入组件 CSS 的方式(作为单个文件)是否需要更改:

"material-design-lite": {
  "main": [
    "./src/material-design-lite.scss",
    "./src/mdlComponentHandler.js"
  ]
}

常见的方法是简单地更改 MDL 源 _variables.scss 文件吗？

---

如果它对其他使用自定义 Material Design 颜色托盘的人有用:

我用了angular-md-color.com/#/ ，它实际上根据自定义十六进制值生成 Angular 代码块格式的十六进制值:

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')
});

根据您最终想要的格式，您可以使用类似 HSL Color Picker 的工具得到相应的值(rgb，hsl)。

我正在覆盖 Material Design Gray 以匹配客户请求的 Benjamin Moore Paint 值:

$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;
    }

现在我可以做这样的事情:

<header class="mdl-layout__header mdl-color--grey-800 mdl-color-text--grey-100">

并获取自定义颜色。

Answer 1

原来，according to the MDL docs您必须“在导入默认变量之前定义变量。”

所以我的 _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 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;

在 Bower 将 Material 设计组件导入到我的 main.scss 文件中之前， 需要调用该文件:

@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

为了查看我的自定义颜色，我将其放在页面中:

<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>