DevUI – это команда, которая занимается как проектированием, так и проектированием, обслуживая HUAWEI CLOUD.DevCloudПлатформа и несколько промежуточных и серверных систем в Huawei предназначены для дизайнеров и проектировщиков.
Официальный сайт:devui.designБиблиотека компонентов Ng:ng-devui(Добро пожаловать в Звезду)
Официальное сообщение: добавление помощника DevUI (официальный devui)

введение

Темный режим (Dark Mode) После появления этой функции в iOS13 основные приложения и веб-сайты стали поддерживать темный режим. До этого темный режим чаще встречался в интерфейсе разработки программных IDE и интерфейсе видеосайтов. Первый уменьшает яркость экрана, чтобы пользователи меньше уставали от долгого взгляда на экран; второй использует темный режим, чтобы уменьшить шум, чтобы выделить основной контент. Сложно быстро разработать темный режим? В современных браузерах, поддерживающих пользовательские свойства css (они же css-переменные, css-переменные), можно сказать, что это довольно просто. Вы даже можете добавлять темы в реальном времени во время выполнения, чтобы избавиться от недостатков, заключающихся в том, что темы в традиционном режиме загрузки файла темы CSS должны быть предварительно скомпилированы и не могут быть изменены в любое время. Давайте посмотрим, как использовать настраиваемые свойства CSS для завершения разработки темного режима и тем.

Разработка переключателя тем

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

Использование пользовательских свойств CSS

Вот краткое введение в пользовательские свойства CSS, иногда называемые переменными CSS или каскадными переменными. Он содержит значения, которые можно повторно использовать по всему документу. Использовать настраиваемые свойства--``变量名``:``<span>变量值</span>определить, сvar(--<span>变量名</span>[,<span>默认值</span>])функция для получения значения. Возьмем простой пример:

<!--html-->
<div><p>text</p></div>

/* css */
div { --my-color: red; border: 1px solid var(--my-color); }
p { color: var(--my-color); }

В это время граница div и внутренний элемент p могут использовать эту определенную переменную для установки собственного цвета.

Обычно пользовательские свойства CSS необходимо определять внутри элемента,:rootЗадайте пользовательские свойства псевдоклассов, которые можно использовать по мере необходимости в документе. Переменные CSS могут быть унаследованы, что означает, что мы можем создавать некоторые локальные темы посредством наследования CSS.Мы не будем здесь обсуждать локальные темы, нам просто нужно их правильно использовать.:rootПсевдоклассы можно использовать для тематики всего сайта.

Как переключить тему, вставляем абзац в голову при запуске<style>:root{--变量1: 色值1；--变量2: 色值2 ；……}</style>, и сохраните ссылку на элемент стиля по идентификатору или ссылке, изменив элемент стиля innerText на:root{--变量1: 色值3; --变量2: 色值4；……}Вы можете успешно заменить переменный цвет.

Поскольку данные темы могут быть получены из других мест, таких как интерфейс, мы можем добавить к ним значение по умолчанию, где оно используется, чтобы избежать явления отсутствия цвета до поступления данных темы, напримерp { color: var(--变量1, 色值1);}Таким образом, пользовательские свойства css используются для динамической загрузки различных значений цвета темы во время выполнения.

Sass/Меньше поддержки

Если вы используете переменные CSS непосредственно при разработке CSS, то легко писать проблемы, а проблемы с определением в конечном итоге приведут к множеству переменных, сложному управлению и высоким затратам на замену для изменения значения цвета по умолчанию. При разработке крупных веб-сайтов sass/less обычно используется для предопределения некоторых цветовых переменных для управления цветом.

При использовании sass и меньше вы можете изменить исходный способ передачи значений цвета для передачи пользовательских атрибутов css и значений по умолчанию. файл определения цвета:

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

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

Используйте медиа-запросы

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

API css выглядит следующим образом:

// css
@media (prefers-color-scheme: light) {
  :root{--变量1: 色值1;--变量2: 色值2; ……}
}
@media (prefers-color-scheme: dark) {
  :root{--变量1: 色值3; --变量2: 色值4; ……}
}

Также существуют соответствующие схемы медиазапросов в терминах скриптов API JS выглядит следующим образом:

// js
function isDarkSchemePreference(){
  return window.matchMedia('screen and (prefers-color-scheme: dark)').matches;
}

Сервис переключения тем

Наконец, нам нужно написать службу темы. Основная цель - поддержка применения различных данных переменных CSS при переключении тем. Предположим, что данные нашей переменной CSS хранятся в объекте, значением ключа является имя переменной CSS, а значение value — это переменная CSS в значении этой темы, то ключевые основные функции нашего сервиса переключения тем следующие:

// theme.ts
export class Theme {
  id: ThemeId;
  name: string;
  data: {
    [cssVarName: string]: string
  };
}

// theme-service.ts
class ThemeService {
  contentElement;
  eventBus;
  // ……
  applyTheme(theme: Theme) {
    this.currentTheme = theme;
    if (!this.contentElement) {
      const styleElement = document.getElementById('devuiThemeVariables');
      if ( styleElement) {
        this.contentElement = <HTMLStyleElement>styleElement;
      } else {
        this.contentElement = document.createElement('style');
        this.contentElement.id = 'devuiThemeVariables';
        document.head.appendChild(this.contentElement);
      }
    }
    this.contentElement.innerText = ':root { ' + this.formatCSSVariables(theme.data) + ' }';
    document.body.setAttribute('ui-theme', this.currentTheme.id);

    // 通知外部主题变更
    this.notify(theme, 'themeChanged');
  }

  formatCSSVariables(themeData: Theme['data']) {
    return Object.keys(themeData).map(
      cssVar => ('--' + cssVar + ':' + themeData[cssVar])
    ).join(';');
  }

  private notify(theme: Theme, eventType: string) {
    if (!this.eventBus) { return; }
    this.eventBus.trigger(eventType, theme);
  }
}

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

На данный момент мы открыли приложение тематических сервисов и значений переменных css в разработке, и мы можем разработать темный режим ниже.

разработка темного режима

Семантические цветовые переменные

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

Возьмем простой пример с цветом текста:

Типичный веб-сайт будет иметь основной текст (основной текст), справочную информацию (вторичный текст) и текстовые заполнители. Здесь мы можем использовать три переменные для описания этих текстов text-color-primary, text-color-secondary, text-color-tertiary, а также text-color-normal, text-color-help-info, text-color-placeholder to описать эти цветовые значения.

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

Рисунок 1 Схематическое представление семантических переменных

Управление поведением компонентов с помощью единых семантических переменных

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

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

Рис. 2. Использование переменных для сокращения компонентов

Предоставляет значение цвета темной темы

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

Рис. 3. Реализуйте переключение темной темы, переключая значения цвета

Обработка изображения

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

Темная схема 1: Увеличьте прозрачность изображения. Применимые сценарии: простые изображения статей и сплошной цвет фона.

// css
body[ui-theme-mode='dark'] img {
  opacity: 0.8;
}

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

// css
body[ui-theme-mode='dark'] .dark-mode-image-overlay {
  position: relative;
}
body[ui-theme-mode='dark'] .dark-mode-image-overlay::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(50, 50, 50, 0.5);
}

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

Обеспечьте подписку на изменение темы для работы со сторонними компонентными сценариями.

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

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

Нам нужна простая шина событий, которую можно реализовать любым способом. Вот простая версия интерфейса:

// theme/interface.ts
export interface IEventBus {
  on(eventName: string, callbacks: Function): void;
  off(eventName: string, callbacks: Function): void;
  trigger(eventName: string, data: any): void;
}

При переключении темы выдается событие themeChanged, а текущее событие смены темы можно получить с помощью мониторинга.Оценив тему, применить соответствующую тему к стороннему компоненту или изменить переменную цвета js и т. д. .

Поддержка понижения версии и использование скрипта putty

Понизить версию скриптов интерполяции PostCSS

После использования var те старые браузеры, которые не поддерживают var, будут отображаться без цвета, здесь мы используем плагин postcss для обработки последнего этапа css.

// postcss-plugin-add-var-value.js
var postcss = require('postcss');
var cssVarReg = new RegExp('var\\\\(\\\\-\\\\-(?:.*?),(.*?)\\\\)', 'g');

module.exports = postcss.plugin('postcss-plugin-add-origin-css-var-value', () => {
  return (root) => {
    root.walkDecls(decl => {
      if (decl.type !== 'comment' && decl.value && decl.value.match(cssVarReg)) {
        decl.cloneBefore({value: decl.value.replace(cssVarReg, (match, item) => item) });
      }
    });
  }
});

Плагин postcss обходит правила css с помощьюvar(--变量名, 变量值)Вставлена ​​строка над строкой со значением, замененным значением прямой переменной, совместимой с браузерами, не поддерживающими css vars.

css-vars-ponyfill позволяет IE9+ и Edge 12+ поддерживать переключение тем

css-vars-ponyfillЭтот пакет npm позволяет ie9+/edge12+ поддерживать пользовательские атрибуты css.Это совместимое решение с опциями.Общий принцип заключается в том, чтобы отслеживать значение пользовательского атрибута var в стиле, заменять его исходным значением и вставлять его. Эта схема совместимости в настоящее время не совместима с определениями локальных пользовательских атрибутов CSS, которые напрямую присоединены к элементам. Решение также предоставляет возможность отслеживать вставку стилей в режиме реального времени и поддерживает значения, связанные с переменными. Просто добавьте полифилл, и вы готовы к работе.

// polyfill.ts
import cssVars from 'css-vars-ponyfill';
cssVars({ watch: true, silent: true});

Обсуждение некоторых вопросов

На каком сайте нужно разработать темный режим?

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

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

Есть ли более простой переключатель отображения темного режима? Например, используйте HSL вместо значений цвета RGB.

Значение цвета HSL выражается в виде оттенка, насыщенности и яркости.Поскольку темный режим регулирует яркость и насыщенность, может ли оно автоматически рассчитываться по значению цвета hsl? Цветовое значение этой автоматической темной версии еще предстоит изучить, в основном по двум причинам: 1) Комфортность темного режима не может быть достигнута за счет линейного отображения яркости и насыщенности, а темное отображение, рассчитанное с помощью функции цвета, относительно монотонно. . 2) Реальность такова, что один цвет может отображаться на несколько темных цветов сцены.

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

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

Рис. 4. Множественные сопоставления белого присутствия для переключения тем

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

Таким образом, этот автоматический расчет не прост и требует некоторого исследования.

SASS / менее после использования VAR становится строковым переменным управлением, а не в цветовом преобразовании вычислений?

Переменные sass/less и пользовательских свойств css не являются набором систем переменных. есть время работы для определения значения). При использовании sass/less для управления переменными css, чтобы управлять переменными css для предотвращения ошибок определения, но после использования sass или less и замены их на var вы обнаружите, что sass и less являются такими, какlighten,fadeout,rgbaetc функции недоступны, т.к. для sass и меньше,var(--xxx, #xxx)является строкой, а не значением цвета. В настоящее время для этого нет лучшего метода, и в некоторых статьях также обсуждаются некоторые решения, такие какСсылка на сайт, общая идея состоит в том, чтобы разбить выражение цвета на форму hsl, а затем оперировать с размерностью цвета.На самом деле, встроенную функцию преобразования цвета нельзя использовать незаметно. Другое решение/решение состоит в том, чтобы единообразно обрабатывать места, участвующие в преобразовании цвета, а затем назначать новые имена переменных CSS.Вместо преобразования цветов в таких функциях, как миксин, имена переменных регулярно меняются. Если у читателей есть другие лучшие идеи, они также могут поделиться ими в комментариях.

Суммировать

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

Присоединяйтесь к нам

МыКоманда DevUIДобро пожаловать и присоединяйтесь к нам, чтобы создать элегантную и эффективную систему человеко-машинного проектирования/исследований и разработок. Электронная почта для приема на работу:muyang2@huawei.com.

Текст/DevUI rhlin

Рекомендуемые статьи в прошлом

«О цикломатической сложности во внешнем интерфейсе»

"Научить вас, как создать среду публикации в оттенках серого"

«Научить вас разрабатывать компоненты разбивки на страницы с использованием трех фреймворков Vue/React/Angular»