文章/答案/技术大牛

发布

社区首页 >问答首页 >你能把一个角度的主题主颜色应用到一个div上吗？

问你能把一个角度的主题主颜色应用到一个div上吗？
EN

Stack Overflow用户

提问于 2019-07-31 10:14:25

回答 2查看 8K关注 0票数 4

是否有一种方法可以将一个角7应用程序主题化，以便您可以：

将主题应用于普通HTML元素，而不仅仅是角材料组件
在运行时切换主题
不必对每种颜色和每种类型的用法(color、background-color、border-color、.)都使用类，就像在其他一些问题和解决方案中一样。

例如

我想做这样的事：

<div color="primary">

</div>

但这不起作用，因为color属性只适用于角材料部件。

此外，我希望能够更改背景色，文本颜色等，具体取决于当前主题。(暗主题，轻主题)

sass

theming

css

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-31 10:14:25

关于解决方案

使用此解决方案，您可以：

在运行时切换主题
在运行时获取当前主题
主题直接在CSS中使用，而不使用额外的类或任何东西。
有一个易于使用和易于理解的解决方案，这只需要一次设置。

缺点：

使用CSS变量。一些较旧的浏览器可能不支持它们。
依靠新的角度版本。我不知道这是否适用于旧版本(在角形6和7中测试)

这就是我现在在我的项目中使用的内容：

设置

首先，您需要定义一个主题。

下面是一个名为dark-theme.scss的示例，位于src/themes中

@import '~@angular/material/theming';
@include mat-core();

// Set variables to whatever colors you want for your app
$dark-theme-primary: mat-palette($mat-pink);
$dark-theme-accent: mat-palette($mat-light-blue);
$dark-theme-warn: mat-palette($mat-red);

$dark-theme: mat-dark-theme(
    $dark-theme-primary,
    $dark-theme-accent,
    $dark-theme-warn
);

@include angular-material-theme($dark-theme);

然后需要一个SCSS函数，它可以创建主题SCSS和CSS变量：

这是我的functions.scss in src/assets/scss

@mixin generate-theme-vars($theme) {
  //default palette foreground/background:
  $foreground-palette: map-get($theme, foreground);
  $background-palette: map-get($theme, background);

  /////////////////////////////////////////////////
  // SCSS VARS
  /////////////////////////////////////////////////

  $primary: mat-color(map-get($theme, primary));
  $accent: mat-color(map-get($theme, accent));
  $warn: mat-color(map-get($theme, warn));

  $base: mat-color($foreground-palette, base);
  $divider: mat-color($foreground-palette, divider);
  $dividers: mat-color($foreground-palette, dividers);
  $disabled: mat-color($foreground-palette, disabled);
  $disabled-button: mat-color($foreground-palette, disabled-button);
  $disabled-text: mat-color($foreground-palette, disabled-text);
  $hint-text: mat-color($foreground-palette, hint-text);
  $secondary-text: mat-color($foreground-palette, secondary-text);
  $icon: mat-color($foreground-palette, icon);
  $icons: mat-color($foreground-palette, icons);
  $text: mat-color($foreground-palette, text);
  $slider-off: mat-color($foreground-palette, slider-off);
  $slider-off-active: mat-color($foreground-palette, slider-off-active);
  
  $status-bar: mat-color($background-palette, status-bar);
  $app-bar: mat-color($background-palette, app-bar);
  $background: mat-color($background-palette, background);
  $hover: mat-color($background-palette, hover);
  $card: mat-color($background-palette, card);
  $dialog: mat-color($background-palette, dialog);
  $disabled-button: mat-color($background-palette, disabled-button);
  $raised-button: mat-color($background-palette, raised-button);
  $focused-button: mat-color($background-palette, focused-button);
  $selected-button: mat-color($background-palette, selected-button);
  $selected-disabled-button: mat-color($background-palette, selected-disabled-button);
  $disabled-button-toggle: mat-color($background-palette, disabled-button-toggle);

  /////////////////////////////////////////////////
  // CSS VARS
  /////////////////////////////////////////////////


  --primary-color: #{$primary};
  --accent-color: #{$accent};
  --warn-color: #{$warn};

  --base-color: #{$base};
  --divider-color: #{$divider};
  --dividers-color: #{$dividers};
  --disabled-color: #{$disabled};
  --disabled-text-color: #{$disabled-text};
  --hint-text-color: #{$hint-text};
  --secondary-text-color: #{$secondary-text};
  --icon-color: #{$icon};
  --icons-color: #{$icons};
  --text-color: #{$text};
  --slider-off-color: #{$slider-off};
  --slider-off-active-color: #{$slider-off-active};

  --status-bar-color: #{$status-bar};
  --app-bar-color: #{$app-bar};
  --background-color: #{$background};
  --hover-color: #{$hover};
  --card-color: #{$card};
  --dialog-color: #{$dialog};
  --disabled-button-color: #{$disabled-button};
  --raised-button-color: #{$raised-button};
  --focused-button-color: #{$focused-button};
  --selected-button-color: #{$selected-button};
  --selected-disabled-button-color: #{$selected-disabled-button};
  --disabled-button-toggle-color: #{$disabled-button-toggle};
}

之后，您已经做好了准备，您所要做的就是为您的全局styles.scss中的每个主题创建一个类。

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

// You have to define one of those for every theme you offer
.dark-theme {
    @import "themes/dark-theme";
    @include angular-material-theme($dark-theme);
    @include generate-theme-vars($dark-theme);
}

.light-theme {
    @import "themes/light-theme";
    @include angular-material-theme($light-theme);
    @include generate-theme-vars($light-theme);
}

用法

要应用您想要使用的主题，您需要将CSS类dark-theme (或您所称的名称)放到包含所有其他元素的元素中。

我把它放到HTML标签中：

<!doctype html>
<html lang="en" class="dark-theme">
    <!-- ... -->
</html>

现在，您可以在运行时切换主题，方法是使用JavaScript将该类更改为light-theme。

在每个想要颜色的CSS属性中，现在可以使用变量：

div {
    width: 300px;
    height: 300px;

    background-color: var(--app-bar-color);

    .someText {
        color: var(--text-color);
    }
}

如果您想在CSS中执行某些操作，如果应用了一个特殊的主题，并且更改的不是颜色本身，那么就这样做：

// Example: We want to remove some div only when the light-theme is used
div {
    width: 300px;
    height: 300px;

    background-color: var(--app-bar-color);

    
    :host-context(.light-theme) & {
        display: none;
    }
}

对于每个可能想知道我为什么要使用@import "functions";的人来说，即使他们在不同的文件夹中：

进入angular.json并将以下内容添加到对象projects > <YourProject> > architect > build > options中：

"stylePreprocessorOptions": {
    "includePaths": [
    "src/assets/scss"
    ]
},

现在，您可以从每个路径使用@import "functions";。

如果您需要支持IE (未经测试，可能需要工作)

因此，如果不能在某些客户端上使用CSS变量，则可以为指定的颜色定义如下所示的回退：

div {
    background-color: red; // fallback to red if the variable doesnt exist -> Old browsers, or IE
    background-color: var(--app-bar-color);
}

有了这些知识，您就可以在styles.scss中定义一些SCSS变量。

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

// Default theme
@import "themes/dark-theme";
@include angular-material-theme($dark-theme);

// Generate SCSS vars
$foreground-palette: map-get($theme, foreground);
$background-palette: map-get($theme, background);

/////////////////////////////////////////////////
// SCSS VARS
/////////////////////////////////////////////////

$primary: mat-color(map-get($theme, primary));
$accent: mat-color(map-get($theme, accent));
$warn: mat-color(map-get($theme, warn));

// ... and all the other vars from above if you would like


// You have to define one of those for every theme you offer
.dark-theme {
    // Only init the CSS vars here, because the rest is in default
    @include generate-theme-vars($dark-theme);
}

.light-theme {
    @import "themes/light-theme";
    @include angular-material-theme($light-theme);
    @include generate-theme-vars($light-theme);
}

现在你可以这样用它了：

div {
    background-color: $primary; // fallback
    background-color: var(--primary-color);
}

但是，这不能在运行时使用JS动态更改！

票数 12

Stack Overflow用户

发布于 2021-04-28 08:47:49

对于那些可能会得到错误- SassError: Undefined variable.的人，如果您试图使用在@mixin generate-theme-vars($theme)下定义的任何变量，则需要在这些变量中添加!global。例如，定义：$base: mat-color($foreground-palette, base) !global;

这将使变量成为全局变量，您可以在任何地方使用它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57288408

复制

相似问题

问你能把一个角度的主题主颜色应用到一个div上吗？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能把一个角度的主题主颜色应用到一个div上吗？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能把一个角度的主题主颜色应用到一个div上吗？
EN