From 00dc7f232f35c03ee36699b088540e4275851f27 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 18 Oct 2023 07:19:12 +0200
Subject: [PATCH] Improved SCSS variable setting

---
 src/App.vue                   | 10 +---------
 src/shared/colorPreference.ts |  7 -------
 src/stores/colors.ts          |  9 ++++++++-
 3 files changed, 9 insertions(+), 17 deletions(-)
 delete mode 100644 src/shared/colorPreference.ts

diff --git a/src/App.vue b/src/App.vue
index 235f5689..96cc6e4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="d-flex flex-column vh-100">
+  <div id="app" class="d-flex flex-column vh-100" :style="colorStore.cssVars">
     <NavBar />
     <BToaster></BToaster>
     <BodyLayout class="flex-fill overflow-auto" />
@@ -12,7 +12,6 @@ import NavBar from '@/components/layout/NavBar.vue';
 import NavFooter from '@/components/layout/NavFooter.vue';
 import BodyLayout from '@/components/layout/BodyLayout.vue';
 import { setTimezone } from './shared/formatters';
-import { setProfitLossColorsCSS } from './shared/colorPreference';
 import { onMounted, watch } from 'vue';
 import { useSettingsStore } from './stores/settings';
 import { useColorStore } from './stores/colors';
@@ -20,7 +19,6 @@ const settingsStore = useSettingsStore();
 const colorStore = useColorStore();
 onMounted(() => {
   setTimezone(settingsStore.timezone);
-  setProfitLossColorsCSS(colorStore.colorPreference);
   colorStore.updateProfitLossColor();
 });
 watch(
@@ -30,12 +28,6 @@ watch(
     setTimezone(tz);
   },
 );
-watch(
-  () => colorStore.colorPreference,
-  (preference) => {
-    setProfitLossColorsCSS(preference);
-  },
-);
 </script>
 
 <style scoped>
diff --git a/src/shared/colorPreference.ts b/src/shared/colorPreference.ts
deleted file mode 100644
index 4726147f..00000000
--- a/src/shared/colorPreference.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// setProfitLossColorsCSS
-export function setProfitLossColorsCSS(preference: string) {
-  const [colorProfit, colorLoss] =
-    preference === 'greenUp' ? ['#12bb7b', '#ef5350'] : ['#ef5350', '#12bb7b'];
-  document.documentElement.style.setProperty('--color-profit', colorProfit);
-  document.documentElement.style.setProperty('--color-loss', colorLoss);
-}
diff --git a/src/stores/colors.ts b/src/stores/colors.ts
index 2c0dc32d..c142565e 100644
--- a/src/stores/colors.ts
+++ b/src/stores/colors.ts
@@ -18,7 +18,14 @@ export const useColorStore = defineStore('colorStore', {
       colorLoss: '#ef5350',
     };
   },
-  getters: {},
+  getters: {
+    cssVars(state) {
+      return {
+        '--color-profit': state.colorProfit,
+        '--color-loss': state.colorLoss,
+      };
+    },
+  },
   actions: {
     updateProfitLossColor() {
       const [colorUp, colorDown] =