利用scss進行主題切換

基本思想：在html上添加data-theme屬性通過對應的屬性值切換不同的配置，使用data-theme時

關於主題切換的這些事，網上已經有很多文章記錄了，基本想法都是差不多的，在此，僅記錄我自己使用的方法。設置的主題有三種:1.默認即白天主題 2.暗色主題 3.自定義主題，即自己選擇顏色，我們在這先實現主題的切換。

theme 主題切換

config配置調整

使用theme.scss文件，需要調整config配置

修改后的配置
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ).concat(
    {
      loader: "sass-resources-loader",
      options: {
        resources: [
            // 相關的主題文件
          path.resolve(__dirname, '../src/theme.scss'),
          path.resolve(__dirname, '../src/handler_theme.scss')
        ]
      }
    }
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},

配置theme.scss

默認項目已支持scss編譯。在文件目錄下新建一個theme.scss文件，保存theme配置

    $normal:(
        // 屬性名
        color: (
            // 相關類名： 屬性值
            common: #454545,
            active: #FDD303,
          ),
        background-color: (
            common: #fff;
        )
      );
    $dark:(
        color: (
            common: #fff,
            active: #007aff
        ),
        background-color: (
            common: #000;
        )
    );
    $themes: (
        "default": $normal,
        "dark": $dark
    )

以上，基本設定好了其中兩個主題，然后需要利用scss的mixin來使用。

halder_themes.scss 進行后期處理

利用@mixin 來對themes配置進行處理，使其輸出對應的內容，theme.scss同目錄下新增halder_themes.scss

    @import './theme.scss'; //引入主題配置文件
    //遍歷主題map
    @mixin themeify1 {
      @each $theme-name, $theme-map in $themes {
        //!global 把局部變量強升為全局變量
        $theme-map: $theme-map !global;
        //判斷html的data-theme的屬性值  #{}是sass的插值表達式
        //& sass嵌套里的父容器標識   @content是混合器插槽，像vue的slot
        [data-theme="#{$theme-name}"] & {
          @content;
        }
      }
    }
    //獲取對應主題對應屬性下相關狀態的屬性值
    @function isStyle($style, $type) {
        //map-get 根據對應的key值返回map中對應的值
        //map-get($map, $key)
      @return map-get(map-get($theme-map, $style), $type)
    }

    @mixin styles ($style,$type) {
      @include themeify1 {
        #{$style}:isStyle($style, $type);
      }
    }

使用

在scss文件中使用

    .font {
       @include styles("color","active")
    }

這時候可以看到，編譯之后的css是這樣的

    [data-theme="default"] .font {
        color: #FDD303;
    }

對於不同的主題切換，我們只需要使用最簡單的方法改變html中data-theme的屬性值就可以切換啦

關於自定義主題

一般來說，許多自定義主題是提供幾種不同色值，來進行主題設置，通常這種情況下是配置了不同色值的主題文件，但是，這不是我所設想的自定義主題，自定義主題，當然是可以隨機選中一種顏色來進行配置都是可以的，甚至可以從圖片中選取主題色來進行配置，關於如何設置色值的問題，在網上查了好久，最終發現css的var方法可以使用。
在theme.scss中新增部分內容

    :root { // root選擇器，匹配文檔根元素，一般html文檔中是html元素
      --defineColor: #FDD303; // 定義一個defineColor屬性
    }

    $define: (
        color: (
            common: #454545,
            active: var(--defineColor) //var()用於插入自定義的屬性值
        ),
        background-color: (
            common: #fff;
        )
    )
    $themes: (
        "define": $define
    )

對於使用方法無須修改，可以在文件中通過以下語句進行顏色修改

    document.querySelector(':root').setAttribute('style', '--defineColor: '+color)

這樣一個關於scss下的主題修改就好了，不過感覺還有挺多問題的，畢竟沒有后端，無法保存主題，每次刷新都會回到初始狀態，就先這樣吧