{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那针对一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"系统兼容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想要实现深色模式的效果，前提条件是要系统支持，目前常见系统支持情况如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c5\/c599c5bf5bdec84d7d0a4c865181d18d.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"H5 深色适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着深色模式的流行，越来越多的操作系统、浏览器开始支持深色模式，现在可以利用 CSS 的媒体查询方法："},{"type":"link","attrs":{"href":"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/@media\/prefers-color-scheme","title":"xxx","type":null},"content":[{"type":"text","text":"prefers-color-scheme"}]},{"type":"text","text":" 以及 "},{"type":"link","attrs":{"href":"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/Using_CSS_custom_properties","title":"xxx","type":null},"content":[{"type":"text","text":"CSS 变量"}]},{"type":"text","text":" （CSS variables、CSS custom properties）就可以实现页面主题跟随系统自动切换深浅模式。CSS 变量除了 IE，其余各大浏览器都支持的比较好，但 prefers-color-scheme 方法还处于 W3C 草案规范，需要对不兼容浏览器做向下兼容，具体浏览器兼容性可以查询 "},{"type":"link","attrs":{"href":"https:\/\/caniuse.com\/#search=prefers-color-scheme","title":"xxx","type":null},"content":[{"type":"text","text":"Can I Use"}]},{"type":"text","text":" ，综合来说，高版本的主流浏览器都已经支持，IE 不支持。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通过以下两种方式来实现 Web 端的深色适配："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"一、CSS 的媒体查询"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"prefers-color-scheme"},{"type":"text","text":" 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS"}]}]}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"@media (prefers-color-scheme: light) { \n .article { \n background:#fff; \n color: #000; \n } \n} \n@media (prefers-color-scheme: dark) { \n .article { \n background:#000; \n color: white; \n } \n} \n@media (prefers-color-scheme: no-preference) { \n .article { \n background:#fff; \n color: #000; \n } \n} \n"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"link 标签"}]}]}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":" \n \n \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来看一下效果，将系统设置为浅色外观："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4d\/4d1b8db5e4c18c3d1948e54cdffbe37b.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b9\/b93963fec838bd5d65abc62cb8b17f70.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后将系统设置为深色外观："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/73\/73e7ab10e4527fc69d30ba09e5ce7159.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"页面已经加载了对应深色主题的样式："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/8d\/8d519589fc43a621a7062b2f818e2a11.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"二、CSS 变量 + 媒体查询"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"window.matchMedia"},{"type":"text","text":" 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 变量的作用域与 CSS 的\"层叠\"规则一致，优先级最高的声明生效。所以当 body 上存在 \"dark\" 类名时，:root .dark 会生效，否则 :root 生效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":".article { \n color: var(--text-color, #eee); \n background: var(--text-background, #fff); \n} \n:root { \n --text-color: #000; \n --text-background: #fff; \n} \n:root .dark { \n --text-color: #fff; \n --text-background: #000; \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 matchMedia 匹配主题媒体，深色模式匹配 "},{"type":"codeinline","content":[{"type":"text","text":"(prefers-color-scheme: dark)"}]},{"type":"text","text":" ，浅色模式匹配 "},{"type":"codeinline","content":[{"type":"text","text":"(prefers-color-scheme: light)"}]},{"type":"text","text":" 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); \n\/\/ 判断是否匹配深色模式 \nif (darkMode && darkMode.matches) { \n document.body.classList.add('dark'); \n} \n\/\/ 监听主题切换事件 \ndarkMode && darkMode.addEventListener('change', e => { \n if (e.matches) { \n document.body.classList.add('dark'); \n } else { \n document.body.classList.remove('dark'); \n } \n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/46d7c7a235a0e9f1620b40468af85352.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/95\/956caa632cf1ad6394ec3dd56163d62d.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么，针对不支持 CSS 变量的 IE 浏览器怎么办呢？不做兼容性处理的话那页面可能就是一团糟了。所以我们需要针对不兼容的浏览器做一些兜底处理，这里我们可以在 webpack 等构建工具中借助 post-css 的 "},{"type":"text","marks":[{"type":"strong"}],"text":"postcss-css-variables"},{"type":"text","text":" 插件来自动解析 CSS 变量对应的色值，并在原始 CSS 定义之上添加一条新的 CSS 样式，做到对不支持 CSS 变量浏览器的兼容。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用法如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 根目录 postcss.config.js \nmodule.exports = { \n plugins: { \n \"postcss-css-variables\": { \n preserve: true, \/\/ 保留 var() 定义 \n preserveInjectedVariables: false, \/\/ 去除其他模块的重复变量 \n variables: require(\".\/page.json\"), \/\/ CSS 变量，可以支持多个 \n } \n } \n}; \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0e\/0e179126638fc49d786be5ff52c019e2.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"项目实践"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在的 Web、App 项目大都引用第三方开源组件库，组件库一般会使用 Sass、Less 等 CSS 预处理器定义颜色变量作为组件的基础色值，并单独抽离为配置文件。所以，项目使用组件库时可以根据修改基础色值来自定义主题。那么针对项目的深色模式适配方案也一样，主要分为三步：一、组件库深浅色主题 适配；二、项目中深浅色的颜色适配；三、 完成 CSS 变量到页面的注入。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"组件库样式、自定义样式适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果第三方组件本身支持多主题或者深色模式，可以直接按说明给组件设置对应主题模式；如果第三方组件库不支持的话，只能用覆盖的方式。这里以 Less 为例进行简单实例说明："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修改前："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ index.less\n@white: #fff; \/\/ 颜色预定义\n@background-color: @white;\n\/\/ 组件样式 panel.less\n.panel-background-color {\n background-color: @background-color; \/\/ 组件中使用 less 变量定义颜色样式\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新增两个 js 或者 JSON 文件，分别定义深浅模式下的 CSS 变量，并命名为 light-theme1.js、dark-theme1.js 他们并不会影响组件的样式，只是便于后期注入到全局 style 中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修改后："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 浅色主题文件 light-theme1.js \nconst bgColor = '#fff';\/\/ 颜色预定义 \nmodule.exports = { \n \"--background-color\": bgColor; \n} \n\/\/ 深色主题文件 dark-theme1.js \nconst bgColor = '#000';\/\/ 颜色预定义 \nmodule.exports = { \n \"--background-color\": bgColor; \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 组件样式 panel.less \n.panel-background-color { \n background-color: var(--background-color); \/\/组件中颜色样式 \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 变量支持第二参数，当变量不存在或者未注册成功时，可以为其设置默认值，优化如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 组件样式 panel.less \n.panel-background-color { \n background-color: var(--background-color, @background-color); \/\/ 组件中颜色样式，其中 @background-color 代表修改前组件的背景颜色变量，这里设其为默认值，在适配不成功情况下，可以保持适配前的样式。 \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"项目才是真正使用组件的地方，并且项目本身也有很多自定义 CSS 的颜色样式，需要做与组件库类似的处理，结果也会得到两个 js\/json 文件，分别命名为 light-theme2.js、dark-theme2.js。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"CSS 注入"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在页面渲染前，需要把定义深浅样式的 CSS 变量注入到页面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上两步得到了四个文件，合并浅色样式文件 light-theme1.js 和 light-theme2.js 得到 light-theme.js，合并深色样式文件dark-theme1.js 和 dark-theme2.js 得到 dark-theme.js，最后把 light-theme.js、dark-theme.js 两个文件注入到页面中，注入脚本如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import lightTheme from '.\/light-theme'; \nimport darkTheme from '.\/dark-theme'; \n\/\/ 创建一个 style 元素，用于插入 css 定义 \nconst createStyle = (content) => { \n const style = document.createElement('style'); \n style.type = 'text\/css'; \n style.innerHTML = content; \n document.getElementsByTagName(\"script\")[0].parentNode.appendChild(style); \n\/\/ 在 body 标签中定义 css 变量 \nconst createCssStyle = () => { \n const lightThemeStr = Object.keys(lightTheme).map(key => key + ':' + lightTheme[key]).join(';'); \n const darkThemeStr = Object.keys(darkTheme).map(key => key + ':' + darkTheme[key]).join(';'); \n const lightContent = `body{${lightThemeStr}}`; \/\/ 浅色模式 CSS 变量定义 \n const darkContent = `body.dark{${darkThemeStr}}`; \/\/ 深色模式 CSS 变量定义 \n createStyle(lightContent); \n createStyle(darkContent); \n isDarkSchemePreference(); \n}; "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注入完成后，项目页面中就有了 CSS 变量定义，包括浅色模式 CSS 变量定义和深色模式 CSS 变量定义，具体哪一个生效，就可以根据上面提到的两种适配方案给 body 添加 class 来控制。默认时浅色模式生效，添加 "},{"type":"codeinline","content":[{"type":"text","text":"dark"}]},{"type":"text","text":" 类名时，深色模式会生效。至此就实现了一套完整的深色模式适配方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"native 深色适配"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"iOS"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 iOS 系统中，开发者从颜色和图片两个方面来进行适配，我们不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。颜色的适配，需要使用系统提供的 API，在回调用中不同的模式下分别设置颜色，而图片的适配，需要在 XCode 的 工具栏中 Appearances 下选择 Any，Dark，在同一名称资源的配置下分别添加图片资源。当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Android"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安卓在 Android 10（API 级别 29）及更高版本中提供深色主题背景，可以通过以下三种方法启用深色主题背景："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用系统设置（Settings -> Display -> Theme）启用深色主题背景"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用\"快捷设置\"图块，从通知托盘中切换主题背景（启用后）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Pixel 设备上，选择\"省电模式\"将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"在应用中支持深色主题背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如要支持深色主题背景，必须将应用的主题背景（通常可在 "},{"type":"codeinline","content":[{"type":"text","text":"res\/values\/styles.xml"}]},{"type":"text","text":" 中找到）设置为继承 "},{"type":"codeinline","content":[{"type":"text","text":"DayNight"}]},{"type":"text","text":" 主题背景："}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"
深色模式适配指南
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那针对一款 App 应用（原生 + H5）怎么进行深色模式的适配呢？今天就让我们一起来探究吧！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"系统兼容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想要实现深色模式的效果，前提条件是要系统支持，目前常见系统支持情况如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c5\/c599c5bf5bdec84d7d0a4c865181d18d.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"H5 深色适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着深色模式的流行，越来越多的操作系统、浏览器开始支持深色模式，现在可以利用 CSS 的媒体查询方法："},{"type":"link","attrs":{"href":"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/@media\/prefers-color-scheme","title":"xxx","type":null},"content":[{"type":"text","text":"prefers-color-scheme"}]},{"type":"text","text":" 以及 "},{"type":"link","attrs":{"href":"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/Using_CSS_custom_properties","title":"xxx","type":null},"content":[{"type":"text","text":"CSS 变量"}]},{"type":"text","text":" （CSS variables、CSS custom properties）就可以实现页面主题跟随系统自动切换深浅模式。CSS 变量除了 IE，其余各大浏览器都支持的比较好，但 prefers-color-scheme 方法还处于 W3C 草案规范，需要对不兼容浏览器做向下兼容，具体浏览器兼容性可以查询 "},{"type":"link","attrs":{"href":"https:\/\/caniuse.com\/#search=prefers-color-scheme","title":"xxx","type":null},"content":[{"type":"text","text":"Can I Use"}]},{"type":"text","text":" ，综合来说，高版本的主流浏览器都已经支持，IE 不支持。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通过以下两种方式来实现 Web 端的深色适配："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"一、CSS 的媒体查询"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"prefers-color-scheme"},{"type":"text","text":" 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS"}]}]}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"@media (prefers-color-scheme: light) { \n .article { \n background:#fff; \n color: #000; \n } \n} \n@media (prefers-color-scheme: dark) { \n .article { \n background:#000; \n color: white; \n } \n} \n@media (prefers-color-scheme: no-preference) { \n .article { \n background:#fff; \n color: #000; \n } \n} \n"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"link 标签"}]}]}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":" \n \n \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来看一下效果，将系统设置为浅色外观："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4d\/4d1b8db5e4c18c3d1948e54cdffbe37b.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b9\/b93963fec838bd5d65abc62cb8b17f70.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后将系统设置为深色外观："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/73\/73e7ab10e4527fc69d30ba09e5ce7159.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"页面已经加载了对应深色主题的样式："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/8d\/8d519589fc43a621a7062b2f818e2a11.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"二、CSS 变量 + 媒体查询"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"window.matchMedia"},{"type":"text","text":" 方法可以用来查询指定的媒体查询字符串解析后的结果。结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 变量的作用域与 CSS 的\"层叠\"规则一致，优先级最高的声明生效。所以当 body 上存在 \"dark\" 类名时，:root .dark 会生效，否则 :root 生效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":".article { \n color: var(--text-color, #eee); \n background: var(--text-background, #fff); \n} \n:root { \n --text-color: #000; \n --text-background: #fff; \n} \n:root .dark { \n --text-color: #fff; \n --text-background: #000; \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 matchMedia 匹配主题媒体，深色模式匹配 "},{"type":"codeinline","content":[{"type":"text","text":"(prefers-color-scheme: dark)"}]},{"type":"text","text":" ，浅色模式匹配 "},{"type":"codeinline","content":[{"type":"text","text":"(prefers-color-scheme: light)"}]},{"type":"text","text":" 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); \n\/\/ 判断是否匹配深色模式 \nif (darkMode && darkMode.matches) { \n document.body.classList.add('dark'); \n} \n\/\/ 监听主题切换事件 \ndarkMode && darkMode.addEventListener('change', e => { \n if (e.matches) { \n document.body.classList.add('dark'); \n } else { \n document.body.classList.remove('dark'); \n } \n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/46d7c7a235a0e9f1620b40468af85352.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/95\/956caa632cf1ad6394ec3dd56163d62d.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么，针对不支持 CSS 变量的 IE 浏览器怎么办呢？不做兼容性处理的话那页面可能就是一团糟了。所以我们需要针对不兼容的浏览器做一些兜底处理，这里我们可以在 webpack 等构建工具中借助 post-css 的 "},{"type":"text","marks":[{"type":"strong"}],"text":"postcss-css-variables"},{"type":"text","text":" 插件来自动解析 CSS 变量对应的色值，并在原始 CSS 定义之上添加一条新的 CSS 样式，做到对不支持 CSS 变量浏览器的兼容。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用法如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 根目录 postcss.config.js \nmodule.exports = { \n plugins: { \n \"postcss-css-variables\": { \n preserve: true, \/\/ 保留 var() 定义 \n preserveInjectedVariables: false, \/\/ 去除其他模块的重复变量 \n variables: require(\".\/page.json\"), \/\/ CSS 变量，可以支持多个 \n } \n } \n}; \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0e\/0e179126638fc49d786be5ff52c019e2.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"项目实践"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在的 Web、App 项目大都引用第三方开源组件库，组件库一般会使用 Sass、Less 等 CSS 预处理器定义颜色变量作为组件的基础色值，并单独抽离为配置文件。所以，项目使用组件库时可以根据修改基础色值来自定义主题。那么针对项目的深色模式适配方案也一样，主要分为三步：一、组件库深浅色主题 适配；二、项目中深浅色的颜色适配；三、 完成 CSS 变量到页面的注入。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"组件库样式、自定义样式适配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果第三方组件本身支持多主题或者深色模式，可以直接按说明给组件设置对应主题模式；如果第三方组件库不支持的话，只能用覆盖的方式。这里以 Less 为例进行简单实例说明："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修改前："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ index.less\n@white: #fff; \/\/ 颜色预定义\n@background-color: @white;\n\/\/ 组件样式 panel.less\n.panel-background-color {\n background-color: @background-color; \/\/ 组件中使用 less 变量定义颜色样式\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新增两个 js 或者 JSON 文件，分别定义深浅模式下的 CSS 变量，并命名为 light-theme1.js、dark-theme1.js 他们并不会影响组件的样式，只是便于后期注入到全局 style 中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修改后："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 浅色主题文件 light-theme1.js \nconst bgColor = '#fff';\/\/ 颜色预定义 \nmodule.exports = { \n \"--background-color\": bgColor; \n} \n\/\/ 深色主题文件 dark-theme1.js \nconst bgColor = '#000';\/\/ 颜色预定义 \nmodule.exports = { \n \"--background-color\": bgColor; \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 组件样式 panel.less \n.panel-background-color { \n background-color: var(--background-color); \/\/组件中颜色样式 \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 变量支持第二参数，当变量不存在或者未注册成功时，可以为其设置默认值，优化如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 组件样式 panel.less \n.panel-background-color { \n background-color: var(--background-color, @background-color); \/\/ 组件中颜色样式，其中 @background-color 代表修改前组件的背景颜色变量，这里设其为默认值，在适配不成功情况下，可以保持适配前的样式。 \n} \n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"项目才是真正使用组件的地方，并且项目本身也有很多自定义 CSS 的颜色样式，需要做与组件库类似的处理，结果也会得到两个 js\/json 文件，分别命名为 light-theme2.js、dark-theme2.js。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"CSS 注入"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在页面渲染前，需要把定义深浅样式的 CSS 变量注入到页面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上两步得到了四个文件，合并浅色样式文件 light-theme1.js 和 light-theme2.js 得到 light-theme.js，合并深色样式文件dark-theme1.js 和 dark-theme2.js 得到 dark-theme.js，最后把 light-theme.js、dark-theme.js 两个文件注入到页面中，注入脚本如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import lightTheme from '.\/light-theme'; \nimport darkTheme from '.\/dark-theme'; \n\/\/ 创建一个 style 元素，用于插入 css 定义 \nconst createStyle = (content) => { \n const style = document.createElement('style'); \n style.type = 'text\/css'; \n style.innerHTML = content; \n document.getElementsByTagName(\"script\")[0].parentNode.appendChild(style); \n\/\/ 在 body 标签中定义 css 变量 \nconst createCssStyle = () => { \n const lightThemeStr = Object.keys(lightTheme).map(key => key + ':' + lightTheme[key]).join(';'); \n const darkThemeStr = Object.keys(darkTheme).map(key => key + ':' + darkTheme[key]).join(';'); \n const lightContent = `body{${lightThemeStr}}`; \/\/ 浅色模式 CSS 变量定义 \n const darkContent = `body.dark{${darkThemeStr}}`; \/\/ 深色模式 CSS 变量定义 \n createStyle(lightContent); \n createStyle(darkContent); \n isDarkSchemePreference(); \n}; "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注入完成后，项目页面中就有了 CSS 变量定义，包括浅色模式 CSS 变量定义和深色模式 CSS 变量定义，具体哪一个生效，就可以根据上面提到的两种适配方案给 body 添加 class 来控制。默认时浅色模式生效，添加 "},{"type":"codeinline","content":[{"type":"text","text":"dark"}]},{"type":"text","text":" 类名时，深色模式会生效。至此就实现了一套完整的深色模式适配方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"native 深色适配"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"iOS"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 iOS 系统中，开发者从颜色和图片两个方面来进行适配，我们不需要关心切换模式后该怎么操作，因为这些都由系统帮我们实现。颜色的适配，需要使用系统提供的 API，在回调用中不同的模式下分别设置颜色，而图片的适配，需要在 XCode 的 工具栏中 Appearances 下选择 Any，Dark，在同一名称资源的配置下分别添加图片资源。当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Android"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安卓在 Android 10（API 级别 29）及更高版本中提供深色主题背景，可以通过以下三种方法启用深色主题背景："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用系统设置（Settings -> Display -> Theme）启用深色主题背景"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用\"快捷设置\"图块，从通知托盘中切换主题背景（启用后）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Pixel 设备上，选择\"省电模式\"将同时启用深色主题背景，其他原始设备制造商 (OEM) 不一定支持这种行为"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"在应用中支持深色主题背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如要支持深色主题背景，必须将应用的主题背景（通常可在 "},{"type":"codeinline","content":[{"type":"text","text":"res\/values\/styles.xml"}]},{"type":"text","text":" 中找到）设置为继承 "},{"type":"codeinline","content":[{"type":"text","text":"DayNight"}]},{"type":"text","text":" 主题背景："}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章