From 7be7c0e8dd5535d1ab9685f4e0d7f56a98a824cf Mon Sep 17 00:00:00 2001
From: Matt Ferraro <MattFerraro@users.noreply.github.com>
Date: Fri, 14 Jun 2024 15:06:48 -0400
Subject: [PATCH] fix toggle behavior and tweak Gizmo

---
 applications/web/src/components/AppBar.svelte               | 6 +++++-
 applications/web/src/components/ToolBar.svelte              | 2 +-
 .../web/src/components/controls/CubeGizmo/CubeGizmo.svelte  | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/applications/web/src/components/AppBar.svelte b/applications/web/src/components/AppBar.svelte
index 003a1a9a..c04fd408 100644
--- a/applications/web/src/components/AppBar.svelte
+++ b/applications/web/src/components/AppBar.svelte
@@ -22,6 +22,8 @@
 
   export let newFileContent: string | null = null
 
+  let isDarkMode = localStorage.getItem("theme") === "dark"
+
   $: project,
     (() => {
       // log("[project]", project)
@@ -120,13 +122,15 @@
         if (localStorage.getItem("theme") === "light") {
           document.documentElement.classList.add("dark")
           localStorage.setItem("theme", "dark")
+          isDarkMode = true
         } else {
           document.documentElement.classList.remove("dark")
           localStorage.setItem("theme", "light")
+          isDarkMode = false
         }
       }}
     >
-      {#if document.documentElement.classList.contains("dark")}
+      {#if isDarkMode}
         <Moon class="h-6 w-6" />
       {:else}
         <Sun class="h-6 w-6" />
diff --git a/applications/web/src/components/ToolBar.svelte b/applications/web/src/components/ToolBar.svelte
index 16be22d1..0d195ff3 100644
--- a/applications/web/src/components/ToolBar.svelte
+++ b/applications/web/src/components/ToolBar.svelte
@@ -50,7 +50,7 @@
     {/each}
   {:else}
     {#each actions as action}
-      <button class="inline-flex items-center {action.text === 'Solve' && solving ? 'bg-gray-400' : ''} hover:bg-gray-200 p-1" on:click={action.handler}>
+      <button class="inline-flex items-center hover:bg-gray-200 p-1 rounded dark:hover:bg-gray-600 dark:hover:text-gray-300" on:click={action.handler}>
         <img class="h-8 w-8" src={action.src} alt={action.alt} />{action.text ? action.text : ""}
       </button>
     {/each}
diff --git a/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte b/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte
index 2e878789..e2c5574b 100644
--- a/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte
+++ b/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte
@@ -45,7 +45,7 @@
 
   const origin = new Vector3(0, 0, 0)
   const textureSize = 64
-  const gray = 0xdde6ed
+  const gray = 0xa1a8ad
   const black = 0x000000
 
   const {autoRenderTask, renderer, camera, invalidate} = useThrelte()