带有自定义调色板的 Angular 材质自定义主题答案

【问题标题】：Angular Material Custom Theme with Custom Palette带有自定义调色板的 Angular 材质自定义主题
【发布时间】：2020-08-06 19:22:55
【问题描述】：

我想应用调色板：

Palette

Codepen

这是我当前的主题文件：

@import "~@angular/material/_theming";

@include mat-core();

$app-primary: mat-palette(#46828d);
$app-accent: mat-palette(#276c8a);
$app-warn: mat-palette(yellow);

$app-theme: mat-dark-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

不知道如何使用 SASS 哈哈

项目：https://github.com/theADAMJR/2PG-Dashboard

【问题讨论】：

标签： css node.js angular sass angular-material

【解决方案1】：

像这样试试。

// Create the theme object (a Sass map containing all of the palettes).
$cdx-app-theme: mat-light-theme($cdx-palette-primary, $cdx-palette-accent, $cdx-palette-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($cdx-app-theme);

// Create aliases to use within your app (Do not override the `$cdx-palette-*` properties)
$my-app-palette-primary: mat-palette(#46828d);
$my-app-palette-accent: mat-palette(#276c8a);
$my-app-palette-warn: mat-palette(yellow);

如果您有任何疑问，请告诉我。

【讨论】：

SassError: Undefined variable. ` ╷` 6 │ $cdx-app-theme: mat-dark-theme($cdx-palette-primary, $cdx-palette-accent, $cdx-palette-warn); ` │ ^^^^^^^^^^^^^^^^^^^` ` |` 使用 Angular 9.2.0跨度>
你必须定义 $cdx-palette-primary、accent、warn

【解决方案2】：

这就是我最终使用自定义调色板 (Angular 9) 创建自定义主题的方式

Generate Colour Palette

@import "~@angular/material/theming";

@include mat-core();

// generated custom palette
$primary-palette: (
    50 : #e9f0f1,
    100 : #c7d9dd,
    200 : #a2c0c6,
    300 : #7da7af,
    400 : #61949d,
    500 : #45818c,
    600 : #3e7984,
    700 : #366e79,
    800 : #2e646f,
    900 : #1f515c,
    A100 : #9cecff,
    A200 : #69e3ff,
    A400 : #36d9ff,
    A700 : #1dd4ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$primary: mat-palette($primary-palette);
$secondary: mat-palette($mat-blue);
$warn: mat-palette($mat-yellow);

$theme: mat-dark-theme($primary, $secondary, $warn);

// apply the dark theme
@include angular-material-theme($theme);

How can I use custom theme palettes in Angular?

【讨论】：