Темный режим с SaaS

avatar
Ayodele
8 августа 2021 в 20:30
78
1
0

Я пытаюсь создать темный режим с рабочим процессом sass, я нашел объяснение в Интернете, но это в React, и в настоящее время я не знаю, как реагировать, я в некоторой степени понимаю код, но все изменение состояния кажется запутанным, как я могу преобразовать на ванильный Javascript, используя это в ситуации с ванильным 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');
      }
    }
  } 
}
Источник
nima
9 августа 2021 в 07:49
0

в чем дело? Вы можете опубликовать свой javascript или изменить фрагмент состояния, чтобы помочь другим ответить на ваш вопрос.

Martin
10 августа 2021 в 09:35
0

Почему бы вам не использовать медиазапрос?

Ответы (1)

avatar
Harry M
10 августа 2021 в 08:18
0

Как включить темный режим

W3schools.com предлагает хороший пример того, как добиться этого с помощью vanilla JS

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

Просто измените имена классов, и все готово!