前端换肤，主题切换

一些网站通常会提供白天、夜间模式，以及自定义主题等等，这种主题切换也就是本文说的前端换肤。
在做换肤之前，得先知道一件事情：css的变量定义，对变量定义不熟悉的同学请看MDN文档：自定义属性（–*）：CSS 变量

主题切换也就是样式的切换，我们通过css的变量定义，全局访问这些公共变量就可以实现主题切换。

实现的方式多样：element-plus的暗黑模式，自定义主题，也可以使用JS的API实现。

先设置全局公共样式：

:root {
  --theme-background: #ecf5ff; /*背景色*/
  --theme-color: #303133; /*字体颜色*/
}


.pattern {
  background-color: var(--theme-background);
  color: var(--theme-color);
}

/* 黑夜模式 */
html[theme-colors='dark'] {
  --theme-background: #303133;
  --theme-color: #ecf5ff;
}
/* 白天*/
html[theme-colors='white'] {
  --theme-background: #ecf5ff; 
  --theme-color: #303133; 
}
/* 自定义*/
html[theme-colors='custom'] {
  --theme-background: #e24837; 
  --theme-color: #fcfe97a8; 
}

在main.ts中

// 公共样式
import "./styles/css/index.css";

会使用的方法/API：

1.  document.body.style.setProperty('--theme-background','#21b8db')

2.  document.querySelectorAll('html')[0].setAttribute('theme-colors',value)

下面开始正式的使用方法：

1. 通过 setProperty 方法接口为css样式声明对象上的属性，设置一个新值。

<template>
    <div class="pattern"> 朴实无华，平平无奇，普普通通的一段效果测试文字 </div>

    <el-select v-model="value" clearable placeholder="Select" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
 
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: '',
    label: '初始化',
  },
  {
    value: 'dark',
    label: '暗夜',
  },
]
const handleChange = (value: any) => {
  if (value === 'dark') {
    document.body.style.setProperty('--theme-color', '#fffff')
  } else {
    document.body.style.setProperty('--theme-color', '#1f1f1f')
  }
  // console.log('value',document.body.style);
}
</script>

2.  通过 setPropertyclassListsetAttributeclassList方法，设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性

<template>
    <div class="backClass"> 朴实无华，平平无奇，普普通通的一段效果测试文字 </div>

    <el-select v-model="value" clearable placeholder="Select" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: '',
    label: '初始化',
  },
  {
    value: 'dark',
    label: '暗夜',
  },
  {
    value: 'white',
    label: '白色', 
  },
{
    value: 'custom',
    label: '自定义', 
  },
]

const handleChange = (value: any) => {
  document.querySelectorAll('html')[0].setAttribute('theme-color',value)

  // console.log('value',document.querySelectorAll('html')[0]);
}
</script>

3. 通过js变量进行操作css的类名。

<template>
    <div :class="value"> 朴实无华，平平无奇，普普通通的一段效果测试文字 </div>

    <el-select v-model="value" clearable placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'white',
    label: '白天',
  },
  {
    value: 'dark',
    label: '暗夜',
  },
]
</script>

<style lang="scss" scoped>

.dark {
  background-color: var(--theme-color);
  color: var(--theme-background);
}
.white {
  background-color: var(--theme-background);
  color: var(--theme-color);
}
</style>

4.Element-plus 的

main.ts文件中

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

// 引入暗黑模式

import 'element-plus/theme-chalk/dark/css-vars.css'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

<template>
    <el-switch v-model="isLight" inline-prompt size="large"
            active-icon="Moon" inactive-icon="Sunny" @change="toggleDark"/>
</template>

<script setup lang="ts">
import { ref} from 'vue';

const isDark = useDark();
const toggleDark = useToggle(isDark);

const isLight = computed(() => isDark.value);

</script>