Три строки CSS добавляют поддержку темного режима для самородков

CSS

Автор этой статьи:Gavin, несанкционированное воспроизведение запрещено.

Это надежный метод преобразования, который поддерживает темный режим.В качестве примера возьмем страницу статьи Nuggets:

Теперь добавьте волшебный CSS

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

Это так просто, вы сделали! ✌️

Реализовать темный режим

хром эмулирует темный режим

объяснять

filterСвойства CSS применяют к элементам графические эффекты, такие как размытие или изменение цвета. Фильтры часто используются для настройки рендеринга изображений, фона и границ. (Ссылаться на:Веб-документация MDN)

Для темного режима дваfilter:invertа такжеhue-rotate

invert: инвертировать входное изображение. Значение определяет масштаб преобразования. 100% (или1) полностью преобразует: черный в белый, белый в черный и аналогично для других цветов.

hue-rotate:hue-rotateЧтобы помочь нам справиться с другими цветами, кроме черного и белого, оттенок поворачивается на 180 градусов, чтобы гарантировать, что цветовая тема веб-страницы не изменится, а только ослабит ее цвет. Единственным недостатком этого подхода является то, что он также переворачивает все изображения на странице. Поэтому для решения этой проблемы необходимо добавить одно и то же правило ко всем изображениям на странице.

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

Конечно, вы также можете добавитьtransitionэффект перехода

html {
    transition: color 300ms, background-color 300ms;
}

результат

Внимательные студенты могут обнаружить, что проблема с аватаром выше все еще существует, и он не изменился на исходный цвет изображения, потому что тег a, используемый для аватара в статье Nuggets, такой же, как и выше, мы также можем добавить обратно к тегу a, и окончательный код выглядит следующим образом:

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  html img {
      filter: invert(1) hue-rotate(180deg);
  }
  a {
      filter: invert(1) hue-rotate(180deg);
  }
}
html {
  transition: color 300ms, background-color 300ms;
}

Справочная статья:Dev.to/AK Hi La Per Capita/…

Использование JS для реализации темного режима:Dev.to/AK Hi La Per Capita/…

Категории