Improved SCSS variable setting

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>

src/shared/colorPreference.ts

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

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] =