Question

我已经被设置为在有角度的Web应用程序上添加切换的任务，该切换将允许用户从默认的亮模式主题切换到暗模式主题。我找不到成功实施此方法的方法。

完成任务后，在styles目录中有一个_variables.scss文件。其中包含颜色，字体，大小和间距的变量。颜色在地图中，然后使用map-get()方法（例如$shade-0: map-get($shades, 'shade-0')）将每个阴影分配给变量。

最初，我认为我可以创建一个themes.scss文件并将其与_variables.scss一起导入。然后，该文件将链接到另外两个scss文件lightTheme.scss和darkTheme.scss。每个主题文件将包含与variables.scss中的原始颜色变量相似的颜色变量列表。我可以将其用于一个主题或另一个主题，但不能在主题文件之间切换。

darkTheme.scss

$shades: (
  'shade-6':                            #f5f5f5,
  'shade-5':                            #BDBDBD,
  'shade-4':                            #9E9E9E,
  'shade-3':                            #757575,
  'shade-2':                            #616161,
  'shade-1':                            #303437,
  'shade-0':                            #404447,
);

$shade-0:                              map-get($shades, 'shade-0');
$shade-1:                              map-get($shades, 'shade-1');
$shade-2:                              map-get($shades, 'shade-2');
$shade-3:                              map-get($shades, 'shade-3');
$shade-4:                              map-get($shades, 'shade-4');
$shade-5:                              map-get($shades, 'shade-5');
$shade-6:                              map-get($shades, 'shade-6');

$colors: (
  'forest':                            #239F28CC,
  'aqua':                              #8ab4f8,
  'ruby':                              #C93939CC,
  'zing':                              #20CAC3CC,
  'carrot':                            #E9853ECC,
  'grape':                             #7542F2CC,
  'midnight':                          #433F5CCC,
  'slate':                             #657786CC,
);

$forest:                               map-get($colors, 'forest');
$aqua:                                 map-get($colors, 'aqua');
$ruby:                                 map-get($colors, 'ruby');
$zing:                                 map-get($colors, 'zing');
$carrot:                               map-get($colors, 'carrot');
$grape:                                map-get($colors, 'grape');
$midnight:                             map-get($colors, 'midnight');
$slate:                                map-get($colors, 'slate');

$bg-color:                            map-get($shades, 'shade-1');
$border-color:                        map-get($shades, 'shade-2');
$border-dark-color:                   map-get($shades, 'shade-3');
$text-color:                          map-get($shades, 'shade-6');
$muted:                               map-get($colors, 'slate');
$subtle:                              map-get($shades, 'shade-4');

lightTheme.scss

$colors: (
      'forest':                            #239F28,
      'aqua':                              #186EEF,
      'ruby':                              #C93939,
      'zing':                              #20CAC3,
      'carrot':                            #E9853E,
      'grape':                             #7542F2,
      'midnight':                          #433F5C,
      'slate':                             #657786,
);
$shades: (
  'shade-0':                            #ffffff,
  'shade-1':                            #f5f5f5,
  'shade-2':                            #d8d8d8,
  'shade-3':                            #bbbbbb,
  'shade-4':                            #979797,
  'shade-5':                            #535353,
  'shade-6':                            #0c0c0c,
);
$shade-0:                              map-get($shades, 'shade-0');
$shade-1:                              map-get($shades, 'shade-1');
$shade-2:                              map-get($shades, 'shade-2');
$shade-3:                              map-get($shades, 'shade-3');
$shade-4:                              map-get($shades, 'shade-4');
$shade-5:                              map-get($shades, 'shade-5');
$shade-6:                              map-get($shades, 'shade-6');
$forest:                               map-get($colors, 'forest');
$aqua:                                 map-get($colors, 'aqua');
$ruby:                                 map-get($colors, 'ruby');
$zing:                                 map-get($colors, 'zing');
$carrot:                               map-get($colors, 'carrot');
$grape:                                map-get($colors, 'grape');
$midnight:                             map-get($colors, 'midnight');
$slate:                                map-get($colors, 'slate');
$bg-color:                             map-get($shades, 'shade-1');
$border-color:                         map-get($shades, 'shade-2');
$border-dark-color:                    map-get($shades, 'shade-3');
$text-color:                           map-get($shades, 'shade-6');
$muted:                                map-get($colors, 'slate');
$subtle:                               map-get($shades, 'shade-4');

themes.scss

@import 'global/lightTheme';
@import 'global/darkTheme';

我确实尝试将变量从scss变量更改为css变量，并与var()一起使用，但由于某些组件使用darken()，lighten()和mix()而遇到困难因此不要编译。有办法使它工作吗？

任何建议都将受到欢迎！

非常感谢。

Answer 1

这个问题是一年前提出的，但是对于阅读本文的任何人仍然有用，这是一个更简单的解决方案。

要点

JavaScript仅用于切换根元素的类。
您不必为每个元素定义单独的主题类。

您在scss文件中要做的只是：

.content {
  padding: 32px;
  @include theme() {
    color: theme-get('text-color');
    background-color: theme-get('bg-color');
  }
}

实施

您可以制作一个单独的文件，例如themes.scss，可以在其中定义两个主题的属性：

$themes: (
  darkTheme: (
    'text-color': white,
    'bg-color': #424242
  ),
  lightTheme: (
    'text-color': black,
    'bg-color': #f5f5f5
  )
);

使用mixin：

@mixin theme() {
  @each $theme, $map in $themes {
    // $theme: darkTheme, lightTheme
    // $map: ('text-color': ..., 'bg-color': ...)

    // make the $map globally accessible, so that theme-get() can access it
    $theme-map: $map !global;

    // make a class for each theme using interpolation -> #{}
    // use & for making the theme class ancestor of the class
    // from which you use @include theme() {...}
    .#{$theme} & {
      @content;    // the content inside @include theme() {...}
    }
  }
  // no use of the variable $theme-map now
  $theme-map: null !global;
}

现在，您可以使用map-get($theme-map, ...)访问主题的属性。但是我们可以通过定义一个对我们有用的函数来避免每次都将$theme-map作为参数传递。

@function theme-get($key) {
  @return map-get($theme-map, $key);
}

生成的css文件将是：

.content {
  padding: 32px;
}

.darkTheme .content {
  color: white;
  background-color: #424242;
}

.lightTheme .content {
  color: black;
  background-color: #f5f5f5;
}

示例

以下是用于演示的小提琴：https://jsfiddle.net/aksh101099/zubnapr9/1/

Answer 2

我准备了CodePen to demonstrate theme switching with CSS variables。

我根据应用容器的类（.light或.dark）定义颜色变量。只需切换这些类，即可更改网站的主题。

请记住，CSS variables are not fully supported in all browsers（全球范围内为92％）。

有没有一种方法可以使用SCSS向我的应用程序添加暗模式？

3 个答案:

要点

实施

示例