Светло-темный режим с использованием чистого CSS 3

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

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

Во-первых, мы создадим CSS-переменные в базовом файле CSS для тега html, значения которых будут повторно использоваться в дальнейшем везде (при необходимости во вложенности) в стилизации для облегченного режима.

// index.css
html {
  --primaryBackgroundColor: #f5f6f7;  // Light mode background color [white shade]  
--primaryTextColor: #424242;  // Light mode text color [black shade]
}

В приведенном выше коде стиля мы создали переменные функций CSS 3, которые мы назначаем в теге стиля body, чтобы всякий раз, когда пользователь переключал тему, он принимал значение соответствующего стиля тега html.

Теперь мы создадим основную часть стиля, т. е. переменные темного режима под тегом стиля html.dark.

// index.css
html {
  --primaryBackgroundColor: #f5f6f7;  // Light mode background color [white shade]
  --primaryTextColor: #424242;  // Light mode text color [black shade]
}
html.dark {
  --primaryBackgroundColor: #3c3c3c;  // Dark mode background color [black shade]
  --primaryTextColor: #f2f2f2;  // Dark mode text color [white shade]
}

.dark — это имя класса, которое мы добавляем к корневому элементу через JS, когда пользователю нужен темный режим, и удаляем, когда пользователю нужен светлый режим. Добавляя className к корневому элементу, весь код стиля, где бы ни использовались переменные, будет принимать значения переменных темного режима.

Теперь мы назначим эти переменные атрибутам стиля в теге body.

// index.css
html {
  --primaryBackgroundColor: #f5f6f7;  // Light mode background color [white shade]
  --primaryTextColor: #424242;  // Light mode text color [black shade]
}
html.dark {
  --primaryBackgroundColor: #3c3c3c;  // Dark mode background color [black shade]
  --primaryTextColor: #f2f2f2;  // Dark mode text color [white shade]
}
body {
  background-color: var(--primaryBackgroundColor);
  color: var(--primaryTextColor);
  text-align: center;
}

Это поможет изменить цвет фона и текста на уровне всего проекта.

Совет. Вы можете объявить больше переменных и повторно использовать их где угодно, кроме тега стиля тела.

Последний шаг — создать кнопку, которая onClick вызывает функцию, которая добавляет/удаляет имя класса .dark в/из корневого элемента соответственно.

// App.js
import React from "react";
import "./index.css";
function App() {
  const toogleTheme = () => {
    document.documentElement.classList.toggle("dark");
  }
  return (
    <React.Fragment>
      <h1>React Demo to toogle light mode and dark mode</h1>
      <button onClick={toogleTheme}>Toogle</button>
    </React.Fragment>
  );
}
export default App;

Конечный результат: