动态切换引入的CSS文件，更换网站主题

在很多场景下我们需要更换网站的主题，在这种情况下，我们一般都会准备多个对应不同主题的CSS或LESS文件，切换主题时，只需要引入不同的CSS或LESS文件即可！

但是当我们向上述那样切换引入不同的样式文件时，会发现第一次可以实现即时切换样式，但是再切换时，就需要刷新页面才行！

假设我们有两个CSS文件（CSS_1,CSS_2）当我们第一次进入页面时加载的是CSS_1文件，我们触发一个事件来更改主题，在事件内，我们引入了CSS_2文件，此时CSS_2文件就会覆盖CSS_1文件中相同的样式属性，我们就实现了主题切换，但是当我们想再从CSS_2对应的主题切换回CSS_1对应的主题，再次引入CSS_1文件，会发现页面主题不再变化，这是因为浏览器判断已经引入过CSS_1文件，所以不会再次引入，但是此时的CSS_1文件已经被CSS_2文件所覆盖，因此，主题样式也不会再次变化！

所以我们既然不能通过动态引入文件的方式反复改变样式
但是我们可以从不同的样式文件中获取样式，动态的绑定到style标签中

代码如下

// useUpdateTheme.ts

// pinia 引入store
import { useMainStore } from '../store/useMainStore'
// 引入两个样式文件
import * as lightStyle from '../style.light.less?inline'
import * as darkStyle from '../style.dark.less?inline'
// 导出一个函数
export default function updateTheme() {
    const mainStore = useMainStore()
    let styleEle = document.getElementsByTagName('style')[0]
    switch (mainStore.config.theme) {
        case 'light':
            styleEle.innerText = lightStyle.default
            break;
        case 'dark':
            styleEle.innerText = darkStyle.default
            break;
        default:
            styleEle.innerText = lightStyle.default
    }
}

//在其他文件中引入hook
import useUpdateTheme from '../hooks/useUpdateThemes'

//更改主题数据以后，调用hook即可完成主题的更新
useUpdateThemes()