github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:28:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 浏览器不支持 color-mix 时，框架主题不会同步至 element-plus 主题

Browse Source
This commit is contained in:
Hooray
2025-03-13 15:52:58 +08:00
parent db4aa406eb
commit 609e77c159
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/provider/index.vue
+16 -16
View File
@@ -11,23 +11,23 @@ if (isSupprotColorMix) {
document.body.style.setProperty('--el-color-primary', 'hsl(var(--primary))')
document.body.style.setProperty('--el-color-white', 'hsl(var(--primary-foreground))')
document.body.style.setProperty('--el-color-black', 'hsl(var(--primary-foreground))')
watch(() => settingsStore.currentColorScheme, (val) => {
if (val === 'light') {
for (let index = 1; index < 10; index++) {
document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
}
}
else {
for (let index = 1; index < 10; index++) {
document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
}
}
}, {
immediate: true,
})
}
watch(() => settingsStore.currentColorScheme, (val) => {
if (val === 'light') {
for (let index = 1; index < 10; index++) {
document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
}
}
else {
for (let index = 1; index < 10; index++) {
document.body.style.setProperty(`--el-color-primary-light-${index}`, `color-mix(in hsl, hsl(var(--primary)), #000 ${index * 10}%)`)
document.body.style.setProperty(`--el-color-primary-dark-${index}`, `color-mix(in hsl, hsl(var(--primary)), #fff ${index * 10}%)`)
}
}
}, {
immediate: true,
})
</script>
<template>