SCSS暗模式切换背景颜色不起作用

Question

我开始使用 Hugo、SCSS 和 JS 为我的网站实现暗模式切换。

到目前为止，我为主题模式“light”和“dark”创建了一个映射，并在我的其他 scss 文件中使用了它们 @include

现在所有单独的颜色都可以通过切换器正常切换，除了我的背景颜色。到目前为止找不到任何解决方案，但也许我必须以某种方式干扰 Bootstraps JS？有什么想法吗？

SCSS

$primary-font: "Raleway", sans-serif;
$icon-font: "themify";
// Color Variables
$primary-color: #3787b3;
$black: #000;
$white: #fff;
$gray: #f4fcff;

$themes: (
  darkTheme: (
    'bg-color': #222222,
    'text-color': #ffffff,
    'text-color-dark': #c9c9c9,
    'text-color-light': #ffffff,
    'body-color': #3b3d42,
    'border-color': #4a4b50
  ),
  lightTheme: (
    'bg-color': #fff,
    'text-color': #666666,
    'text-color-dark': #222222,
    'text-color-light': #959595,
    'body-color': #fff,
    'border-color': #acb9c4
  )
);

@mixin theme() {
  @each $theme, $map in $themes {
    $theme-map: $map !global;
    .#{$theme} & {
      @content; 
    }
  }
  $theme-map: null !global;
}

@function theme-get($key) {
  @return map-get($theme-map, $key);
}
body {
  @include theme(){
    background-color: theme-get('bg-color');
  }
  overflow-x: hidden;
}

JS

    //theme-toggler
    const getTheme = window.localStorage && window.localStorage.getItem("theme");
    const themeToggle = document.querySelector(".theme-toggle");
    const isDark = getTheme === "dark";

    if (getTheme !== null) {
      document.body.classList.toggle("darkTheme", isDark);
    }

    themeToggle.addEventListener("click", () => {
      document.body.classList.toggle("darkTheme");
      window.localStorage &&
        window.localStorage.setItem(
          "theme",
          document.body.classList.contains("darkTheme") ? "dark" : "light"
        );
    });
    console.log()

HTML

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "preloader.html" . -}}
        {{- partial "header.html" . -}}
        {{- block "main" . }}{{- end }}
        {{- partial "footer.html" . -}}
    </body>
</html>

Answer 1

你的 js 切换目标是 body 标签，但是 CSS 被添加到 html。如果您对 SCSS 进行两项更改，它应该可以工作:)

    @mixin theme() {
        @each $theme, $map in $themes {
            $theme-map: $map !global;

            //
            // 1. move the & (will be body) first 
            //
            &.#{$theme} {
                @content; 
            }
        }
        $theme-map: null !global;
    }

    //
    // 2. include the theme in the body selector
    // 
    body {
        @include theme(){
           background-color: theme-get('bg-color');
         }
    }

Answer 2

更新： !global 从现在开始应该避免如果在根中定义，函数 $theme-get 不喜欢它可能会得到 null 作为映射。作为初学者不知道如何处理它。

@function theme-get($key) {
  @if ($theme-map != null) {
     @return map-get($theme-map, $key);
  }
  @return red;
}

不确定如何继续...

SCSS暗模式切换背景颜色不起作用

SCSS darkmode switch background color not working

javascript

sass

hugo