From 2a76be56e71c3edb0cf37eb87ec9003b100ac33e Mon Sep 17 00:00:00 2001
From: Denys Nykula <vegan@libre.net.ua>
Date: Mon, 1 May 2023 20:54:18 +0300
Subject: [PATCH] fix apply theme button without page refresh

---
 .../tabs/theme_tab/theme_tab.scss              |  4 ++++
 src/services/style_setter/style_setter.js      | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 0427e42f..0016a328 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/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;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9e691261..8954a9ce 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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')
 }