Переключение темной темы — Как создать переключатель темного режима в несколько строк JS + CSS

Переключение на темную тему за пару строк Javascript + CSS 🤯

Цель этого проекта — создать кнопку для переключения темы вашего сайта в несколько строк кода css и javascript.

В основном мы имеем такую структуру файлов:

Содержание
  1. HTML
  2. Javascript
  3. CSS

HTML

В html-файле мы создаем кнопку, которая при нажатии вызывает функцию toggleTheme()

<button onclick="toggleTheme()">CHANGE ME</button>
Вход в полноэкранный режим Выйти из полноэкранного режима

Javascript

В javascript вместо этого мы управляем переключением, сначала установим тело и режим по умолчанию:

const body = document.querySelector ('body')
const defaultTheme = 'light'
Вход в полноэкранный режим Выйти из полноэкранного режима

Это будет использоваться для определения режима, выбранного нами при первом появлении пользователя на нашей странице.
Двигаясь дальше, создадим функцию toggleTheme()

const toggleTheme = () => {
  let activeTheme = localStorage.getItem('theme')
  activeTheme == 'light' ? setTheme('dark') : setTheme('light')
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это ядро нашего проекта, как вы видите, здесь есть управляющая переменная activeTheme, которая проверяет, было ли предпочтение сохранено в localStorage пользователя, на основе значения, которое нам предоставит наш localStorage, мы устанавливаем противоположное значение.

Так, если localStorage.getItem(‘theme’) имеет значение ‘light’, мы установим ‘dark’ в качестве параметра для функции setTheme(), чтобы изменить режим.

Что же делает функция setTheme()?

const setTheme = (theme) => {
  localStorage.setItem('theme', theme)
  body.setAttribute('data-theme', theme)
}
Входит в полноэкранный режим Выйти из полноэкранного режима

В этой функции мы делаем только две вещи:

  1. сохраняем новый выбранный режим в localStorage нашего пользователя.
  2. добавляем в наш тег body data-тему, которая будет управлять правильным css

и чтобы завершить наш плагин, мы запускаем функцию, которая позаботится об установке режима по умолчанию при запуске:

const checkDefaultTheme = () => {
  let savedTheme = localStorage.getItem('theme')
  savedTheme ? body.setAttribute('data-theme', savedTheme) : setTheme(defaultTheme)
}

checkDefaultTheme();
Вход в полноэкранный режим Выход из полноэкранного режима

эта функция запускается, как только пользователь попадает на страницу, затем мы проверяем, является ли он возвращающимся пользователем и, следовательно, уже выбрал предпочитаемый режим, если он не присутствует в локальном хранилище, мы переходим к установке режима по умолчанию.

CSS

Перейдем к CSS
нам нужно очень мало строк в CSS, потому что мы будем использовать переменные.

:root {
  --main-bg: white;
  --main-txt: black;
  --button-bg: black;
  --button-txt: white;
}
[data-theme="dark"] {
  --main-bg: black;
  --main-txt: white;
  --button-bg: white;
  --button-txt: black;
}
body {
  background-color: var(--main-bg);
  color: var(--main-txt);
}
Вход в полноэкранный режим Выход из полноэкранного режима

В корне мы определяем цвета, которые мы будем использовать для режима по умолчанию (в нашем случае светлый), затем мы определяем темный режим с помощью [data-theme = «dark»], в котором мы изменим цвета на те же корневые переменные.

И вот начинается волшебство… наше тело будет работать с цветами, заданными в переменных, и в зависимости от [data-theme] оно будет их инвертировать

❤️❤️❤️❤️ не стесняйтесь использовать этот сниппет, весь проект вы можете найти здесь на github aaaaand, если вам понравилось, поставьте звезду на github

Оцените статью
Procodings.ru
Добавить комментарий