fix apply theme button without page refresh
This commit is contained in:
parent
1f943ce8a5
commit
2a76be56e7
2 changed files with 15 additions and 7 deletions
|
@ -89,6 +89,10 @@
|
|||
margin: 1em 1em 0;
|
||||
}
|
||||
|
||||
.presets {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -7,14 +7,18 @@ export const applyTheme = (input) => {
|
|||
const body = document.body
|
||||
body.classList.add('hidden')
|
||||
|
||||
const styleEl = document.getElementById('theme-holder')
|
||||
const styleSheet = styleEl.sheet
|
||||
/** @type {CSSStyleSheet} */
|
||||
const styleSheet = document.getElementById('theme-holder').sheet
|
||||
|
||||
for (let i = styleSheet.cssRules.length; i--; ) {
|
||||
styleSheet.deleteRule(0)
|
||||
}
|
||||
|
||||
styleSheet.insertRule(
|
||||
`:root { ${rules.radii}; ${rules.colors}; ${rules.shadows}; ${rules.fonts}; }`,
|
||||
0
|
||||
)
|
||||
|
||||
styleSheet.toString()
|
||||
styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
|
||||
styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
|
||||
styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
|
||||
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
|
||||
body.classList.remove('hidden')
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue