PRESENTATION

admin/src/lib/ScreenCard.svelte

@@ -3,13 +3,13 @@
   export let header: string | undefined = "";
 </script>
 {#if !header}
-<div class={"dark:bg-gray-800 bg-white rounded-lg mx-8 mt-4 p-8 " + $$props.class}>
+<div class={"dark:bg-gray-800 bg-stone-200 rounded-lg mx-8 mt-4 p-8 " + $$props.class}>
   <slot />
 </div>
 {:else}
 <Heading tag="h2" class="px-8 pt-4 text-gray-900 dark:text-white">{header}</Heading>
 <!-- remember to keep a space after the class string -->
-<div class={"dark:bg-gray-800 bg-white rounded-lg mx-8 mt-4 p-8 " + $$props.class}>
+<div class={"dark:bg-gray-800 bg-stone-200 rounded-lg mx-8 mt-4 p-8 " + $$props.class}>
   <slot />
 </div>
 {/if}

admin/src/lib/scripts/darkMode.ts

@@ -2,23 +2,26 @@ export const toggleDarkMode = () => {
   const root = document.documentElement; // Get the :root element
   if (localStorage.getItem("color-theme")) {
     if (localStorage.getItem("color-theme") === "light") {
-      document.documentElement.classList.add("dark");
+      root.classList.remove("light");
+      root.classList.add("dark");
       root.style.setProperty("color-scheme", "dark");
       localStorage.setItem("color-theme", "dark");
     } else {
-      document.documentElement.classList.remove("dark");
+      root.classList.remove("dark");
+      root.classList.add("light");
       root.style.setProperty("color-scheme", "light");
       localStorage.setItem("color-theme", "light");
     }
 
     // if NOT set via local storage previously
   } else {
-    if (document.documentElement.classList.contains("dark")) {
-      document.documentElement.classList.remove("dark");
+    if (root.classList.contains("dark") || root.style.getPropertyValue("color-scheme") === "dark") {
+      root.classList.remove("dark");
       root.style.setProperty("color-scheme", "light");
+      root.classList.add("light");
       localStorage.setItem("color-theme", "light");
     } else {
-      document.documentElement.classList.add("dark");
+      root.classList.add("dark");
       root.style.setProperty("color-scheme", "dark");
       localStorage.setItem("color-theme", "dark");
     }
@@ -31,14 +34,18 @@ export const initializeDarkMode = () => {
     localStorage.getItem("color-theme") === "dark" ||
     (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
-    document.documentElement.classList.add("dark");
+    root.classList.add("dark");
     root.style.setProperty("color-scheme", "dark");
   } else {
-    document.documentElement.classList.remove("dark");
+    root.classList.remove("dark");
     root.style.setProperty("color-scheme", "light");
   }
 };
 
 export const getIsThemeDark = () => {
-  return document.documentElement.classList.contains("dark");
+  return (
+    localStorage.getItem("color-theme") === "dark" ||
+    document.documentElement.style.getPropertyValue("color-scheme") === "dark" ||
+    document.documentElement.classList.contains("dark")
+  );
 };

admin/src/routes/+layout.svelte

@@ -57,7 +57,7 @@
 {:else}
   <Gate>
     <div class="flex flex-row">
-      <Sidebar />
+      <!-- <Sidebar /> -->
       <main class="flex-1 bg-white dark:bg-primary-900">
         <slot />
       </main>