Интерфейсный сайт поддерживает темный режим одним щелчком мыши

Автор: Фэн Вэйяо, Ши Цзя и Лю Дачан.

Спрос и статус

Будучи «новой модой» последних двух лет, темный/темный режим стал почти стандартной функцией различных систем, приложений и веб-сайтов. Если вы хотите поддерживать темный режим, суть состоит в том, чтобы определить значение цвета, которое действует в темном режиме. На веб-сайте это легко сделать с помощьюCSS-переменныереализовать:

.button {
    background-color: var(--color-bg-0);
}
body {
    --color-bg-0: #fff;
}
body[theme-mode=dark] {
    --color-bg-0: #000;
}

Переменные CSS — это просто некоторые настраиваемые свойства, которые следуют обычным принципам переопределения стиля. Как показано выше,buttonЦвет фона задается--color-bg-0Переменная CSS определяет, когда установлено значение body<body theme-mode="dark">...</body>час,--color-bg-0: #000будет охватывать--color-bg-0: #fff,В настоящее времяbuttonЦвет фона черный.

выше этоSemi DesignОбщий принцип реализации темного режима. Если вы хотите, чтобы ваш сайт поддерживал темный режим,Ключевым моментом является то, что все значения цвета в стилях CSS должны использовать цветовые переменные Semi Design (такие как предыдущий--color-bg-0).

Проблема сейчас в том, что для существующих проектов для поддержки темного режима все значения цвета в проекте необходимо вручную заменить на переменные цвета Semi, что является очень утомительным и трудоемким процессом. Поэтому в этой статье будет описано, как команда Semi решает эту проблему за счет автоматизации во внутренних проектах.

Во избежание двусмысленности в понимании понятие существительного здесь унифицировано:

цветовой литерал: относится к значению цвета, определенному в файле стиля, напримерwhite, #FFF, rgb(23,45,0)Ждать;

цветовая переменная: относится к переменным CSS, связанным с цветом, здесь конкретно относится к переменным полуцвета, таким как--color-primary;

Решения

В основном сосредоточьтесь на двух моментах:

сосредоточиться один: Как анализировать и идентифицировать [цветовые литералы] в файлах стилей, таких как css/scss/stylus, например:background: whiteсерединаwhite.

Обеспокоенность два: вычислить, можно ли заменить распознанный [цветовой литерал] на [переменную цвета], предоставленную в пакете темы Semi, например: var(--color-bg-0). Если значения цвета, соответствующие [литералу цвета] и [переменной цвета], совпадают или похожи, их можно заменить.

Для второй точки, чтобы вычислить, существует ли соответствующая цветовая переменная, вы можете использоватьchorma-js. chorma-js может преобразовывать любой цветовой формат и вычислять сходство между цветами, например:chroma.distance(color1, color2).

Что еще более важно, первым пунктом является то, как анализировать и распознавать [цветовые литералы].В настоящее время первое, что приходит на ум, это PostCSS.

PostCSS

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Отношения между PostCSS и CSS эквивалентны Babel и JavaScript. PostCSS может анализировать CSS в абстрактное синтаксическое дерево (AST) и предоставляет API, которые позволяют анализировать и преобразовывать содержимое файлов CSS.

Как показано на рисунке ниже, левая сторона — это фрагмент кода CSS, а правая — результат, проанализированный с помощью PostCSS (доступныйAST Explorer сайтопыт):

Не только CSS, добавляя плагины, PostCSS может анализировать любую форму кода стиля, напримерSass, Less, Stylusтак же какJSXкод стиля в .

Как определить значения цвета

Есть три способа указать значения цвета в CSS, а именно:

ключевые слова цвета,Такие как:white, blueтак далее;

Шестнадцатеричная форма RGB,Такие как:#FFF;
функциональная форма,Такие как:rgb(255, 255, 0)илиrgba(255, 0, 255, 0.5),hsl(0deg, 0%, 13%)илиhsla(0deg, 0%, 13%, 1)илиhwb(...) gray(...);

Таким образом, с помощью результатов парсинга PostCSS для трех вышеуказанных форм значений цвета алгоритм распознавания выглядит так:

Содержит ли значение свойства CSS исчерпывающий ключевые слова цвета;

Значения свойств CSS, начинающиеся с «#», считаются представленными в шестнадцатеричной форме RGB.;
Значение свойства CSS — это функция с именем rgb, rgba,hsl,hsla и т. д. считаются в функциональной форме.

Таким образом, на основе PostCSS мы можем выполнить парсинг стиля и распознавание цвета. Если вы хотите автоматически завершить замену значений цвета файлов стилей в проекте, вам нужно только добавить логику сбора файлов стилей в проекте и инкапсулировать ее в виде инструмента CLI для удобства использования.

PostCSS уже удовлетворяет наши потребности, однако есть еще один способ сделать это — Stylelint.

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

Связь между Stylelint и CSS эквивалентна связи между ESLint и JavaScript. Stylelint — это инструмент для проверки кода файлов стилей. Нижний уровень Stylelint основан на PostCSS, который разбирает и анализирует файлы стилей и может просматривать файлы стилей, такие как CSS/Sass/Stylus/Less.

Например, одно из правил Stylelint,color-named, не положеноключевые слова цвета, эффект следующий:

Когда мы используем в нашем коде что-то вродеwhiteКлючевые слова цвета, Stylelint будет давать подсказки, а с помощью плагинов редактора мы можем получать подсказки в реальном времени в процессе кодирования, что очень удобно.

Каждое правило представляет собой плагин в Stylelint. Входные данные плагина — это абстрактное синтаксическое дерево, анализируемое файлом стиля через PostCSS. Плагин может быть основан наPostCSS APIПройдите по дереву синтаксиса, проанализируйте/измените код стиля. Так похожи правилаcolor-named, мы также можем внедрить плагин Stylelint для анализа и идентификации [цветового литерала] в файле стиля и выдать подсказку, поддерживающую автоматическую замену (автоисправление) для соответствующей переменной полуцвета. В частности, вы можете просмотретьОфициальная документация по разработке плагинов.

Преимущества использования Stylelint по сравнению с PostCSS:

Вам не нужно заботиться о разборе файлов стилей, просто о том, как анализировать после получения результатов анализа
Не нужно заботиться о введении различных плагинов для синтаксического анализа PostCSS в соответствии с разными языками стилей.
StyleLint имеет полные инструменты CLI и плагины VS Code, которые можно повторно использовать напрямую.

Таким образом, мы, наконец, реализуем требования на основе Stylelint.

Окончательная способность и как использовать

С помощью Stylelint можно добиться следующих эффектов.

Один щелчок [Найти и заменить] все цветовые переменные с помощью инструмента командной строки StyleLint CLI;

Через плагин редактора Stylelint, который [цветовые литералы] не использует Semi [цветовые переменные] в процессе кодирования, можно настроить автоматическую замену при сохранении;

Шаг 1: Установите пакет npm

$ npm i -D stylelint @ies/stylelint-semi

Шаг 2: Добавьте/измените файлы конфигурации

добавить в корневой каталог.stylelintrc.jsonфайл, конфигурация@ies/stylelint-semiплагин сsemi/color-no-literalправило:

{
  "plugins": ["@ies/stylelint-semi"],
  "rules": {
    "semi/color-no-literal": [true, { "severity": "warning", "fixExact": false }]
  }
}

Шаг 3: Выполните команду CLI

$ npx stylelint "**/*.scss"

После выполнения все элементы в рамках проекта будут обнаружены.scssфайл, будет предложено написать следующее:

.banner {
    color: white;
    background: #eee;
    border: 1px solid rgb(0, 0, 0);
}

Если вы хотите заменить переменную цвета Semi, вы можете использовать:

$ npx stylelint "**/*.scss" --fix

Результат после замены:

.banner {
    color: var(--color-white);
    background: var(--color-tertiary-light-hover);
    border: 1px solid var(--color-black);
}

Шаг 4: Подсказка редактора

Установить в VS CodeПлагин Stylelint. В это время при наведении курсора мыши на значение цвета появится следующее приглашение:

Отображение фактического эффекта

До и после темного режима поддерживается:

облегченная версия

темная версия

Обратная связь приветствуется

Вот команда Semi Design.Semi — это система дизайна, совместно разработанная, разработанная и поддерживаемая фронтенд-командой сообщества взаимных развлечений и командой UED. Он включает в себя полный набор комплексных, простых в использовании, высококачественных средних и внутренних решений, включая язык дизайна, библиотеку компонентов React, рынок материалов, Semi DV и магазин тем. Помогите дизайнерам и разработчикам с легкостью создавать высококачественные веб-приложения с единообразным пользовательским интерфейсом и спецификациями дизайна.

Наша электронная почта:semi-team@bytedance.com

Справочные ресурсы

Документация по разработке плагина Postcss

Разработка правила Stylelint

Средство отладки AST

👇 Ниже объявление о наборе в нашу команду

Наша команда в основном отвечает за промежуточные и фоновые UI-решения отдела Byte Entertainment.

В настоящее время создана библиотека компонентов пользовательского интерфейса, платформа материалов, платформа для обмена вариантами проектирования и другие экосистемы контента, а также предоставлен ряд периферийных инструментов, таких как инструменты для создания веб-сайтов с документами, подключаемые модули для идентификации компонентов проекта и т. д. повысить эффективность производства и потребления контента.

В будущем мы также сосредоточимся на производственном звене дизайна -> исследования и разработки и свяжем весь процесс от проекта дизайна -> код через контент + инструменты.

Присоединяйтесь к нам, чтобы предоставить лучшие решения для промежуточных и закулисных сценариев!

Резюме в прямом эфире: semi-team@bytedance.com

заголовок почты: Приложение + Имя

❤️ Добро пожаловать в "Byte Front-end ByteFE"