深色模式适配指南

@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)" /> 

.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; } 

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');    } });  

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

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

// 浅色主题文件 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); //组件中颜色样式 } 

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

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(); }; 

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

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

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],   ), ); 

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

// 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),   ), ); 

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