JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div>какой-то контент</div>
  <button type="btn" class="change">изменить тему</button>
</div>

CSS

html[dark]:not([style-scope]):not(.style-scope),
[dark]:not([style-scope]):not(.style-scope) {
  background-color: #000;
}

[dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) {
  background-color: #000;
  color: #fff;
}

JavaScript

$(".change").on("click", function() {
  if (!$(".content").attr("dark")) {
    $(".content").attr("dark", "true");
  } else {
    $(".content").removeAttr("dark");

  }
})

'use strict';
  // создаем <link rel="stylesheet" href="light|dark.css">
  let head = document.head,
      link = document.createElement('link');
  link.rel = 'stylesheet';
  // проверяем значение из localStorage если dark то темная тема
  if (localStorage.getItem('themeStyle') === 'dark') {
    link.href = 'dark.css'; // ссылка на темный стиль
    document.getElementById('switch-1').setAttribute('checked', true); // переключаем чекбокс в положение "темная тема"
  }
  // по умолчанию светлая тема
  else {
    link.href = 'light.css'; // ссылка на светлый стиль
  }
  head.appendChild(link); // вставляем <link rel="stylesheet" href="light|dark.css"> в шапку страницы между темаги head

  // событие при переключении чекбокса
  document.getElementById('switch-1').addEventListener('change', ev => {
    let btn = ev.target;
    // если чекбокс включен
    if (btn.checked) {
      link.href = 'dark.css'; // сключаем темную тему
      localStorage.setItem('themeStyle', 'dark'); // записываем значение в localStorage
    }
    else {
      link.href = 'light.css'; // включаем светлую тему
      localStorage.setItem('themeStyle', 'light'); // записываем значение в localStorage
    }
  });