Добавляет тёмную тему (#172)

* Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Правит цвет выбранного тега * Merge remote-tracking branch 'upstream/master' into feature/162-dark-mode-prototype # Conflicts: # src/includes/header.njk # src/scripts/index.js * Синхронизирует ветку, обновляет названия переменных, правит ошибки верстки * Меняет цвет посещенных ссылок в тёмной теме * Обновляет svg иконки соцсетей * Обновляет использование масок фотографий для темной темы * Обновляет цвет буквицы в темной теме * Обновляет стили таблиц в темной теме * Обновляет Browserlist и версию Node.js * Добавляет Yaml Lint (#152) * Добавляет Yaml Lint * Добавляет отступ * Обновляет версии экшенов --------- Co-authored-by: Pavel Mineev <[email protected]> Co-authored-by: Vadim Makeev <[email protected]> * Переносит весь код скрпитов в html * Делает весь скрипт отдельным файлом, но инлайнит его в HTML * Удаляет иконки github'а * Правит ошибки стиля в js-коде * Правит стиль кавычек * Удаляет лишнюю запятую * Меняет принцип переключения тем * Правит стили * Правит цвета блоков с кодом в статье об OKLCH * Удаляет пустой блок * Правит опечатку в названии атрибута * Правит вложенность элементов * Добавляет игнорирование атрибутов `media` на элементах `meta` для html-валидатора * Добавляет префикс для токенов * Добавляет обводку лого * Делает иконки контрастнее --------- Co-authored-by: Vadim Makeev <[email protected]> Co-authored-by: Paul <[email protected]> Co-authored-by: Pavel Mineev <[email protected]> Co-authored-by: monochromer <[email protected]> Co-authored-by: monochromer <[email protected]>
web-standards-ru · Sep 4, 2024 · 82ec6bb · 82ec6bb
1 parent 85664cb
commit 82ec6bb
Show file tree

Hide file tree

Showing 33 changed files with 389 additions and 105 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,8 @@
     "suppressErrors": [
       "Bad value  for attribute “href” on element “a”: Illegal character in fragment: “#” is not allowed.",
       "Bad value “soft-light” for attribute “mode” on element “feBlend”.",
-      "Element “style” not allowed as child of element “div” in this context."
+      "Element “style” not allowed as child of element “div” in this context.",
+      "Attribute “media” not allowed on element “meta” at this point"
     ]
   }
 }
diff --git a/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md b/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md
@@ -25,7 +25,8 @@ featured: true
         margin-block: -16px 16px;
         padding-block: 24px;
         column-gap: 8px;
-        border: 4px solid var(--color-green-light);
+        border: 4px solid transparent;
+        border-image: linear-gradient(90deg, var(--token-color-content-block-code-gradient)) 1;
         background-image:
             repeating-conic-gradient(
                 #fff 0% 25%,

diff --git a/src/eleventy-config/transforms.js b/src/eleventy-config/transforms.js
@@ -234,6 +234,8 @@ export default function(eleventyConfig) {
             if (outputPath && outputPath.endsWith('.html')) {
                 return htmlmin.minify(content, {
                     collapseWhitespace: true,
+                    minifyJS: true,
+                    minifyCSS: true,
                 });
             }
             return content;

diff --git a/src/images/link.svg b/src/images/link.svg
diff --git a/src/images/logo.svg b/src/images/logo.svg
diff --git a/src/images/social/github.svg b/src/images/social/github.svg
diff --git a/src/images/sprite.svg b/src/images/sprite.svg
diff --git a/src/includes/menu.njk b/src/includes/menu.njk
@@ -19,4 +19,7 @@
             </a>
         </li>
     {% endfor %}
+    <li class="menu__item menu__item--scheme-switcher">
+        {% include "scheme-switcher.njk" %}
+    </li>
 </ul>
diff --git a/src/includes/scheme-switcher.njk b/src/includes/scheme-switcher.njk
@@ -0,0 +1,20 @@
+<section class="scheme-switcher" aria-label="Цветовая тема">
+    <button class="scheme-switcher__button" type="button" value="dark" aria-pressed="false" title="Тёмная">
+        <svg class="scheme-switcher__icon" aria-hidden="true" width="20" height="20">
+            <use href="/images/sprite.svg#moon"></use>
+        </svg>
+        <span class="visually-hidden">Тёмная</span>
+    </button>
+    <button class="scheme-switcher__button" type="button" value="auto" aria-pressed="false" title="Системная">
+        <svg class="scheme-switcher__icon" aria-hidden="true" width="20" height="20">
+            <use href="/images/sprite.svg#duo"></use>
+        </svg>
+        <span class="visually-hidden">Системная</span>
+    </button>
+    <button class="scheme-switcher__button" type="button" value="light" aria-pressed="false" title="Светлая">
+        <svg class="scheme-switcher__icon" aria-hidden="true" width="20" height="20">
+            <use href="/images/sprite.svg#sun"></use>
+        </svg>
+        <span class="visually-hidden">Светлая</span>
+    </button>
+</section>
diff --git a/src/layouts/page.njk b/src/layouts/page.njk
@@ -8,7 +8,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="{{ preview or site.description }}">
-    <meta name="theme-color" content="#81c36d">
+    <meta name="theme-color" content="#81c36d" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#273238" media="(prefers-color-scheme: dark)">
+    <style media="(prefers-color-scheme: light)">
+        {% include 'src/styles/themes/light.css' %}
+    </style>
+    <style media="(prefers-color-scheme: dark)">
+        {% include 'src/styles/themes/dark.css' %}
+    </style>
 
     {% if page.url.startsWith('/podcast/') %}
         <meta name="apple-itunes-app" content="app-id=1080500016">
@@ -21,6 +28,9 @@
     <link rel="alternate" href="{{ site.paths.podcastsFeed }}" type="application/rss+xml" title="Подкасты — Веб-стандарты">
     <link rel="manifest" href="/manifest.json">
     <link rel="me" href="https://mastodon.social/@webstandards_ru">
+    <script>
+        {% include 'src/scripts/modules/scheme-switcher.js' %}
+    </script>
     <link rel="stylesheet" href="/styles/styles.css">
     <link rel="stylesheet" href="/styles/print.css" media="print">
 </head>

diff --git a/src/scripts/modules/scheme-switcher.js b/src/scripts/modules/scheme-switcher.js
@@ -0,0 +1,85 @@
+const STORAGE_KEY = 'color-scheme';
+
+const THEMES = {
+    AUTO: 'auto',
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+const MEDIA = {
+    ENABLED: 'all',
+    DISABLED: 'not all',
+    [THEMES.LIGHT]: '(prefers-color-scheme: light)',
+    [THEMES.DARK]: '(prefers-color-scheme: dark)',
+};
+
+const domRefs = {
+    meta: {
+        [THEMES.LIGHT]: document.head.querySelector('meta[name=theme-color][media*=prefers-color-scheme][media*=light]'),
+        [THEMES.DARK]: document.head.querySelector('meta[name=theme-color][media*=prefers-color-scheme][media*=dark]'),
+    },
+    styles: {
+        [THEMES.LIGHT]: document.head.querySelector('style[media*=prefers-color-scheme][media*=light]'),
+        [THEMES.DARK]: document.head.querySelector('style[media*=prefers-color-scheme][media*=dark]'),
+    },
+    switcher: null,
+};
+
+function getCurrentTheme() {
+    const storedTheme = localStorage.getItem(STORAGE_KEY);
+    return storedTheme || THEMES.AUTO;
+}
+
+function saveCurrentTheme(theme) {
+    if (!theme || theme === THEMES.AUTO) {
+        localStorage.removeItem(STORAGE_KEY);
+    } else {
+        localStorage.setItem(STORAGE_KEY, theme);
+    }
+}
+
+function applyTheme(theme) {
+    theme = theme ?? getCurrentTheme();
+
+    if (domRefs.switcher) {
+        for (const button of domRefs.switcher.querySelectorAll('.scheme-switcher__button')) {
+            button.setAttribute('aria-pressed', button.value === theme);
+        }
+    }
+
+    [
+        ...Object.entries(domRefs.meta),
+        ...Object.entries(domRefs.styles),
+    ].forEach(([originalTheme, element]) => {
+        element.media = theme === THEMES.AUTO
+            ? MEDIA[originalTheme]
+            : theme === originalTheme ? MEDIA.ENABLED : MEDIA.DISABLED;
+        ;
+    });
+}
+
+applyTheme();
+
+document.addEventListener('DOMContentLoaded', () => {
+    domRefs.switcher = document.querySelector('.scheme-switcher');
+
+    domRefs.switcher?.addEventListener('click', (event) => {
+        const button = event.target.closest('.scheme-switcher__button');
+        if (!button) {
+            return;
+        }
+        const theme = button.value;
+        saveCurrentTheme(theme);
+        applyTheme(theme);
+    });
+
+    window.addEventListener('storage', (event) => {
+        if (event.key !== STORAGE_KEY) {
+            return;
+        }
+        const newTheme = event.newValue;
+        applyTheme(newTheme);
+    });
+
+    applyTheme();
+});
diff --git a/src/styles/blocks/archive.css b/src/styles/blocks/archive.css
@@ -89,7 +89,7 @@
 }
 
 .archive__tags-link:not([href]) {
-    color: black;
+    color: var(--token-color-archive-tag-current);
     font-weight: 900;
     font-stretch: expanded;
 }

diff --git a/src/styles/blocks/article-card.css b/src/styles/blocks/article-card.css
@@ -83,7 +83,7 @@
 }
 
 .article-card__link {
-    color: var(--color-grey-darker);
+    color: var(--token-color-article-card-link);
     text-decoration: none;
 }
 
@@ -120,7 +120,7 @@
 
 .article-card__date {
     grid-area: date;
-    color: var(--color-grey-medium);
+    color: var(--token-color-article-card-date);
 }
 
 .article-card__date,
@@ -133,7 +133,7 @@
 }
 
 .article-card__author {
-    color: var(--color-grey-darker);
+    color: var(--token-color-article-card-author);
     text-transform: uppercase;
 }
 

diff --git a/src/styles/blocks/article.css b/src/styles/blocks/article.css
@@ -47,7 +47,7 @@
         grid-template-columns: 1fr 1fr;
         margin: 0 0 64px;
         padding-right: 0;
-        color: black;
+        color: var(--token-color-text-primary);
         background-color: transparent;
     }
 }
@@ -120,8 +120,9 @@
         display: flex;
         flex-direction: column;
         padding: 24px 24px 39px;
-        border-top: 1px solid var(--color-grey-medium);
-        border-bottom: 1px solid var(--color-grey-medium);
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: var(--token-color-article-heading-border);
     }
 }
 
@@ -192,7 +193,7 @@
 
 @media (min-width: 1024px) {
     .article__link {
-        color: black;
+        color: var(--token-color-text-primary);
     }
 }
 
@@ -248,7 +249,7 @@
 
 .article__date {
     margin-right: 21px;
-    color: var(--color-grey-lighter);
+    color: var(--token-color-article-date);
 }
 
 .article__tags {

diff --git a/src/styles/blocks/articles.css b/src/styles/blocks/articles.css
@@ -8,11 +8,11 @@
 
 .articles__item {
     padding: 14px 0 16px;
-    border-top: 1px solid var(--color-grey-lighter);
+    border-top: 1px solid var(--token-color-articles-item-border-color);
 }
 
 .articles__item:last-of-type {
-    border-bottom: 1px solid var(--color-grey-lighter);
+    border-bottom: 1px solid var(--token-color-articles-item-border-color);
 }
 
 @media (min-width: 1024px) {
@@ -36,7 +36,7 @@
         margin-left: 1px;
         padding: 16px 40px 32px 24px;
         border: none;
-        box-shadow: 0 0 0 1px var(--color-grey-lighter);
+        box-shadow: 0 0 0 1px var(--token-color-articles-item-border-color);
     }
 
     .articles__item--main:last-of-type {
@@ -54,7 +54,7 @@
 
 .articles__item--articles,
 .articles__item--articles:last-of-type {
-    border-color: var(--color-grey-lighter);
+    border-color: var(--token-color-articles-item-border-color);
 }
 
 /* Related */
@@ -70,7 +70,7 @@
         margin-left: 1px;
         padding: 16px 32px 32px 24px;
         border: none;
-        box-shadow: 0 0 0 1px var(--color-grey-lighter);
+        box-shadow: 0 0 0 1px var(--token-color-articles-item-border-color);
     }
 
     .articles__item--related:last-of-type {
@@ -84,7 +84,7 @@
     display: flex;
     flex-direction: column;
     padding: 16px 0;
-    background-color: var(--color-grey-dark);
+    background-color: var(--token-color-articles-item-featured-backgound);
     border-top: none;
 }
 
@@ -93,6 +93,5 @@
         z-index: 1;
         grid-row-start: 1;
         grid-row-end: 3;
-        box-shadow: 0 0 0 1px var(--color-grey-dark);
     }
 }