Angular 在角度组件中访问主题颜色

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

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

palete.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,
    ),
);

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

然后是一个theme.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,
    ),
);

@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文件中的style:[]条目为每个客户包含相关的品牌特定文件。不幸的是，我无法从variables.scss文件中访问$primary、$accent和$warn颜色，因为它们的作用域在@mixin中

我试图避免在每个组件中都有@mixin语句，因为我想访问当前的$primarycolour之类的东西

---

有什么想法吗？

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

更好的方法是创建两个不同的文件，例如

索引暗主题.scss

或

索引亮主题.scss

将所有相关属性定义到相应的文件中，例如

在

索引黑暗主题.scss

或

索引光明主题scss

文件中，您可以导入如下内容

• @导入“~/”

  eg（引导）

• @进口“可变-.scss”

• @导入“utils.scss”

• @导入“组件一-（主题）.scss”

• 。。。。（在此处定义所有相同的主题组件）

组件1的结构组件将如下所示

组件一

• 第一部分
• component-one.html
• 组件1.scss
• 组件-one-dark.scss
• 组件1轻型scss

在组件一中。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;
}

在组件一-（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

文件中，您可以定义

通用函数

或

混合函数

，然后您可以同时使用这两个主题。 只需从特定的主题文件传递不同的值就可以了

如果在不久的将来你想引入一个新的主题，比如

蓝色主题

，同样的模式也可以遵循

根据主题的选择，您只需动态地替换

index-.scss

。 休息一切都会好的：）

通过这种方法，它将变得更加动态，并将提高应用程序的可伸缩性