https://mikeozornin.ru/blog/tags/temnaya-tema/ Главная · Блог · Работы · Михаил Озорнин ru E2 (v3798; Aegea) Михаил Озорнин Главная · Блог · Работы · 100 https://mikeozornin.ru/blog/all/web-dark-mode/ Thu, 13 Dec 2018 10:49:51 +0300 Михаил Озорнин https://mikeozornin.ru/blog/all/web-dark-mode/ <p class="lead">Темная тема — модно, все включают её себе в макоси (на следующий день, конечно, выключают обратно). Часто выключают потому, что сама тема темная, а весь контент вокруг (письма, сайты) — светлые. Светлый контент бьет по глазам своей яркостью.</p> <p>Некоторые сайты включают темную тему исходя из времени суток. Например, Авиасейлз:</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/dark-mode-aviasales@2x.png" width="846" height="80" alt="" /> </div> <h2>Скоро наступит будущее (UPD. Наступило в macOS 10.14.4)</h2> <p>В самой новой версии Сафари (<a href="https://developer.apple.com/safari/technology-preview/">Safari Technologies Preview</a>) уже появился детект темной темы внутри браузера. В macOS 10.14.4 эта поддержка появился в обычном сафари.</p> <p>Из браузера можно узнать установлена ли темная тема у посетителя и сделать немного магии. Светлая:</p> <div class="e2-text-picture"> <a href="http://mikeozornin.ru" class="e2-text-picture-link"> <img src="https://mikeozornin.ru/blog/pictures/mikeozornin.ru-light-mode@2x.png" width="1137" height="687" alt="" /> </a></div> <p>Темная:</p> <div class="e2-text-picture"> <a href="http://mikeozornin.ru" class="e2-text-picture-link"> <img src="https://mikeozornin.ru/blog/pictures/mikeozornin.ru-dark-mode@2x.png" width="1137" height="687" alt="" /> </a></div> <p>Тем, у кого есть новый Сафари 68+ можно попробовать здесь:</p> <p class="loud"><a href="http://mikeozornin.ru">mikeozornin.ru</a> или <a href="http://mikeozornin.ru/blog">mikeozornin.ru/blog</a></p> <h2>Как включить детект</h2> <p>Чтобы включить темную тему используется медиа-запрос prefers-color-scheme:</p> <pre class="e2-text-code"><code class="">@media (prefers-color-scheme: dark) { //какие-то отличия темной темы, от светлой }</code></pre><p>Чтобы отлаживать, не включая-выключая системную тему, в Сафари (в той самой Technologies Preview) есть кнопка включения темной темы локально в браузере:</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/safari-preview@2x.png" width="1000" height="53" alt="" /> </div> <p>Если кому-то интересно как сделана темная тема, то кроме css-файла на сайте есть <a href="https://github.com/mikeozornin/mikeozornin.ru/blob/master/src/static/css/main-page.less">less-файл на гитхабе</a>. Но осторожно, там очень много быдлокода и костылей.</p>