fix apply theme button without page refresh

This commit is contained in:
Denys Nykula 2023-05-01 20:54:18 +03:00
parent 1f943ce8a5
commit 2a76be56e7
2 changed files with 15 additions and 7 deletions

View file

@ -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;

View file

@ -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')
} }