[譯] CSS 變量和 JavaScript 讓應用支持動態主題

• 原文地址：Dynamic App Themes with CSS Variables and JavaScript 🎨
• 原文做者：Mike Wilcox
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：CoolRice
• 校對者：Yifan Xiang, CoderMing

你們好！在這篇文章中我準備講一講我在 Web 應用中建立動態主題加載器的方法。我會講一點關於 React、Create-React-App、Portals、Sass、CSS 變量還有其它有意思的東西。若是你對此感興趣，請繼續閱讀！

我正在開發的應用是一個音樂應用程序，它是 Spotify 的迷你克隆版。前端代碼基於 Create-React-App。添加了 node-sass-chokidar 使得 CRA 支持 Sass。

集成 Sass

給 CRA 添加 Sass 並不困難。我僅僅須要安裝 node-sass-chokidar 而後在 package.json 文件添加一些腳本，這些腳本告訴 node-sass-chokidar 怎樣去編譯 Sass 文件而且在開發時可以監視文件變化以再次編譯。include-path 標誌讓 node-sass-chokidar 知道去哪尋找經過 @import 引入的 Sass 文件。這裏有一份完整的選項清單。

集成 Sass 以後，我接下來要作的是定義一個顏色列表，它會成爲應用程序的基本模板。這個列表用不着很是詳細，只須要有基本模板所需最少的顏色就行。接下來，我定義那些使用顏色的部分，併爲它們提供了描述性的名字。有了這些變量，它們就能夠應用於應用程序的各類組件，這些組件會明確應用的主題基調。

Sass 顏色變量

Sass 主題變量

在這裏，能夠看到我已經定義了一組基本顏色變量，並將它們應用於默認的 Sass 主題變量。這些主題變量會貫穿整個代碼庫的樣式表，以將調色板應用到程序並賦予它生命！

下面，我須要一種簡單的方法來動態更新這些變量。這個方法就是使用 CSS 變量。

CSS 變量的瀏覽器支持

CSS 變量是一個較新的瀏覽器規範而且幾乎 100% 瀏覽器支持。考慮到我正在構建的應用是一個原型程序，因此我沒有過多考慮支持舊瀏覽器。話雖如此，仍是有些人推出了一些IE 墊片。

就個人用例來講，我須要將 Sass 變量同步到 CSS 變量。爲此，我選擇了使用 css-vars 包。

css-vars

按照上面 README 中描述的那樣，我大體上對個人應用作了相似的更改……

用 Sass 添加 CSS 變量支持

準備到位後，我能夠在個人樣式表中使用 CSS 變量，而不是使用 Sass 變量。上面的重要一行是 $css-vars-use-native: true;，它告訴 css-vars 包編譯的 CSS 應該編譯爲真正的 CSS 變量。這對於之後須要動態更新它們很是重要。

下一步要在應用中添加一個 「主題選擇器」。對此，我但願能有多一點樂趣並選擇添加了一個隱藏的菜單。這個隱藏的菜單有一點復活節彩蛋的感受而且更加有趣。我並不太擔憂正確的用戶體驗 — 未來我可能會把這個菜單可視化。不過如今，讓咱們爲應用程序添加一個祕密菜單，當用戶按下鍵盤上的某個組合鍵時會顯示這個菜單。

Modal 容器

此容器將監聽 CTRL + E 組合鍵，當它監聽到事件時，顯示隱藏的菜單。這個 Modal 組件實際上是一個 React Portal……

Modal Portal

模式 Portal 能夠附着和脫離 modal-root 元素。有了它，我就能夠建立 Theme 組件，這個組件擁有能夠選擇不一樣主題的菜單。

主題組件

這裏，我引入了一個擁有和以前定義的變量相匹配的調色板列表。列表在選擇後會全局更新應用的狀態，而後調用 updateThemeForStyle 使用來 JavaScript 更新 CSS 變量。

更新 CSS 變量

這個函數使用所選主題的名字在 themeOptions 中找到選中的主題調色板，而後遍歷對應調色板中的顏色屬性並更新到 html 元素的 style 屬性上。

主題選項只是一個選項列表，它具備與 CSS 變量定義的變量相同的變量.

主題選項

有了全部的這些更改，主題選擇器如今能夠動態更新！

主題選擇

這是動態更新主題的效果！

這是我添加功能的提交，完整的代碼庫請看這裏。

你能夠在此嘗試一下這個應用的工做版。（須要 Spotify 的高級會員）。對，若是你在應用中按下 CTRL + e，隱藏的主題選擇模式就會顯示！😄

感謝閱讀，祝你玩得愉快！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。