1 files changed, 3 insertions, 39 deletions
diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
index 8f958a3e..f6699312 100644
--- a/src/pages/popup_src/App.svelte
+++ b/src/pages/popup_src/App.svelte
@@ -38,48 +38,12 @@
   let _page
   page.subscribe(val => (_page = val))
 
-  const dark = {
-    text: "#fff",
-    bgMain: "#121212",
-    bgSecondary: "#202020",
-    active: "#fbc117",
-    danger: "#f04141",
-    lightGrey: "#c3c3c3",
-  }
-  const light = {
-    text: "black",
-    bgMain: "white",
-    bgSecondary: "#e4e4e4",
-    active: "#fb9817",
-    danger: "#f04141",
-    lightGrey: "#c3c3c3",
-  }
-  let cssVariables
-  $: if (_options) {
-    if (_options.theme == "dark") {
-      cssVariables = dark
-    } else if (_options.theme == "light") {
-      cssVariables = light
-    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      cssVariables = dark
-    } else {
-      cssVariables = light
-    }
-  }
+  let style
+  $: if (_options) style = utils.style(_options, window)
 </script>
 
 {#if _options && _config}
-  <div
-    class="main"
-    dir="auto"
-    style="
-    --text: {cssVariables.text};
-    --bg-main: {cssVariables.bgMain};
-    --bg-secondary: {cssVariables.bgSecondary};
-    --active: {cssVariables.active};
-    --danger: {cssVariables.danger};
-    --light-grey: {cssVariables.lightGrey};"
-  >
+  <div class="main" dir="auto" {style}>
     <Buttons />
   </div>
 {:else}