为什么 SCSS 文件中写的深色主题颜色不适用？

Question

我正在尝试向我的页面添加一个深色主题切换按钮，我在互联网上查找代码并看到了下面的示例。我将代码复制到我的 VS 代码编辑器，当我单击切换按钮时，它的图标发生了变化，但 window 保持白色

我从这个 codepen 站点获取了代码并删除了所有不相关的 html 元素： https://codepen.io/j_holtslander/pen/MRbpLX

这是代码：

// SIDENAV
$(document).ready(function() {
  $('.sidenav').sidenav();


  // SWAP ICON ON CLICK
  // Source: 
  $('.dark-toggle').on('click', function() {
    if ($(this).find('i').text() == 'brightness_4') {
      $(this).find('i').text('brightness_high');
    } else {
      $(this).find('i').text('brightness_4');
    }
  });

});

/* and this is the dark_mode.scss file, compiled to css */

body {
  background-color: #eee;
  transition: color 1s ease, background-color 1s ease;
}

body.dark {
  background-color: #202123;
  color: #fff;
}

body.dark nav {
  background-color: #26A69A;
}

body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark .btn {
  background-color: #EE6F73;
}

body.dark .divider {
  opacity: 0.2;
}

body.dark .sidenav {
  background-color: #2D2D31;
}

body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}

body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}

body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}

body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}

body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="less.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="dark_mode.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet/less" type="text/css" href="dark_mode.scss">
  <link rel="stylesheet/less" type="text/css" href="styles.less" />

</head>
<div class="row">
  <div class="col s12">
    <a class="btn dark-toggle" href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')"
      title="Dark/light"><i class="material-icons left">brightness_4</i> Toggle Dark Mode</a>
  </div>
</div>

</html>

Answer 1

在暗模式切换功能中，您需要在 body 元素上切换 class dark。此外，在您的标记中，您不能省略 body 标记，它是强制性的，而且除了 head 之外，它是 <html>:

中唯一允许的子元素

$('.dark-toggle').on('click',function(){
    // OTHER STUFF
    document.body.classList.toggle('dark');
});

// SIDENAV
$(document).ready(function() {
  // SWAP ICON ON CLICK
  // Source: 
  $('.dark-toggle').on('click', function() {
    if ($(this).find('i').text() == 'brightness_4') {
      $(this).find('i').text('brightness_high');
    } else {
      $(this).find('i').text('brightness_4');
    }
    document.body.classList.toggle('dark');
  });

});

/* and this is the dark_mode.scss file, compiled to css */

body {
  background-color: #eee;
  transition: color 1s ease, background-color 1s ease;
}

body.dark {
  background-color: #202123;
  color: #fff;
}

body.dark nav {
  background-color: #26A69A;
}

body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark .btn {
  background-color: #EE6F73;
}

body.dark .divider {
  opacity: 0.2;
}

body.dark .sidenav {
  background-color: #2D2D31;
}

body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}

body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}

body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}

body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}

body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
</head>

<body class="light">
  <div class="row">
    <div class="col s12">
      <a class="btn dark-toggle" href="#" title="Dark/light"><i class="material-icons left">brightness_4</i> Toggle Dark Mode</a>
    </div>
  </div>
</body>

</html>

请注意，我已删除切换按钮上的 onclick，因为 Whosebugs 片段设置不允许这样做。该部分负责将当前 dark/light 模式设置存储在浏览器的 locas 存储中，并在您下次返回页面时从那里恢复它。

Answer 2

我注意到您在 HTML 文档中缺少 body 标记。同样在您的 JS 文件中，您需要更改 class 以便可以应用其他样式

$('.dark-toggle').on('click',function(){
   let element = $(this).find('i');
    if ( element.text() === 'brightness_4')
        element.text('brightness_high');
    else
        element.text('brightness_4');
 
    $('body').toggleClass('dark');
});

为什么 SCSS 文件中写的深色主题颜色不适用？

Why the dark-theme colors written in the SCSS file does not apply?

javascript

html

css

materialize

darkmode