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;
|
margin: 1em 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.presets {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.tab-header {
|
.tab-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
@ -7,14 +7,18 @@ export const applyTheme = (input) => {
|
||||||
const body = document.body
|
const body = document.body
|
||||||
body.classList.add('hidden')
|
body.classList.add('hidden')
|
||||||
|
|
||||||
const styleEl = document.getElementById('theme-holder')
|
/** @type {CSSStyleSheet} */
|
||||||
const styleSheet = styleEl.sheet
|
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')
|
body.classList.remove('hidden')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue