{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом темная тема",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/temnaya-tema\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/temnaya-tema\/json\/",
    "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384",
    "author": {
        "name": "Михаил Озорнин",
        "url": "https:\/\/mikeozornin.ru\/blog\/",
        "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384"
    },
    "items": [
        {
            "id": "100",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/web-dark-mode\/",
            "title": "Как включить темную тему на сайте",
            "content_html": "<p class=\"lead\">Темная тема — модно, все включают её себе в макоси (на следующий день, конечно, выключают обратно). Часто выключают потому, что сама тема темная, а весь контент вокруг (письма, сайты) — светлые. Светлый контент бьет по глазам своей яркостью.<\/p>\n<p>Некоторые сайты включают темную тему исходя из времени суток. Например, Авиасейлз:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/dark-mode-aviasales@2x.png\" width=\"846\" height=\"80\" alt=\"\" \/>\n<\/div>\n<h2>Скоро наступит будущее (UPD. Наступило в macOS 10.14.4)<\/h2>\n<p>В самой новой версии Сафари (<a href=\"https:\/\/developer.apple.com\/safari\/technology-preview\/\">Safari Technologies Preview<\/a>) уже появился детект темной темы внутри браузера. В macOS 10.14.4 эта поддержка появился в обычном сафари.<\/p>\n<p>Из браузера можно узнать установлена ли темная тема у посетителя и сделать немного магии. Светлая:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/mikeozornin.ru\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/mikeozornin.ru-light-mode@2x.png\" width=\"1137\" height=\"687\" alt=\"\" \/>\n<\/a><\/div>\n<p>Темная:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/mikeozornin.ru\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/mikeozornin.ru-dark-mode@2x.png\" width=\"1137\" height=\"687\" alt=\"\" \/>\n<\/a><\/div>\n<p>Тем, у кого есть новый Сафари 68+ можно попробовать здесь:<\/p>\n<p class=\"loud\"><a href=\"http:\/\/mikeozornin.ru\">mikeozornin.ru<\/a> или <a href=\"http:\/\/mikeozornin.ru\/blog\">mikeozornin.ru\/blog<\/a><\/p>\n<h2>Как включить детект<\/h2>\n<p>Чтобы включить темную тему используется медиа-запрос prefers-color-scheme:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">@media (prefers-color-scheme: dark) {\r\n    \/\/какие-то отличия темной темы, от светлой\r\n}<\/code><\/pre><p>Чтобы отлаживать, не включая-выключая системную тему, в Сафари (в той самой Technologies Preview) есть кнопка включения темной темы локально в браузере:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/safari-preview@2x.png\" width=\"1000\" height=\"53\" alt=\"\" \/>\n<\/div>\n<p>Если кому-то интересно как сделана темная тема, то кроме css-файла на сайте есть <a href=\"https:\/\/github.com\/mikeozornin\/mikeozornin.ru\/blob\/master\/src\/static\/css\/main-page.less\">less-файл на гитхабе<\/a>. Но осторожно, там очень много быдлокода и костылей.<\/p>\n",
            "date_published": "2018-12-13T10:49:51+03:00",
            "date_modified": "2019-04-06T13:20:02+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/dark-mode-cover.png",
            "_date_published_rfc2822": "Thu, 13 Dec 2018 10:49:51 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "100",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/dark-mode-cover.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/dark-mode-aviasales@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/mikeozornin.ru-light-mode@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/mikeozornin.ru-dark-mode@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/safari-preview@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}