枫枫知道个人博客|前端主题切换

[[ slide_text ]]

[[ item.content ]]

前端主题切换

发布时间：2023-01-18 作者：枫枫来源：枫枫知道个人博客

pinia Vue

前端主题切换的原理使用最多的是以下方式

## 通过类名覆盖变量

用户点击切换主题之后，给body设置class属性即可

```CSS
:root{
  --bg: white;
}

.dark{
  --bg: black;
}

```

## 主题的存储

状态存储在pinia中，持久化存储就存在localStorage中

这样做的好处就是各组件都能监听到主题的变化

```JavaScript
import {defineStore} from 'pinia'

export const siteStore = defineStore('site', {
    state: () => {
        return {
            theme: "",
        };
    },
    actions: {
        // 初始化，从本地加载主题，也可以从远程加载专属用户的主题
        loadTheme() {
            let theme = localStorage.getItem("theme")
            if (theme === null) {
                return
            }
            this.theme = theme
            if (theme === 'dark') {
                document.body.classList.add("dark")
            }
        },
        // 设置主题，用户点击按钮，更新theme的值
        setTheme(theme) {
            this.theme = theme
            if (theme === 'dark') {
                document.body.classList.add("dark")
            } else {
                document.body.classList.remove("dark")
            }
            localStorage.setItem("theme", theme)
        }
    }
})

```

## echarts主题切换

echarts动态修改颜色比较麻烦，在官网也没找到合适的方案

可采取组件渲染的方式，重新渲染

并且，为了数据不反复获取，我们得封装两层组件

以文章日历为例

内层组件

```JavaScript
<template>
  <div id="calendar" style="height: 150px; width: 760px"></div>
</template>

let echarts = inject("echarts"); // 主要

const props = defineProps({
  // 主题，从父组件传递而来
  theme: {
    type: String
  },
  // 需要的数据，从父组件传递而来
  chatData: {
    type: Array
  }
})

// 白天的主题
const chatColor = {
  color: "#000000",
  inRangeColor: [
    "#ebedf0", "#c6e48b", "#7bc96f", "#32af4a",
    "#1a792c", "#0f5e1e", "#0f491a", "#02340c"
  ],
  borderColor: "#fff",
}
if (props.theme === 'dark') {
  chatColor.color = "#5a5a5a"
  chatColor.inRangeColor = [
    "#404148", "#c6e48b", "#7bc96f", "#32af4a",
    "#1a792c", "#0f5e1e", "#0f491a", "#02340c"
  ]
  chatColor.borderColor = "#222429"
}

async function article_calendar() {
  let chart = document.getElementById("calendar")
  if (!chart) {
    return
  }

// 分成两份
  let article_change = []
  let article_data = []
  for (const re of props.chatData) {
    article_data.push([
      re.date, re.count
    ])
  }
  article_change.push(props.chatData[0].date)
  article_change.push(props.chatData[props.chatData.length - 1].date)

window.onresize = () => {
    myChart.resize();
  }

}

onMounted(() => {
  article_calendar()
})
</script>
```

外层组件

外层组件的作用就是监听主题的变化，控制子组件重新渲染，并且数据不需要重新获取

```JavaScript
<template>
  <Charts v-if="isChat" :theme="store.theme" :chat-data="dataList"></Charts>
</template>

const store = siteStore()
const isChat = ref(false)
const dataList = ref([])

async function loadData() {
  let url = "/api/calendars"
  let _res = await axios.get(url)
  let res = _res.data
  dataList.value.push(...res.data)
  isChat.value = true
}
loadData()

// 监听theme的变化，如果变化，就控制子组件消失再显示
watch(() => store.theme, (n, o) => {
  if (n !== o) {
    isChat.value = false
    // 这里要一个延时才能生效
    setTimeout(() => {
      isChat.value = true
    })
  }
})
</script>
```

组件中使用

```JavaScript
<template>
  <div class="view">
    <div class="theme_btn">
      <button @click="setTheme('')">白色主题</button>
      <button @click="setTheme('dark')">黑色主题</button>
    </div>
    <div>
      <Charts></Charts>
    </div>
  </div>
</template>

const theme = ref("")
const store = siteStore()

function setTheme(v) {
  store.setTheme(v)
}
// 加载主题
store.loadTheme()

</script>
```

## 看看效果

![](https://secure2.wostatic.cn/static/4S6oLCiPCNgCtqoJTMMrow/image.png?auth_key=1674027336-sbfnAszSPXFDjiQMo9QetZ-0-a6a49d86035f54ee4d4dd884aecb7351)

![](https://secure2.wostatic.cn/static/r21Duk78VKgFeC7Mta3ysr/image.png?auth_key=1674027346-xnWxj3kXrT6b1zi2HamMrA-0-c0fa31ec9ce7b9dab1a1c7a0e2921d2b)

上一篇：JS格式化字符串（两种方法）下一篇：枫枫官方文档上新了！

你觉得文章怎么样