{"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":"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章