save light mode

src/AppState.ts

@@ -1,4 +1,4 @@
-import { inject, type InjectionKey, ref, getCurrentInstance } from "vue";
+import {inject, type InjectionKey, ref, getCurrentInstance, watch} from "vue";
 import { Bound } from "./utils";
 
 export type UITool = 
@@ -12,6 +12,20 @@ class AppStateStore extends Bound {
     unitMouseStart = ref<string | null>(null);
     selectingUnits = ref(false);
     deselectingUnits = ref(false);
+    isDark = ref(false);
+
+    constructor() {
+        super();
+        this.isDark.value = localStorage?.getItem("drum-slayer-theme") === "dark";
+        watch(this.isDark, (newIsDark) => {
+            if (newIsDark) {
+                document.body.classList.add("dark");
+            } else {
+                document.body.classList.remove("dark");
+            }
+            localStorage?.setItem("drum-slayer-theme", newIsDark ? "dark" : "light");
+        }, { immediate: true });
+    }
 }
 
 const AppStateStoreKey = Symbol("AppStateStore") as InjectionKey<AppStateStore>;

src/assets/svgs/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>

src/assets/svgs/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

src/ui/Root/Root.vue

@@ -86,7 +86,7 @@
                       class="quick-access-button"
                       title="Switch theme"
                       @click="toggleTheme">
-                    <icon icon-name="list" color="var(--color-ui-neutral-dark)" />
+                    <icon :icon-name="appStateStore.isDark.value ? 'moon' : 'sun'" color="var(--color-ui-neutral-dark)" />
                   </div>
                 </div>
                 <toolbox class="toolbox" />
@@ -128,10 +128,6 @@
     const currentOrientation = ref<'horizontal' | 'vertical'>('horizontal');
     const sidebarActive = ref(false);
 
-    function toggleTheme() {
-      document.body.classList.toggle("dark");
-    }
-
     const appStateStore = useAppStateStore();
     const beatStore = useBeatStore();    
 

src/ui/Widgets/Icon/icons.ts

@@ -14,6 +14,8 @@ import Delete from "@/assets/svgs/delete.svg";
 import Eye from "@/assets/svgs/eye.svg";
 import EyeOff from "@/assets/svgs/eye-off.svg";
 import PaintBucket from '@/assets/svgs/paint-bucket.svg';
+import Sun from '@/assets/svgs/sun.svg';
+import Moon from '@/assets/svgs/moon.svg';
 
 export const IconUrlMap = {
     arrowClockwise: ArrowClockwise,
@@ -32,6 +34,8 @@ export const IconUrlMap = {
     eye: Eye,
     eyeOff: EyeOff,
     paintBucket: PaintBucket,
+    sun: Sun,
+    moon: Moon,
 } as const;
 
 export type IconName = keyof typeof IconUrlMap;

src/ui/global.css

@@ -29,7 +29,10 @@ html, body {
     --color-box-hover-dark-border: #5f5f5f;
     --color-box: #e0e0e0;
     --color-box-hover: #f1f1f1;
+}
 
+* {
+    transition: color,background-color ease-out 300ms;
 }
 
 body.dark {
@@ -50,8 +53,12 @@ body.dark {
     --color-p-dark-active: #464646;
     --color-title-light: #fafafa;
     --color-title-dark: #282828;
-    --color-box: #464646;
-    --color-box-hover: #5f5f5f;
+}
+
+html, body {
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 #dropdowns {