前端实现主题换肤实践

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

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

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

1. 定义CSS变量：因为CSS变量组件库已经配好一套黑白变量了，直接拿来用https://arco.design/vue/docs/token
2. 为body标签添加相关的属性，参考arcodesign官网：
   

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

▼
javascript
复制代码
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();
  }
});

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

如果发现官网设计的变量不够，想自己加，可以参考：
https://arco.design/vue/docs/theme
利用组件库平台提供去配置主题：
https://arco.design/docs/designlab/guideline

Tailwind颜色主题切换

html 代码

▼
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 的基础层，定义颜色变量

▼
css
复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

/*如果你想为特定的 HTML 元素添加自己默认的基础样式
使用@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

▼
javascript
复制代码
module.exports = {
  mode: 'jit',
  theme: {
    extend: {},
    backgroundColor: {
      //utilities like `bg-base` and `bg-primary`
      base: 'var(--color-base)',
      'off-base': 'var(--color-off-base)',
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      muted: 'var(--color-text-muted)',
    },
    textColor: {
      //like `text-base` and `text-primary`
      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代码

▼
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

▼
javascript
复制代码
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种方案：