From 5f8602b864a07542f90358d2d8d249c983a09c29 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 17 Dec 2024 09:57:17 -0500
Subject: [PATCH] fix: switch to useToggle

---
 web/components/ColorSwitcher.ce.vue | 28 ++++++++--------------------
 web/store/theme.ts                  |  2 +-
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/web/components/ColorSwitcher.ce.vue b/web/components/ColorSwitcher.ce.vue
index f4b00e161..9cef726c4 100644
--- a/web/components/ColorSwitcher.ce.vue
+++ b/web/components/ColorSwitcher.ce.vue
@@ -2,27 +2,17 @@
 import Input from '~/components/shadcn/input/Input.vue';
 import Label from '~/components/shadcn/label/Label.vue';
 import { defaultColors, useThemeStore, type Theme } from '~/store/theme';
+import { useToggle } from '@vueuse/core';
 
 const themeStore = useThemeStore();
 const { darkMode } = toRefs(themeStore);
 
-const setDarkMode = ref<boolean>(false);
-const setGradient = ref<boolean>(false);
-const setDescription = ref<boolean>(true);
-const setBanner = ref<boolean>(true);
 
-const toggleSwitch = (value: boolean) => {
-  setDarkMode.value = value;
-};
-const toggleGradient = (value: boolean) => {
-  setGradient.value = value;
-};
-const toggleDescription = (value: boolean) => {
-  setDescription.value = value;
-};
-const toggleBanner = (value: boolean) => {
-  setBanner.value = value;
-};
+const [setDarkMode, toggleDarkMode] = useToggle(false);
+const [setGradient, toggleGradient] = useToggle(false);
+const [setDescription, toggleDescription] = useToggle(true);
+const [setBanner, toggleBanner] = useToggle(true);
+
 
 const textPrimary = ref<string>('');
 const textSecondary = ref<string>('');
@@ -32,9 +22,7 @@ const textPrimaryToSet = computed(() => {
   if (textPrimary.value) {
     return textPrimary.value;
   }
-  return darkMode.value
-    ? defaultColors.dark['--headerTextPrimary']
-    : defaultColors.light['--headerTextPrimary'];
+  return darkMode.value ? defaultColors.dark['--headerTextPrimary'] : defaultColors.light['--headerTextPrimary'];
 });
 
 const textSecondaryToSet = computed(() => {
@@ -91,7 +79,7 @@ watch(
     <Label for="header-background">Header Background Color</Label>
     <Input id="header-background" v-model="bgColor" />
     <Label for="dark-mode">Dark Mode</Label>
-    <Switch id="dark-mode" :checked="setDarkMode" @update:checked="toggleSwitch" />
+    <Switch id="dark-mode" :checked="setDarkMode" @update:checked="toggleDarkMode" />
     <Label for="gradient">Gradient</Label>
     <Switch id="gradient" :checked="setGradient" @update:checked="toggleGradient" />
     <Label for="description">Description</Label>
diff --git a/web/store/theme.ts b/web/store/theme.ts
index eb69735c3..906c9a89c 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.ts
@@ -83,7 +83,7 @@ export const useThemeStore = defineStore('theme', () => {
 
   const activeColorVariables = ref<ThemeVariables>(defaultColors.light);
   // Getters
-  const darkMode = computed(
+  const darkMode = computed<boolean>(
     () => DARK_THEMES.includes(theme.value?.name as (typeof DARK_THEMES)[number]) ?? false
   );
   // used to swap the UPC text color when using the azure or gray theme