postcss-theme-color

主题色通用插件

安装

# npm
npm install postcss-theme-color@latest

# yarn
yarn add postcss-theme-color@latest

使用

• 在 postcss.config.js 中配置postcss插件，支持传入自定义主题配置参数（可选）

module.exports = {
  plugins: {
    'postcss-theme-color': {
      // customThemeConfig: { // 自定义主题配置
      //   custom: {
      //     main_theme: 'red',
      //     bg_dialog: '#1d1d1c',
      //     bg_color_pop: '#4e4e4e',
      //   },
      // },
    },
  },
}

• 在 /src/main.ts 中为根节点注入css属性选择器，匹配主题样式，'day'为动态参数
• 目前支持直接设置的主题有：day 日间模式， night 夜间模式， light 明亮模式
• 如果传入了自定义主题配置，需要配置参数为custom

document.documentElement.setAttribute('data-theme', 'day')

• 在 xxx.scss 或 <style lang="scss"></style> 中使用，支持配置透明度

.red {
  color: themeSwitch(red);
}
.green {
  color: themeSwitch(green, 0.5); // 50%透明度
}