[譯] CSS 變數和 JavaScript 讓應用支援動態主題
大家好！在這篇文章中我準備講一講我在 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 ，隱藏的主題選擇模式就會顯示！:smile:
感謝閱讀，祝你玩得愉快！
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為掘金 上的英文分享文章。內容覆蓋 Android 、 iOS 、 前端 、 後端 、 區塊鏈 、 產品 、 設計 、 人工智慧 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃 、官方微博、 知乎專欄 。