Merge pull request 'fix apply theme button without page refresh' (#309) from denys/akkoma-fe:fix-apply-theme into develop

Reviewed-on: #309

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -89,6 +89,10 @@
     margin: 1em 1em 0;
   }
 
+  .presets {
+    text-align: center;
+  }
+
   .tab-header {
     display: flex;
     justify-content: space-between;

src/services/style_setter/style_setter.js

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