DarkMode(5)：深色模式不同實現方案切換
sass自定義函式轉 sass預處理
在《DarkMode（2）：深色模式解決方案——css顏色變數實現Dark Mode》與《DarkMode（3）：深色模式解決方案——顏色反轉與函式 》，如果使用
@mixin themeify {
@each $theme-name， $theme-map in $themes {
$theme-map： $theme-map ！global；
body［data-theme=#{$theme-name}］ & {
@content；
}
}
}
@function themed（$key） {
@return map-get（$theme-map， $key）；
}
這種方案寫出來的樣式程式碼，在改為普通模式，非常難搞。
不過推薦使用正則表示式的方式，去替換
正對第一個函式，替換的正則表示式如下：\@include themeify \{\n（［\s\w\：\-\“\（\）\；\$\！］*）\}
const reg =/\@include themeify \{\n（［\s\w\：\-\”\（\）\；\$\！］*）\}/
const reg = /@include themeify {\n（［\s\w：\-“（）；$！］*）}/；
替換為$1即可
第二個函式正則表達：themed\（\”（［\w\-］*）\“\）\；
const reg = /themed\（\”（［\w\-］*）\“\）\；/
替換為\$$1
sass變數主題輸出切換為css變數主題輸出
如果單純sass變數輸出兩套主題，切換主題樣式，需要重新整理頁面。如果是css變數，就無需重新整理變數
目的無非就是想要輸出：
：root {
——primary-color： #{$primary-color}；
}
如果之前直接是宣告的，也沒有啥好說的
$accent-color： #fbbc04；
：root {
——accent-color-wrong： $accent-color；
——accent-color-right： #{$accent-color}；
}
其實還是宣告一個函式，即可：
$var-element：‘——’；
$colors： （
-black： #000，
-blue： #088DC6
）；
：root {
@each $color in $color-variables {
#{$var-element}#{nth（$color， 1）}： #{nth（$color， 2）}；
}
}
如何在把讀取 variable。scss 變數，並自動處理成css 變數檔案，這個正在研究，等時間空點，再續
這個用sass或者less函式可以直接處理
如果是map 形勢的賦值，直接操作
轉載本站文章《DarkMode（5）：深色模式不同實現方案切換》，
請註明出處：https：//www。zhoulujun。cn/html/webfront/style/darkMode/8586。html
