SCSS+WindiCSS实现主题色切换

最近在给自己写主页（同时也是博客），我做了一个切换主题色的功能。每次进入页面时，会随机选择一套配色，让页面显得灵动一些，就像下面这样：

这是如何实现的呢？不妨先从自定义颜色入手

WindiCSS 自定义颜色

定义一个固定的颜色

// windi.config.js

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: "#2196f3",
      },
    },
  },
})

这样就定义了一个 primary 的颜色，之后就能正常使用了，（如 bg-primary / text-primary）

当然，不仅可以传递字符串，还能够使用对象定义一组颜色：（如 bg-primary-light）

// windi.config.js

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: {
          extralight: "#d3eafd",
          light: "#b2dafb",
          medium: "#6ebbf7",
          DEFAULT: "#2196f3"
        },
      },
    },
  },
})

使用CSS变量

为了使颜色可变，使用 CSS 变量会方便许多，WindiCSS 当然也是支持的：

:root {
  --color-primary-extralight: #d3eafd;
  --color-primary-light: #b2dafb;
  --color-primary-medium: #6ebbf7;
  --color-primary: #2196f3;
  --color-primary-dark: #27415b;
}

// windi.config.js

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: {
          extralight: 'var(--color-primary-extralight)',
          light: 'var(--color-primary-light)',
          medium: 'var(--color-primary-medium)',
          DEFAULT: 'var(--color-primary)',
          dark: 'var(--color-primary-dark)',
        },
      },
    },
  },
})

这样就能够基本实现在 WindiCSS 中使用 CSS 变量了，不过还有一个小问题：

WindiCSS 支持为颜色设置透明度，例如 bg-gray-800/80 bg-gray-800 bg-opacity-80 这两种写法。上面的配置方式会导致这种语法失效（丢失透明度）。所以，我们需要给CSS变量换一种形式。同时，需要一个高阶工具函数来包装一下变量：

:root {
  --color-primary-extralight: 211 234 253;
  --color-primary-light: 178 218 251;
  --color-primary-medium: 110 187 247;
  --color-primary: 33 150 243;
  --color-primary-dark: 39 65 91;
}

// windi.config.js

function withOpacityValue(variable) {
  return val => {
    if (val.opacityValue === undefined) {
      return `rgb(var(${variable}))`
    }
    return `rgb(var(${variable}) / ${val.opacityValue})`
  }
}

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: {
          extralight: withOpacityValue('--color-primary-extralight'),
          light: withOpacityValue('--color-primary-light'),
          medium: withOpacityValue('--color-primary-medium'),
          DEFAULT: withOpacityValue('--color-primary'),
          dark: withOpacityValue('--color-primary-dark'),
        },
      },
    },
  },
})

如此一来，每当使用 primary 颜色时，WindiCSS 都会调用函数来生成样式，通过对 opacityValue 的判断来实现对透明度语法的支持。

SCSS 生成 CSS 变量

显然，如果手动为 light extralight 等颜色变种指定颜色值是不现实的，况且现在需要用 R G B 三个数字来表示颜色，编辑器没有高亮，不直观，也会导致维护困难。

这时候SCSS就能派上用场了！SCSS提供了基础的CSS数据类型，判断、遍历语法，同时也提供了海量的工具函数（例如 red() blue() green()等用于通道分离，mix()用于颜色混合）

首先来实现一个工具函数，将传入的十六进制颜色转换成 R G B 三个数字的形式

@function getColorValue($color) {
  @return #{red($color)} #{green($color)} #{blue($color)};
}

/* getColorValue(#2196f3) -> 33 150 243 */

我预想中的情况是——只要给一个 primary 的基础色，SCSS就能帮我把 light extralight 等颜色变种都生成出来。我是用 mix 方法来实现：

@mixin spread-theme-map($map: ()) {
  @each $key, $value in $map {
    #{"--"+$key}: $value;
  }
}

@function theme-primary-map($primary-color: #2196f3) {
  @return (
    color-primary-dark: getColorValue(mix($primary-color, black, 30%)),
    color-primary: getColorValue($primary-color),
    color-primary-medium: getColorValue(mix($primary-color, white, 70%)),
    color-primary-light: getColorValue(mix($primary-color, white, 35%)),
    color-primary-extralight: getColorValue(mix($primary-color, white, 15%))
  );
}

/* spread-theme-map(theme-primary-map(#2196f3)) */

这样，就能针对某一个颜色生成对应的系列颜色属性了。接下来，只需要定义一个数组，把需要的主题色放进去，跑个循环即可（从 Material Design 的文档里随便挑了几个养眼的颜色）：

$themeColorList: (
  #2196f3,
  #f44336,
  #9c27b0,
  #4caf50,
  #3f51b5,
  #795548,
  #607d8b,
  #009688
);

@for $i from 1 through length($themeColorList) {
  $color: nth($themeColorList, $i);
  .theme-#{$i} {
    @include spread-theme-map(theme-primary-map($color));
  }
}

在VSCode中，看起来是这样的：

显然舒服多了。

剩下的工作该划掉了

如果希望修改主题色，只需要给根元素（html 或 body）增加对应类名即可（例如 theme-1 / theme-2），实现的方式很多，因为我使用了 Nuxt.js，下面是我的解决方案。

const randomThemeColorIndex = useState('randomThemeColorIndex', () =>
  Math.floor(Math.random() * themeColorList.length) + 1
)

useHead({
  bodyAttrs: {
    class: 'theme-' + randomThemeColorIndex.value,
  }
})