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