支持saas的Darkmode

Question

我正在尝试创建带有sass工作流程的暗模式，我在网上找到了一个解释，但它在React中，我目前不知道react，我在一定程度上理解了代码，但整个状态的变化似乎令人困惑，我如何才能转换为vanilla Javascript，在vanilla JS情况下使用我现在的问题。

HTML

<main id="app-root">

  <div class="theme-light">
    <div class="app-container">
      <h1 class="title">Light theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

  <div class="theme-dark">
    <div class="app-container">
      <h1 class="title">Dark theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

</main>

CSS

/*
 * Theme definitions
 */

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd,
    buttonTextColor: #408bbd,
    buttonTextTransform: none,
    buttonTextHoverColor: #61b0e7,
    buttonColor: #fff,
    buttonBorder: 2px solid #408bbd,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    buttonTextColor: #aaa,
    buttonTextTransform: uppercase,
    buttonTextHoverColor: #ddd,
    buttonColor: #333,
    buttonBorder: 1px solid #333,
  ),
);

/*
 * Implementation of themes
 */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

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

/*
 * Actual styles for the app
 */

body {
  margin: 0;
}

html, body {
  height: 100%;
}

#app-root {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  > div {
    display: flex;
    flex: 1;
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;

  .title {
    font-family: sans-serif;
    font-weight: lighter;
  }

  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }

  .button {
    max-width: 20em;
    cursor: pointer;
    border-radius: 5px;
    padding: 15px 32px;
    display: inline-block;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s;

    @include themify($themes) {
      border: themed('buttonBorder');
      color: themed('buttonTextColor'); 
      border-color: themed('buttonTextColor');
      background-color: themed('buttonColor');
      text-transform: themed('buttonTextTransform');

      &:hover {
        color: themed('buttonTextHoverColor'); 
        border-color: themed('buttonTextHoverColor');
        background-color: themed('buttonHoverColor');
      }
    }
  } 
}

Answer 1

How To Toggle Dark Mode

W3schools.com提供了一个很好的示例，说明了如何使用vanilla JS实现这一点

  var element = document.body;
  element.classList.toggle("dark-mode");
}

只需更改类名，您就可以使用了！