fix: 🐛 修复 Storage 在缺失 DESIGN-SETTING 时设置根节点属性的错误

This commit is contained in:
xiangshu233 2024-03-05 00:34:51 +08:00
parent 8e5979c808
commit e62d5988e1
2 changed files with 7 additions and 13 deletions

View File

@ -9,24 +9,19 @@
<body> <body>
<div id="app"> <div id="app">
<script> <script>
const designSetting = JSON.parse(
window.localStorage.getItem('DESIGN-SETTING'),
)
;(() => { ;(() => {
const { darkMode, appTheme = '#5d9dfe' } =
JSON.parse(window.localStorage.getItem('DESIGN-SETTING')) || {}
let htmlRoot = document.getElementById('htmlRoot') let htmlRoot = document.getElementById('htmlRoot')
let darkMode = designSetting.darkMode if (htmlRoot) {
if (htmlRoot && darkMode) { htmlRoot.setAttribute('data-theme', darkMode || 'light')
htmlRoot.setAttribute('data-theme', darkMode)
darkMode = htmlRoot = null
} else {
htmlRoot.setAttribute('data-theme', 'light')
} }
// 设置主题色变量 // 设置主题色变量
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--app-theme-color', '--app-theme-color',
designSetting.appTheme, appTheme,
) )
})() })()
</script> </script>

View File

@ -44,8 +44,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDesignSettingStore } from '@/store/modules/designSetting' import { useDesignSettingStore } from '@/store/modules/designSetting'
import { hexToRgba } from '@/utils/index' import { hexToRgba } from '@/utils/index'
import { appThemeList } from '@/settings/designSetting'
const { appThemeList } = designSetting
const defaultAppTheme = appThemeList[0] const defaultAppTheme = appThemeList[0]
const designStore = useDesignSettingStore() const designStore = useDesignSettingStore()