blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-05 19:42:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ♻️ 优化 loading icon 设置主题颜色逻辑

Browse Source
This commit is contained in:
xiangshu233 2024-02-26 21:35:28 +08:00
parent 3b02172ca2
commit 5351c56aa1
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -9,25 +9,26 @@
<body> <body>
<div id="app"> <div id="app">
<script> <script>
const appDesignSetting = window.localStorage.getItem('DESIGN-SETTING') const designSetting = JSON.parse(
window.localStorage.getItem('DESIGN-SETTING'),
)
;(() => { ;(() => {
let htmlRoot = document.getElementById('htmlRoot') let htmlRoot = document.getElementById('htmlRoot')
let darkMode = let darkMode = designSetting.darkMode
appDesignSetting && JSON.parse(appDesignSetting).darkMode
if (htmlRoot && darkMode) { if (htmlRoot && darkMode) {
htmlRoot.setAttribute('data-theme', darkMode) htmlRoot.setAttribute('data-theme', darkMode)
darkMode = htmlRoot = null darkMode = htmlRoot = null
} else { } else {
htmlRoot.setAttribute('data-theme', 'light') htmlRoot.setAttribute('data-theme', 'light')
} }
})()
document.addEventListener('DOMContentLoaded', (event) => { // 设置主题色变量
const elements = document.querySelectorAll('.dot-spin i') document.documentElement.style.setProperty(
elements.forEach((element) => { '--app-theme-color',
element.style.background = JSON.parse(appDesignSetting).appTheme designSetting.appTheme,
}) )
}) })()
</script> </script>
<style> <style>
body { body {
@ -68,7 +69,7 @@
height: 14px; height: 14px;
position: absolute; position: absolute;
display: block; display: block;
/* background-color: #1890ff; */ background: var(--app-theme-color);
border-radius: 100%; border-radius: 100%;
transform: scale(0.75); transform: scale(0.75);
transform-origin: 50% 50%; transform-origin: 50% 50%;