Руководство по адаптации темного режима

Это 65-я оригинальная статья без воды. Если вы хотите получить больше оригинальных хороших статей, пожалуйста, выполните поиск 👆 Публичный аккаунт выше и следуйте за нами ~

Эта статья была впервые опубликована в блоге Zhengcai Cloud:Руководство по адаптации темного режима

задний план

С выходом iOS 13 тёмный режим (Dark Mode) всё чаще появляется в поле зрения публики, а поддержка тёмного режима стала тенденцией в современных мобильных приложениях и на сайтах, некоторое время назад это было связано с адаптацией WeChat Снова вызвал споры.

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

Как адаптировать темный режим для приложения (родной + H5)? Давайте рассмотрим это вместе сегодня!

совместимая система

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

H5 темная посадка

С ростом популярности темного режима все больше и больше операционных систем и браузеров начинают поддерживать темный режим, и теперь вы можете использовать метод медиа-запроса CSS (prefers-color-scheme)так же какCSS-переменные(переменные CSS, настраиваемые свойства CSS), тема страницы может автоматически переключаться между темным и светлым режимами с помощью системы. Переменные CSS хорошо поддерживаются всеми основными браузерами, кроме IE, но метод Preferences-Color-Scheme все еще находится в черновой спецификации W3C, которая должна быть обратно совместима с несовместимыми браузерами.Вы можете проверить совместимость конкретного браузера.Can I Use, Вообще говоря, поддерживаются основные браузеры старшей версии, IE не поддерживает.

Адаптация к темноте на стороне Интернета может быть достигнута следующими двумя способами:

1. Медиа-запросы CSS

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

@media (prefers-color-scheme: light) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
} 
@media (prefers-color-scheme: dark) { 
  .article {  
    background:#000;  
    color: white;  
  } 
} 
@media (prefers-color-scheme: no-preference) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
}

тег ссылки

<link href="./common.css" rel="stylesheet" type="text/css" /> 
<link href="./light-mode-theme.css" rel="stylesheet" type="text/css" /> 
<link href="./dark-mode-theme.css" rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" />

Чтобы увидеть эффект, установите систему на светлый вид:

Затем установите систему в темный вид:

Страница уже загружена стилями для тёмной темы:

2. CSS-переменные + медиа-запросы

window.matchMediaЭтот метод можно использовать для запроса проанализированного результата указанной строки медиа-запроса. Сочетание переменных CSS иmatchMedia, установите соответствующий цвет темы CSS. Этот метод более гибкий и может быть адаптирован отдельно от цвета темы.

Область действия переменных CSS согласуется с правилами «каскадирования» CSS, и вступает в силу объявление с наивысшим приоритетом. Таким образом, когда в теле присутствует «темное» имя класса, вступает в силу :root .dark, в противном случае вступает в силу :root.

.article { 
  color: var(--text-color, #eee); 
  background: var(--text-background, #fff); 
} 
:root { 
  --text-color: #000; 
  --text-background: #fff; 
} 
:root .dark { 
  --text-color: #fff; 
  --text-background: #000; 
}

Используйте matchMedia, чтобы соответствовать теме мультимедиа, темный режим, чтобы соответствовать(prefers-color-scheme: dark), сопоставление светового шаблона(prefers-color-scheme: light).

Отслеживайте режим темы, добавляйте имя класса dark к телу в темном режиме и автоматически применяйте CSS под именем класса dark в соответствии с характеристиками отзывчивого макета переменных CSS.

const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); 
// 判断是否匹配深色模式 
if (darkMode && darkMode.matches) { 
  document.body.classList.add('dark'); 
} 
// 监听主题切换事件 
darkMode && darkMode.addEventListener('change', e => { 
  if (e.matches) { 
    document.body.classList.add('dark'); 
  } else { 
    document.body.classList.remove('dark');  
  } 
});

Так что насчет браузеров IE, которые не поддерживают переменные CSS? Без обработки совместимости страница может быть в беспорядке. Поэтому нам нужно выполнить некоторую обработку снизу вверх для несовместимых браузеров, здесь мы можем использовать post-css в инструментах сборки, таких как webpack.postcss-css-variablesПлагин автоматически анализирует значение цвета, соответствующее переменной CSS, и добавляет новый стиль CSS поверх исходного определения CSS, что делает его совместимым с браузерами, не поддерживающими переменные CSS.

Использование заключается в следующем:

// 根目录 postcss.config.js 
module.exports = { 
  plugins: { 
    "postcss-css-variables": { 
      preserve: true, // 保留 var() 定义 
      preserveInjectedVariables: false, // 去除其他模块的重复变量 
      variables: require("./page.json"), // CSS 变量，可以支持多个 
    } 
  } 
};

Проектная практика

Большинство текущих веб-проектов и проектов приложений относятся к сторонним библиотекам компонентов с открытым исходным кодом.Библиотеки компонентов обычно используют препроцессоры CSS, такие как Sass и Less, для определения переменных цвета в качестве основных значений цвета компонентов и разделения их на файлы конфигурации. . Поэтому, когда проект использует библиотеку компонентов, вы можете изменить базовое значение цвета, чтобы настроить тему. Затем схема адаптации темного режима для проекта такая же, которая в основном делится на три этапа: 1. Тематическая адаптация темных и светлых цветов библиотеки компонентов 2. Цветовая адаптация темных и светлых цветов в проект; 3. Завершить внедрение переменных CSS на страницу.

Стиль библиотеки компонентов, индивидуальная адаптация стиля

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

до исправления:

// index.less 
@white: #fff; // 颜色预定义 
@background-color: @white; // 组件样式 panel.less 
.panel-background-color { 
  background-color: @background-color; // 组件中使用 less 变量定义颜色样式 
}

Добавьте два файла js или JSON для определения переменных CSS в темном и светлом режиме соответственно и назовите их light-theme1.js и dark-theme1.js Они не повлияют на стиль компонента, но удобны для последующего внедрения в глобальный стиль.

После модификации:

// 浅色主题文件 light-theme1.js 
const bgColor = '#fff';// 颜色预定义 
module.exports = { 
  "--background-color": bgColor; 
} 
// 深色主题文件 dark-theme1.js 
const bgColor = '#000';// 颜色预定义 
module.exports = { 
  "--background-color": bgColor; 
}

// 组件样式 panel.less 
.panel-background-color { 
  background-color: var(--background-color); //组件中颜色样式 
}

Переменные CSS поддерживают второй параметр.Если переменная не существует или не зарегистрирована успешно, вы можете установить для нее значение по умолчанию.Оптимизация выглядит следующим образом:

// 组件样式 panel.less 
.panel-background-color { 
  background-color: var(--background-color, @background-color); // 组件中颜色样式，其中 @background-color 代表修改前组件的背景颜色变量，这里设其为默认值，在适配不成功情况下，可以保持适配前的样式。 
}

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

CSS-инъекция

Перед визуализацией страницы необходимо внедрить в нее переменные CSS, определяющие темный и светлый стили.

Вышеуказанные два шага получают четыре файла, объединяют файлы светлого стиля light-theme1.js и light-theme2.js, чтобы получить light-theme.js, объединяют файлы темного стиля dark-theme1.js и dark-theme2.js, чтобы получить dark -theme.js и, наконец, внедрить на страницу два файла light-theme.js и dark-theme.js.Сценарий внедрения выглядит следующим образом:

import lightTheme from './light-theme'; 
import darkTheme from './dark-theme'; 
// 创建一个 style 元素，用于插入 css 定义 
const createStyle = (content) => { 
  const style = document.createElement('style');  
  style.type = 'text/css'; 
  style.innerHTML = content;  
  document.getElementsByTagName("script")[0].parentNode.appendChild(style); 
  // 在 body 标签中定义 css 变量 
  const createCssStyle = () => { 
  const lightThemeStr = Object.keys(lightTheme).map(key => key + ':' + lightTheme[key]).join(';');		 
  const darkThemeStr = Object.keys(darkTheme).map(key => key + ':' + darkTheme[key]).join(';'); 
  const lightContent = `body{${lightThemeStr}}`; // 浅色模式 CSS 变量定义 
  const darkContent = `body.dark{${darkThemeStr}}`; // 深色模式 CSS 变量定义 
  createStyle(lightContent); 
  createStyle(darkContent); 
  isDarkSchemePreference(); 
};

После завершения инъекции на странице проекта появляются определения переменных CSS, включая определения переменных CSS светлого режима и определения переменных CSS темного режима.Какие из них вступают в силу, вы можете добавить класс в тело в соответствии с двумя схемами адаптации, упомянутыми выше. , чтобы контролировать. Светлый режим действует по умолчанию, добавьтеdarkимя класса, темный режим вступит в силу. На данный момент реализована полная схема адаптации темного режима.

родная темновая адаптация

iOS

В системе iOS разработчик адаптируется из двух аспектов цвета и изображения, нам не нужно заботиться о том, как работать после переключения режима, потому что все это реализовано системой для нас. Для адаптации цвета вам нужно использовать API, предоставляемый системой, чтобы установить цвет в разных режимах в обратном вызове.Для адаптации изображения вам нужно выбрать Any и Dark в разделе Appearances на панели инструментов XCode и настроить ресурс с тем же имя. Добавьте изображения ниже. При переключении темного режима система будет искать и автоматически переключать файлы цветов и ресурсов в соответствующий режим в соответствии с адаптированными ресурсами цветов и изображений.

Android

Android предоставляет темную тему в Android 10 (уровень API 29) и выше, которую можно включить тремя способами:

Включите темную тему с помощью системных настроек (Настройки -> Дисплей -> Тема)
Используйте плитку быстрых настроек для переключения тем из области уведомлений (если она включена)
На устройствах Pixel выбор «Экономия заряда батареи» также включает темную тему, поведение, которое не обязательно поддерживается другими производителями оригинального оборудования (OEM).

Поддержка темных тем в приложениях

Для поддержки темных тем, тема приложения (обычно доступна наres/values/styles.xmlНайдено в) установлено на наследствоDayNightФон темы:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

также можно использоватьMaterialComponentТемный фон темы:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Это свяжет основную тему приложения с флагом управляемого системой ночного режима и установит темную тему приложения по умолчанию (если она включена).

Темы и стили

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

?android:attr/textColorPrimaryЭто общий цвет текста, который близок к черному в светлых темах и близок к белому в темных темах и включает отключенное состояние.
?attr/colorControlNormalОбщий цвет значка, который включает деактивированное состояние.

Flutter

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

глобальная тема

Глобальная тема — это тема, созданная корневым приложением MaterialAPP. Чтобы совместно использовать тему, включая цвета и стили шрифта, в приложении, мы можем предоставить ThemeData конструктору материала. theme указывает светлый режим, darkTheme указывает темный режим, и программа автоматически подбирает режим в соответствии с темным режимом, установленным системой.

new MaterialApp( 
  title: title, 
  theme: new ThemeData( 
     brightness: Brightness.light, 
     primaryColor: Colors.lightBlue[800], 
     accentColor: Colors.cyan[600] , 
  ), 
  darkTheme: new ThemeData( 
     brightness: Brightness.dark, 
     primaryColor: Colors.lightGreen[800] , 
     accentColor: Colors.cyan[200], 
  ), 
);

местная тема

Если мы хотим охватить глобальную тему приложения в части приложения, мы можем инкапсулировать часть, которая будет покрыта, в виджете темы.Есть 2 способа решить эту проблему: создать определенные ThemeData или расширить родительскую тему.

Создайте уникальный ThemeData

Если мы не хотим наследовать цвет или стиль шрифта какого-либо приложения, мы можем передатьnew ThemeData()Создайте экземпляр и передайте его виджету темы.

// Create a unique theme with "new ThemeData" 
new Theme( 
  data: new ThemeData( 
    accentColor: Colors.yellow, 
  ), 
  child: new FloatingActionButton( 
    onPressed: () {}, 
    child: new Icon(Icons.add), 
  ), 
);

Расширить родительскую тему

Вместо переопределения всех свойств темы при расширении родительской темы мы можем сделать это с помощьюcopyWithметод достижения.

// Find and Extend the parent theme using "copyWith". Please see the next section for more info on `Theme.of`. 
new Theme( 
  data: Theme.of(context).copyWith(accentColor: Colors.yellow), 
  child: new FloatingActionButton( 
    onPressed: null, 
    child: new Icon(Icons.add), 
  ), 
);

Используйте темы

Мы можем сделать это в виджетеbuildчерез методTheme.of(context)Функция использует пользовательскую тему.

new Container( 
  color: Theme.of(context).accentColor, 
  child: new Text( 
    'Text with a background color', 
    style: Theme.of(context).textTheme.title, 
  ), 
);

Эффект рендеринга следующий:

Суммировать

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

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 50 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры с полным стеком, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com