新增切换主题

yangyin

2024-12-11 4c173b743e256132e27096d38f8c9d436c13ee45

 tailwind.config.js

@@ -1,4 +1,24 @@
/** @type {import('tailwindcss').Config} */

// function genSimilarColorsName(brandName) {
//    return {
//      lighter: `var(--${brandName}-lighter-color)`,
//      light: `var(--${brandName}-light-color)`,
//      DEFAULT: `var(--${brandName}-color)`,
//      deep: `var(--${brandName}-deep-color)`,
//      deeper: `var(--${brandName}-deeper-color)`
//    };
//   }
function withOpacityValue(variable) {
   // 返回一个函数，透明度为可选参数，这样在 HTML 元素中使用颜色基础类时，既可以采用 text-blue-500 方式，也支持 text-blue-500/20 快捷同时设置透明度的形式
   return ({ opacityValue }) => {
     if (opacityValue === undefined) {
      return `rgb(var(${variable}))`;
     }
     return `rgba(var(${variable}), ${opacityValue})`;
   };
  }

export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   corePlugins: {
@@ -7,6 +27,41 @@
      // 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
      preflight: false,
   },
   theme: {},
   // theme: {
   //    // ...
   //    // 修改Tailwind主题色配置，使用我们设计的这一套颜色
   //    colors: {
   //      white: '#fff',
   //      black: '#191919',
   //      transparent: 'transparent',
   //      // 直接使用css变量
   //      primary: genSimilarColorsName('primary'),
   //      info: genSimilarColorsName('info'),
   //      success: genSimilarColorsName('success'),
   //      warning: genSimilarColorsName('warning'),
   //      danger: genSimilarColorsName('danger')
   //    }
   //   },
   theme: {
      extend: {
        backgroundColor: { // 此处用来定义主题的背景色基础样式
         skin: {
           bg: withOpacityValue('--color-bg-base'),
           bgExr: withOpacityValue('--color-bg-base-exr'),
           bgSide: withOpacityValue('--color-bg-side'),
           bgBorder: withOpacityValue('--color-bg-border'),
           fo: withOpacityValue('--color-text-font'),
           card: withOpacityValue('--color-bg-card'),
           btn: withOpacityValue('--color-bg-btn'),
           avatar: withOpacityValue('--color-bg-avatar'),
           'btn-hover': withOpacityValue('--color-bg-btn-hover'),
         }
        },
        textColor: { // 文本的基础样式
         'primary': 'var(--color-text-base)',
         'btn-base': 'var(--color-btn-base)',
        }
      }
     },
   plugins: [require("@tailwindcss/typography")],
};