有没有办法使用 SCSS 向我的应用程序添加暗模式？

Question

我已经设置了在 angular web 应用程序上添加切换的任务，这将允许用户从默认的浅色模式主题切换到深色模式主题。我找不到成功实现这一点的方法。

当我接到任务_variables.scss时，样式目录中有一个文件。这包含颜色、字体、大小和间距的变量。颜色在地图中，然后使用map-get()方法将每个阴影分配给一个变量，例如$shade-0: map-get($shades, 'shade-0')。

最初我认为我可以创建一个themes.scss文件并将其与_variables.scss. 然后，该文件将链接到另外 2 个 scss 文件lightTheme.scss和darkTheme.scss. 每个主题文件都包含一个颜色变量列表，类似于variables.scss. 我可以让它适用于一个主题或另一个主题，但我无法在主题文件之间切换。

黑暗主题.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');

主题.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;
  @include theme() {
    color: theme-get('text-color');
    background-color: theme-get('bg-color');
  }
}

例子

这是演示的小提琴：https : //jsfiddle.net/aksh101099/zubnapr9/1/

Answer 2

我准备了一个CodePen来演示使用CSS变量进行主题切换。

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

请记住，并非所有浏览器都完全支持 CSS 变量（全球 94%）。

阅读有关 CSS 变量的更多信息。