实现主题换肤( CSS 变量 + 类名切换)

#实战引入：CSS变量 + 类名切换

通过arco-design组件库的使用来了解如何切换主题

主要思路：CSS变量 + 类名切换（组件库提供/自己定义） + 将当前主题模式设置到localStorage + vuex状态管理theme

1. 定义CSS变量：因为CSS变量组件库已经配好一套黑白变量了，直接拿来用arco.design/vue/docs/to…

   

2. 为body标签添加相关的属性，参考arcodesign官网：

设置到localStorage防止刷新之后主题恢复成默认的配置

复制const isLight = ref();
const theme = ref();
const toggleLight = () => {
  isLight.value = true;
  
  document.body.removeAttribute("arco-theme");
  localStorage.setItem("theme", "light");
};
const toggleDark = () => {
  isLight.value = false;
  
  document.body.setAttribute("arco-theme", "dark");
  localStorage.setItem("theme", "dark");
};
onMounted(() => {
  theme.value = localStorage.getItem("theme");
  if (theme.value === "light") {
    toggleLight();
  } else {
    toggleDark();
  }
});

1. 将一些写死的样式改为变量：

如果觉得官网设计的变量不够，想自己加，可以参考： arco.design/vue/docs/th…
利用组件库平台提供去配置主题： arco.design/docs/design…

#Tailwind颜色主题切换

html 代码

复制<div class="relative flex flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div class="relative px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          <div class="font-medium text-xl"></div>
          <p class="text-xl font-bold text-gray-90 text-center">Thank you 🙏</p>
          <div class="text-sm text-gray-500">We appreciate your support.</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

更多颜色： https://tailwindcss.com/docs/customizing-colors 配置文件中进行配置：style.css，将一些基础样式添加到 Tailwind 的基础层，定义颜色变量

复制@tailwind base;
@tailwind components;
@tailwind utilities;


使用@layer 指令将这些样式添加到 Tailwind 的基础层*/
@layer base {
  .theme-light {
    --color-base: theme('colors.white'); 
    --color-text-base: theme('colors.black'); 
    --color-off-base: theme('colors.gray.50');
    --color-text-muted: theme('colors.gray.600');
    --color-text-muted-hover: theme('colors.gray.500'); 
    --color-primary: theme('colors.blue.600'); 
    --color-secondary:theme('colors.blue.300'); 
  }

  .theme-dark {
    --color-base: theme('colors.gray.900');
    --color-text-base: theme('colors.gray.100'); 
    --color-off-base: theme('colors.gray.800'); 
    --color-text-muted:theme('colors.gray.300'); 
    --color-text-muted-hover: theme('colors.gray.200');
    --color-primary: theme('colors.blue.500'); 
    --color-secondary: theme('colors.blue.200'); 
  }
}

配置文件中进行配置：tailwind.config.js，定义了一些背景色和文本颜色的 utility classes

复制module.exports = {
  mode: 'jit',
  theme: {
    extend: {},
    backgroundColor: {
      
      base: 'var(--color-base)',
      'off-base': 'var(--color-off-base)',
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      muted: 'var(--color-text-muted)',
    },
    textColor: {
      
      base: 'var(--color-text-base)',
      muted: 'var(--color-text-muted)',
      'muted-hover': 'var(--color-text-muted-hover)',
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
    },
  },
  variants: {},
  plugins: [],
}

在html相关的地方添加上相关的class就行了：
例如，
在需要应用相应主题样式的地方的父元素或自身元素上添加主题的标签: theme-light
在需要改变背景的地方添加上：bg-base

代码：Tailwind Play

#unocss颜色主题切换

html代码

复制<div class="relative flex flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div class="relative px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          <div class="font-medium text-xl"></div>
          <p class="text-xl font-bold text-gray-90 text-center">Thank you 🙏</p>
          <div class="text-sm text-base">We appreciate your support.</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

配置文件中unocss.config.ts进行配置shortcut

复制export default defineConfig({
    ... ...
    shortcuts:{
        'bg-base': 'bg-[#ffffff] dark:bg-[#20202a]',
        'card-base': 'bg-[#ffffff] dark:bg-[#10101a]',
        'text-base': 'text-[#20202a] dark:text-[#f0f0f0]',
    },
    ... ...
})

在html添加相关标签就行 代码：UnoCSS Playground

#总结

上面的三个切换主题都是是基于CSS变量 + 类名切换

#拓展

推荐文章：前端主题切换方案 - 掘金
6种方案：