Темный режим в наши дни — это стол для любого веб-сайта. Хотя правильный темный режим требует большой работы, мы можем быстро добиться темного режима с помощью этих двух простых, но эффективных решений.

Вариант 1: инвертировать

Это просто инвертирует все цвета. Он просто преобразует один цвет в другой, независимо от того, изображение это, видео или текст. Нравиться

черный становится белым
светло-серый становится темно-серым
белый становится черным

Это решение похоже на режим инвертирования, который существует в вашей ОС, такой как Mac.

Это решение на ‹ 10 строк. Приведенный ниже CSS преобразует все элементы в темный эквивалент.

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }
}

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

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }

  img, video {
    filter: invert(1) hue-rotate(-180deg);
  }
}

Давайте углубимся в это

Prefers-color-scheme: этот медиа-запрос сообщает веб-сайту, что пользователь предпочитает темный режим. Пользователям необходимо установить свои предпочтения либо через темный режим/тему ОС, либо через настройки браузера.

Invert(1):преобразует весь цвет из светлого в темный. Вы можете указать значения от 0 до 100% или от 0 до 1.

Hue-rotate(180deg):сохраняет некоторые цвета в исходной форме. Таким образом, в большинстве случаев только черный/серый преобразуется в белый (я знаю, что упрощаю это)

Инвертируем все, кроме видео и изображения (и многое другое на основе вашего сайта)

Мы можем улучшить это немного больше.

@media (prefers-color-scheme: dark) {
  body { 
    filter: invert(1) hue-rotate(180deg); 
  }

  img, video {
    filter: invert(1) hue-rotate(-180deg);
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  body { 
    filter: invert(1); 
  }

  img, video {
    filter: invert(1);
  }
}

для людей, предпочитающих контраст, не беспокойтесь о сохранении исходного цвета.

Вот как 3 режима выглядят в Google. В контрастном режиме синий цвет становится оранжевым, а ссылки ниже более читаемы (все еще не на 100%, но лучше).

Пока у вас есть хороший контраст в светлом режиме, все будет хорошо выглядеть и в темном режиме. Что, если все значки на вашем сайте являются изображениями, давайте отфильтруем их

img:not(.icon) {
    filter: invert(1);
  }

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

Вариант 2: Тема с CSS-переменной

Этот подход требует значительных усилий, но оно того стоит. Здесь мы заменяем все наши цвета переменной css, как показано ниже.

body { 
  --primary-text-color: black; 
} 

@media (prefers-color-scheme: dark) {
  body { 
    --primary-text-color: white; 
  } 
}
 
main { 
  color: var(--primary-text-color); 
}

Что делать, если вы используете SASS. Затем используйте переменные SASS, чтобы заполнить эти переменные css.

$darkTextColor: white;
$lightTextColor: black;

@media (prefers-color-scheme: light) {
  body { 
    --primary-text-color: $lightTextColor;
  } 
}

@media (prefers-color-scheme: dark) {
  body { 
    --primary-text-color: $darkTextColor;  
  } 
}
 
main { 
  color: var(--primary-text-color);
}

Это позволяет вам иметь множество тем. Завтра, если вы добавите темы на свой сайт, вы можете просто изменить переменную, и ваш сайт будет работать отлично.



Простой способ создания темы с помощью переменной CSS
Как создать загрузочную библиотеку с минимальным кодом.medium.com



Оба подхода имеют несколько ошибок

  1. Не проникают в фреймы. Вам нужно сделать то же самое внутри каждого iframe.
  2. Убедитесь, что ваши изображения прозрачны и не имеют белых рамок и т. д. Они не будут хорошо смотреться в темном режиме.
  3. Если ваши пользователи хотят использовать темный режим для всего, кроме вашего сайта, или наоборот, у них нет простого способа добиться этого.
  4. Поддержка браузерами этих медиа-запросов выше 95%, но не на 100%.

Хотите, чтобы мы написали больше

Нажмите аплодисменты, если вам понравилось. Это побудит нас писать больше. Подпишитесь, чтобы увидеть больше сообщений. Прокомментируйте ниже, если у вас есть какие-либо другие предложения или материалы. И теперь вы находитесь на темной стороне вещей.