From 8474f4ff818d949e1d989a20eae74afcc64a1dad Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Fri, 12 Aug 2022 21:16:08 -0400
Subject: [PATCH] fix: use native color-mode for dark mode

fixes all of our problems haha
---
 components/ColourPicker.vue | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/components/ColourPicker.vue b/components/ColourPicker.vue
index 3f6e028..757f8db 100644
--- a/components/ColourPicker.vue
+++ b/components/ColourPicker.vue
@@ -1,34 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import IconSun from "@/assets/images/sun.svg?component";
 import IconMoon from "@/assets/images/moon.svg?component";
 
 const colorMode = useColorMode();
 
-const isToggled = ref(colorMode.value === "dark");
-
 const toggle = () => {
-  isToggled.value = !isToggled.value;
-  colorMode.preference = isToggled.value ? "dark" : "light";
+  colorMode.preference = colorMode.value === "light" ? "dark" : "light";
 };
-
-/*
-// it unchecks on refresh and i can't make it automatically
-// check itself
-
-const darkToggleEl: Ref<HTMLInputElement> = ref(null);
-
-onMounted(() => {
-  if (isToggled.value) {
-    darkToggleEl.value.checked = true;
-  }
-});
-*/
 </script>
 
 <template>
-  <label for="dark-toggle" :class="['toggle-wrapper']">
-    <div :class="['toggle', isToggled ? 'enabled' : 'disabled']">
+  <label for="dark-toggle" class="toggle-wrapper">
+    <div class="toggle">
       <div class="icons">
         <IconMoon />
         <IconSun />
@@ -37,7 +20,6 @@ onMounted(() => {
         id="dark-toggle"
         name="dark-toggle"
         type="checkbox"
-        :checked="isToggled"
         ref="darkToggleEl"
         @click="toggle"
       />
@@ -87,7 +69,7 @@ html.dark .toggle-wrapper {
   transition: transform var(--transition), background var(--transition);
 }
 
-.toggle.enabled::before {
+html.dark .toggle::before {
   transform: translateX(calc(var(--scale)));
 }