小编Ben*_*ton的帖子

我已经设置了在 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, …