在 Angular 组件中访问主题颜色答案

【问题标题】：Accessing theme colours within Angular component在 Angular 组件中访问主题颜色
【发布时间】：2021-03-21 00:51:42
【问题描述】：

我有一个 Angular 11 应用程序，我们构建了几个特定于客户的配置。我正在尝试实现一种合理的主题模式，以允许应用程序的每个区域都有自己的与客户品牌相关的配色方案。

到目前为止，我有一个样式文件夹，其中包含每个客户的以下 scss 文件：-

一个调色板.scss 文件

$custom-primary: (
    50: #e3e7ec,
    100: #b9c4d0,
    200: #8a9db1,
    300: #5b7691,
    400: #37587a,
    500: #143b62,
    600: #12355a,
    700: #0e2d50,
    800: #0b2646,
    900: #061934,
    A100: #6d9dff,
    A200: #3a7bff,
    A400: #0759ff,
    A700: #004eec,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: white,
    ),
);

$custom-accent: (
    50: #eaf3fa,
    100: #cae0f2,
    200: #a7cce9,
    300: #84b7e0,
    400: #69a7da,
    500: #4f98d3,
    600: #4890ce,
    700: #3f85c8,
    800: #367bc2,
    900: #266ab7,
    A100: #f5f9ff,
    A200: #c2ddff,
    A400: #8fc0ff,
    A700: #75b2ff,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: white,
    ),
);

$custom-warn: (
    50: #ffe0e0,
    100: #ffb3b3,
    200: #ff8080,
    300: #ff4d4d,
    400: #ff2626,
    500: #ff0000,
    600: #ff0000,
    700: #ff0000,
    800: #ff0000,
    900: #ff0000,
    A100: #ffffff,
    A200: #fff2f2,
    A400: #ffbfbf,
    A700: #ffa6a6,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: white,
    ),
);

然后就有了一个theme.scss文件

@import "~@angular/material/theming";
@import "./cchub-palette.scss";

@include mat-core();

$cchub-app-primary: mat-palette($custom-primary);
$cchub-app-accent: mat-palette($custom-accent, A200, A100, A400);
$cchub-app-warn: mat-palette($custom-warn);

$cchub-app-theme: mat-light-theme(
    (
        color: (
            primary: $cchub-app-primary,
            accent: $cchub-app-accent,
            warn: $cchub-app-warn,
        ),
    )
);

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

$primary: mat-color($cchub-app-primary);
$accent: mat-color($cchub-app-accent);
$warn: mat-color($cchub-app-warn);

$grey-text: rgba(0, 0, 0, 0.45);
$border: rgba(0, 0, 0, 0.25);
$light-grey: rgba(0, 0, 0, 0.1);

我还有一个标准的 styles.scss 文件，其中包含我所有的结构样式，然后我创建了一个 variables.scss 以允许访问每个组件中的主题颜色

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

@mixin material-theme($theme) {
    $primary-palette: map-get($theme, primary);
    $accent-palette: map-get($theme, accent);
    $warn-palette: map-get($theme, warn);

     $primary: mat-color($cchub-app-primary);
     $accent: mat-color($cchub-app-accent);
     $warn: mat-color($cchub-app-warn);
}

$grey-text: rgba(0, 0, 0, 0.45);
$border: rgba(0, 0, 0, 0.25);
$light-grey: rgba(0, 0, 0, 0.1);

然后，我使用 angular.json 文件中的样式：[] 条目来包含每个客户的相关品牌特定文件。不幸的是，我无法从 variables.scss 文件中访问 $primary、$accent 和 $warn 颜色，因为它们的范围在 @mixin 内。

我试图避免在每个组件中都包含 @mixin 语句，因为我想访问当前的 $primary 颜色等。

有什么想法吗？

【问题讨论】：

标签： angular sass

【解决方案1】：

采用这种方法不仅会使您的应用程序变得更重，而且当您只想为一个主题而不是另一个主题引入一些新的颜色/变量时，它还会增加复杂性。这会妨碍应用程序的可扩展性。

更好的方法是创建两个不同的文件，例如 index-dark-theme.scss 或 index-light-theme.scss 将所有相关属性定义到各自的文件中，例如。

在您的 index-dark-theme.scss 或 index-light-theme-scss 文件中，您可以导入类似这样的内容

@import '~/' eg(bootstrap);
@import '变量-.scss';
@import 'utils.scss';
@import 'component-one-(theme).scss';
....（在这里定义所有相同的主题组件）

一个组件的结构看起来像这样

组件一

component-one.ts
component-one.html
component-one.scss
component-one-dark.scss
component-one-light-scss

在 component-one.scss 中将保存所有 css 属性，并为每个 css 属性分配变量，例如：

    $container-padding-left;
    $container-maring-right;
    $container-background;

.container {
 background: $container-background;
 padding-left: $container-padding-left;
 margin-right: $container-margin-right;
}

在 component-one-(theme).scss 主题文件中，您只需将值分配给通过将 ```component-one.scss```` 导入主题文件中定义的变量.

@import 'component-one.scss';

    $container-padding-left : 20px !default;
    $container-margin-right: 50px  !default;
    $container-background: $bg-black-400 !default;

如果您不想为变量赋予任何值，您可以分配 null 以便该特定属性不会在 css 本身中呈现。例如：container-margin-right: null

在您的utils.scss 文件中，您可以定义您的generic functions 或mixins，然后您可以同时使用这两个主题。只需从特定主题文件中传递不同的值即可。

如果您想在不久的将来引入一个新主题，例如blue theme，可以遵循相同的模式。

根据主题的选择，您只需动态替换index-<theme-name>.scss。休息一切都会好起来的:)。

通过这种方法，它会变得更加动态，并且会提高应用程序的可扩展性。

【讨论】：