1 заметка с тегом

темная тема

Как включить темную тему на сайте

Темная тема — модно, все включают её себе в макоси (на следующий день, конечно, выключают обратно). Часто выключают потому, что сама тема темная, а весь контент вокруг (письма, сайты) — светлые. Светлый контент бьет по глазам своей яркостью.

Некоторые сайты включают темную тему исходя из времени суток. Например, Авиасейлз:

Скоро наступит будущее (UPD. Наступило в macOS 10.14.4)

В самой новой версии Сафари (Safari Technologies Preview) уже появился детект темной темы внутри браузера. В macOS 10.14.4 эта поддержка появился в обычном сафари.

Из браузера можно узнать установлена ли темная тема у посетителя и сделать немного магии. Светлая:

Темная:

Тем, у кого есть новый Сафари 68+ можно попробовать здесь:

mikeozornin.ru или mikeozornin.ru/blog

Как включить детект

Чтобы включить темную тему используется медиа-запрос prefers-color-scheme:

@media (prefers-color-scheme: dark) {
    //какие-то отличия темной темы, от светлой
}

Чтобы отлаживать, не включая-выключая системную тему, в Сафари (в той самой Technologies Preview) есть кнопка включения темной темы локально в браузере:

Если кому-то интересно как сделана темная тема, то кроме css-файла на сайте есть less-файл на гитхабе. Но осторожно, там очень много быдлокода и костылей.

 Нет комментариев    35   8 мес   темная тема   фронтенд
Подписаться на блог…