在Angular组件中访问主题颜色 [英] Accessing theme colours within Angular component

问题描述

我有一个Angular 11应用程序，我们使用特定于客户的几种配置来构建该应用程序.我正在尝试实施一个明智的主题模式，以允许该应用的每个发行版都拥有与客户品牌相关的自己的配色方案.

I have an Angular 11 application that we build in several configurations specific to a customer. I am trying to implement a sensible theming pattern to allow each dist of the app to have it's own colour scheme relevant to the customers branding.

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

So far I have a styles folder that contains the following scss files for each customer: -

palette.scss文件

a palette.scss file

$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文件

and then there is a theme.scss file

@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文件，其中包含我所有的结构样式，然后我创建了一个variable.scss以允许访问每个组件中的主题颜色

I also have a standard styles.scss file that holds all of my structural styles and I then created a variables.scss to allow access to the theme colours within each component

@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内.

I then use the styles: [] entry within the angular.json file to include the relevant brand specific files for each customer. unfortunately I cannot access the $primary, $accent and $warn colours from the variables.scss file because they are scoped inside the @mixin.

我正试图避免在每个组件中包含@mixin语句，只是因为我想访问当前的$ primary颜色或此类.

I'm trying to avoid having @mixin statements inside every component just because I want to access the current $primary colour or such.

有什么想法吗?

推荐答案

通过这种方法，这不仅会使您的应用程序更加繁琐，而且当您只想为一个主题引入一些新的颜色/变量时，也会增加复杂性.不为其他.这将妨碍应用程序的可伸缩性.

Going by this approach this will not only make your application heaver but also it will increase complexity when you wanted to introduce some new color/variable only for one theme but not for the other. This will hamper the scalability of the application.

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

A better way would be creating two different files such as index-dark-theme.scss or index-light-theme.scss define all the related properties into respective file such as.

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

Inside your index-dark-theme.scss or index-light-theme-scss file you can import something like this

• @import'〜/< node_module导入>' eg(bootstrap);

@import'varible-.scss';

@import 'varible-.scss';

@import'utils.scss';

@import 'utils.scss';

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

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

....(在此处定义所有相同的主题组件)

.... (Define all your same theme components here)

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

组件一

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

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

In component-one.scss will hold all the css properties with variable assigned to each css property eg:

    $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"导入主题文件而定义的变量即可.

In component-one-(theme).scss theme file you just need to assign the values to variables defined by importing ```component-one.scss```` into your theme file.

@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

If you don't want to give any value to variable you can assign null so that that particular property will not render in css itself. eg: container-margin-right: null

在您的 utils.scss 文件中，您可以定义泛型函数或 mixins ，然后可以同时使用这两个主题.只是将不同的值传递给特定的主题文件，就可以很好地工作.

Inside your utils.scss file you can define your generic functions or mixins and then you can use by both the themes. Just passing a different value form a particular theme file should work fine.

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

If incase in near future you wanted to introduce a new theme such as blue theme same pattern can be followed.

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

Depending on selection of theme you have to just replace index-<theme-name>.scss dynamically. Rest everything will work fine :).

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

By this approach it will become more dynamic as and will improve the scalability of your application.

这篇关于在Angular组件中访问主题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！