获取角分量中的主题颜色

Question

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

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

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

我试图避免在每个组件中使用@ $primary语句，仅仅是因为我想访问当前的颜色之类的。

有什么想法吗？

Answer 1

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

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

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

eg(bootstrap);

• @import‘~/ imports>’

'varible-.scss'; @

• @import

'utils.scss'; @

• @import

'component-one-(theme).scss'; @

• @import

• 。(在这里定义所有相同的主题组件)

结构-一个组件的外观如下所示

component-one

• 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。休息一切都会很好:)。

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