Skip to content

Latest commit

 

History

History
190 lines (157 loc) · 7.58 KB

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

File metadata and controls

190 lines (157 loc) · 7.58 KB

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

作者：112233，编程导航 编号 280

通过讲解项目中实现切换暗黑模式的方案、tailwind和unocss主题切换，了解前端主题切换方案中CSS变量 + 类名切换来实现主题切换的方法。

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

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

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

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

  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. 将一些写死的样式改为变量：

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

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;

/*如果你想为特定的 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

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代码

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