Question

我正在尝试使用主题中的特定（背景色）颜色使其他元素变为彩色

设计方法是什么？有设计的方法可以做到这一点吗？

例如，有没有办法说这个自定义元素应该使用当前主题的->背景->禁用颜色？等等

例如，我希望可以说这个特定的元素应该是当前主题的->背景调色板-> disable-list-option的任何颜色。

谢谢！

Answer 1

我搜索了reuse same color scss并遇到了this post，我强烈建议您这样做，以便您可以理解在整个SCSS文件中重用值，以便使其更易于维护。

总结起来，您可以通过定义以下内容来定义SCSS变量：

$important-color: rgb(1, 2, 3);

然后像这样重复使用它：

class-1 {
    background-color: $important-color;
}

...

class-2 > span {
    color: $important-color;
}

因此，您可能应该做的是在层次结构中较高的SCSS文件中定义这些常量之一（例如，如果这是应用程序范围的变量，例如app.scss），然后在您的组件。请确保同时阅读Aloke的答案，以进行更深入的分析。

请始终使用搜索功能，并在询问与代码相关的问题时一定要包括您的代码（使用JSFiddle之类的网站可以使事情变得简单）。

Answer 2

我认为您想要一个.scss文件，在其中放置所有自定义颜色变量，并将它们用于通用CSS类，以将其应用于所有应用程序。

然后您需要执行此操作。

使用theme.scss文件，其中包含当前的素材主题/动态主题scss

@import '~@angular/material/theming';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-deep-purple, 700, 600);
$mytheme-app-accent: mat-palette($mat-red, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-teal, 500);
    $mytheme-alt-accent: mat-palette($mat-orange, 500);
    $mytheme-alt-warn: mat-palette($mat-red);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}

.mytheme-another-alt-theme{
   $mytheme-another-alt-primary: mat-palette($mat-blue, 500);
    $mytheme-another-alt-accent: mat-palette($mat-yellow, 500);
    $mytheme-another-alt-warn: mat-palette($mat-green);
    $mytheme-another-alt-theme: mat-light-theme($mytheme-another-alt-primary, $mytheme-another-alt-accent, $mytheme-another-alt-warn);
    @include angular-material-theme($mytheme-another-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

使用单独的scss文件保存您的自定义CSS类

// Import all the tools needed to customize the theme and extract parts of it
@import "~@angular/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}

现在，您可以在应用程序上使用自定义的CSS类，并且不要忘记将scss文件链接放在您的angular.json / angular-cli.json中

You can also use this classes too:
.col-primary {
    & .hue {
      &-50 {
        color: mat-color($primary, 50) !important;
      }
      &-100 {
        color: mat-color($primary, 100) !important;
      }
      .
      .
      .
     &-800 {
        color: mat-color($primary, 800) !important;
      }
    }
 }

此外，您还可以看到此代码here的运行示例

Answer 3

这个问题的答案实际上是我在寻找什么：比我想象的要容易得多：

.mat-option {
  color : mat-color($foreground, text);
}

Angular Material - change color of clicked mat-list-option

Answer 4

为什么不使用Angular Material Theming内置功能？

这样，您只需要创建一个自定义调色板，并使用一点点scss（自定义基色）就可以使其变为主要/重音/警告color（或使用预定义的主题）

然后其余的操作通过在使用有角材料成分时选择良好的颜色来自动完成：

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>

如果需要，您还可以在组件中轻松使用这些调色板：

button {
    background-color: mat-color($accent);
}

Answer 5

如果主题中的颜色变量名称一致，则可以使用这些变量。

但是使用javascript，您可以获取元素的颜色并将其存储在变量中，并在其他地方使用。

document.getElementById("element").style.backgroundColor

如何将“材质主题”颜色用于自定义内容？

5 个答案: