Создайте кнопку переключения темного режима для своего веб-приложения/веб-сайта.

Есть много способов сделать это, но я покажу вам простой способ получить темный режим (ночной режим) для вашего веб-приложения или веб-сайта.

давайте начнем с простого приложения React с заголовком и основным разделом. Добавьте обработчик события onClick к кнопке-переключателю и передайте имя функции-переключателя. Я стилизовал заголовок с логотипом реакции и кнопкой, ничего сложного.

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <div onClick={darkModeToggle} className="toggle">
      <div className="toggle-switch"></div>
    </div>
  </header>
  <main className="App-main">
    <h1>Hello World</h1>
  </main>
</div>

Добавьте переход: 0,3 с во внутренний элемент div кнопки-переключателя, чтобы увеличить время анимации переключения.

.App-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0 0 0 /0.1);
}
.toggle{
  width: 3.5em;
  height: 2em;
  border-radius: 2em;
  background: rgba(0 0 0 /0.2);
  margin-right: 1.5em;
  padding: 0.25em;
}
.toggle-switch{
  width: 1.5em;
  height: 1.5em;
  border-radius: 2em;
  background: #61dafb;
  transition: 0.3s;
}

Теперь есть 2 способа добавить стиль темного цвета: вы либо создаете класс с цветом, необходимым для темного режима, либо, если вы используете переменные CSS для своих цветов, вы можете их изменить. Давайте попробуем оба способа.

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

.switch-on{
  transition: 0.3s;
  transform: translateX(1.5em);
}

Создайте функцию переключения темного режима, используемую в обработчике onClick кнопки переключения.

function darkModeToggle(){
  const btn = document.querySelector('.toggle-switch')
  btn.classList.toggle('switch-on')
}

Теперь кнопка будет перемещать свой синий кружок вправо при нажатии и возвращаться в исходное положение при втором нажатии.

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

.dark{
  background-color: #282c34;
  color: white;
}

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

function darkModeToggle(){
  const btn = document.querySelector('.toggle-switch')
  const body = document.querySelector('body')
  btn.classList.toggle('switch-on')
  body.classList.toggle('dark')
}

Но это станет трудным, если в вашем приложении больше компонентов, выбор каждого элемента DOM и использование класса .toggle() требует много работы. Таким образом, самый простой способ — использовать переменные CSS для всех цветов и изменить переменные в функции переключения.

:root{
  --bg: white;
  --text: #101010;
  --secondary: #61dafb;
}

Теперь мы можем использовать эти переменные для использования цветов.

body{
  background: var(--bg);
  color: var(--text);
}

Поэтому, если мы изменим корневые переменные, это повлияет везде, где используется переменная. Во-первых, нам нужно выбрать :root для изменения переменных.

const root = document.querySelector(':root')

И мы можем использовать .style.setProperty(имя переменной, цветовой код), чтобы изменить цвета.

root.style.setProperty('--bg', '#282c34')
root.style.setProperty('--text', 'white')

Но теперь мы не используем метод .toggle(), поэтому нам нужно вернуть исходный цвет при втором щелчке. Мы можем использовать переменную для хранения состояния и изменять состояние при нажатии кнопки, чтобы мы могли использовать состояние в качестве контекста, чтобы проверить, находимся ли мы в темном режиме или нет. Таким образом, мы можем менять цвета в зависимости от состояния.

let state = false
function darkModeToggle(){
  const btn = document.querySelector('.toggle-switch')
  btn.classList.toggle('switch-on')
  state = !state
  if(state){
    root.style.setProperty('--bg', '#282c34')
    root.style.setProperty('--text', 'white')
  }else{
    root.style.setProperty('--bg', 'white')
    root.style.setProperty('--text', '#101010')
  }
}

Теперь это работает нормально, но мы можем сделать то же самое с хуками React useState и useEffect. Поэтому мы меняем состояние с помощью useState внутри функции переключения, а все остальное делаем внутри useEffect. Во-первых, давайте объявим useState.

const [state, setState] = React.useState(false)

Мы можем использовать функцию setState(), чтобы изменить значение внутри useState и получить доступ к значению, используя состояние . Лучше использовать функцию обратного вызова внутри setState(), если изменяемое значение связано/зависит от предыдущего значения, например: необходимо изменить состояниена true, если оно falseи наоборот.

function darkModeToggle(){
  const btn = document.querySelector('.toggle-switch')
  btn.classList.toggle('switch-on')
  setState(prevState => !prevState)
}

Чтобы правильно использовать useEffect, вам нужно передать состояние в виде массива зависимостей, чтобы useEffect не запускался при каждом рендеринге. С stateв качестве массива зависимостей useEffect отображается только в том случае, если изменяется state.

И все, теперь у вас есть темный режим. 👏

Пробуйте, настраивайте, делайте ошибки и делайте, что хотите. Хорошего дня и удачного кодирования.✌️