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

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

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

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

定义CSS变量：因为CSS变量组件库已经配好一套黑白变量了，直接拿来用arco.design/vue/docs/to...
为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();
  }
});

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

如果觉得官网设计的变量不够，想自己加，可以参考： arco.design/vue/docs/th...

利用组件库平台提供去配置主题： arco.design/docs/design...

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种方案：