Прототип тёмной темы #172
Прототип тёмной темы #172
Conversation
|
Круто же) Молодец! Поклацал чуток, нашёл в статьях в цитатах цвет шрифта чёрный и кнопки копирования ссылок у заголовков темноватые. |
|
В целом, код не вызывает никаких вопросов, но надо бы переключалку тем. За цвет большой плашки статьи, отличный от прочих — лайк. Потенциальные проблемы:
|
…mode-prototype # Conflicts: # src/layouts/page.njk # src/styles/blocks/footer.css # src/styles/blocks/header.css # src/styles/blocks/logo.css # src/styles/blocks/navigation.css # src/styles/blocks/page.css # src/styles/styles.css
|
Для этого у html-minifier есть опция |
|
@monochromer спасибо за комментарии, надеюсь, к концу недели буду свободен и пройдусь по многим пунктам. Правки наподобие использования дизайн-токенов я бы вынес на обсуждение для следующей итерации, иначе боюсь этот пул реквест слишком затянется. |
…mode-prototype # Conflicts: # src/includes/header.njk # src/scripts/index.js
…mode-prototype # Conflicts: # src/includes/header.njk # src/scripts/index.js
… into feature/162-dark-mode-prototype # Conflicts: # src/includes/dark-mode.njk # src/includes/header.njk # src/scripts/index.js # src/scripts/modules/dark-mode.js # src/styles/blocks/creators.css # src/styles/blocks/menu.css
vitalybaev
force-pushed
the
feature/162-dark-mode-prototype
branch
from
58bc616 to
e8de3c0
Compare
|
Часть js-кода размещена прямо в HTML для избежания мерцания темы. Другая была в отдельном файле. Перенёс весь код в один отдельный js-файл, он также инлайнится в html. Также для этого добавил настройки минификации для пакета html terser. |
|
Вроде все конфликты поправил. Думаю, можно глядеть. |
|
Работает красиво, вроде. Надо бы только придумать, как объяснить переключатель пользователю, поскольку он не трёхпозиционный. Мне пришлось долго кликать по нему, прежде чем я понял принцип его работы.
К сожалению, эти состояния никак не отображаются: ни визуально, ни в коде, ни в лейбле. Как я это вижу на уровне кода: <!-- Зашёл первый раз со светлой темой -->
<button aria-label="Включить тёмную тему и запомнить выбор">
<!-- Зашёл первый раз с тёмной темой -->
<button aria-label="Включить светлую тему и запомнить выбор">
<!-- Сразу после нажатия или если скрипт нашёл запомненную тему -->
<button aria-label="Вернуться к системной теме">А вот как визуально это показать — это вопрос. Надо подумать. |
|
Если оставаться в рамках одной кнопки, то можно работать с "Включить тёмную тему / Выключить тёмную тему": <!-- изначально ничего не выбрано -->
<button>
<span>Включить тёмную тему</span>
</button><!-- выбрана тёмная тема -->
<button>
<span>Выключить тёмную тему</span>
</button>Можно сделать две кнопки и менять им <!-- изначально ничего не выбрано -->
<div>
<button aria-pressed="false">Включить тёмную тему</button>
<button aria-pressed="true">Включить светлую тему</button>
</div> |
|
Ну или давайте сделаем переключатель из 3-х кнопок - "авто (системная)", "светлая", "тёмная" |
Мне кажется так будет лучше всего с точки зрения понятности. У Доки есть эталон этого контрола. Нужно просто копипастнуть :) 
|
Я тоже плюсую за трёх-секционный переключатель. Когда я открывал PR, в ходу были в основном однокнопочные контролы и не все ещё понимали, что их логика окончательно не приживётся и всё ещё будет сложна для понимания |
|
Поменял принцип переключения тем. Сделал переключатель из трёх кнопок, где выбранная активная тема обозначается через Для удобства смены цветов заведены токены, значения которых задаются в файлах |
There was a problem hiding this comment.
Чуть поправил лого и цвета иконок — и стало совсем хорошо :) Спасибо всем! Мне кажется, что можно мёржить.
Я бы может сделал потом второй подход и отрефакторил принцип установки переменных: мне кажется, что класть вообще все токены в корень не совсем правильно. Плюс есть сложный микс глобальных цветов, светлых и тёмных вариаций и специфических цветов компонентов. Кажется можно лучше, но уже на следующем этапе. Согласны? Я попробую сформулировать ишью с идеей, как это улучшить.
|
Можно ещё вёрстку поправить:
или тоже на следующей итерации |
У меня была шальная мысль убрать несчастное мобильное выпадающее меню, раз пункта всего два (скоро будет ещё третий) и прятать полезные вещи от людей как-то нехорошо. Так что можно оставить до тех пор. |
😃
👍 |
* Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Правит цвет выбранного тега * 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 <pavel@mineev.me> Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * Переносит весь код скрпитов в html * Делает весь скрипт отдельным файлом, но инлайнит его в HTML * Удаляет иконки github'а * Правит ошибки стиля в js-коде * Правит стиль кавычек * Удаляет лишнюю запятую * Меняет принцип переключения тем * Правит стили * Правит цвета блоков с кодом в статье об OKLCH * Удаляет пустой блок * Правит опечатку в названии атрибута * Правит вложенность элементов * Добавляет игнорирование атрибутов `media` на элементах `meta` для html-валидатора * Добавляет префикс для токенов * Добавляет обводку лого * Делает иконки контрастнее --------- Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> Co-authored-by: Paul <paul@mineev.me> Co-authored-by: Pavel Mineev <pavel@mineev.me> Co-authored-by: monochromer <monochromer@mail.ru> Co-authored-by: monochromer <monochromer@users.noreply.github.com>
Решает #162
Как и обещал, публикую прототип тёмной темы на основе макета для того, чтобы пощупать, понять слабые места и всячески довести до ума.
Живой пример
Основные моменты
prefered-color-scheme<html>. Благодаря этому нет мерцания (наподобие FOUC) до загрузки и парсинга CSS. Единственное Eleventy почему-то не хочет его минифицироватьprefered-color-schemeтакже предстоит дописать, опыт есть, проблем не ожидаюДоработки