From 4e86455c5d099c62819987a31f2fa32bab6d4496 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Mon, 7 Oct 2024 12:32:27 -0400
Subject: [PATCH] bug/fix os theme switch detection

---
 src/App.tsx                       |  3 +++
 src/components/ImageCard.tsx      |  5 +++--
 src/components/InfinateCanvas.tsx |  5 +++--
 src/components/NoteCard.tsx       |  6 ++++--
 src/utils/isTheme.ts              |  3 ---
 src/utils/useThemeDetector.ts     | 20 ++++++++++++++++++++
 6 files changed, 33 insertions(+), 9 deletions(-)
 delete mode 100644 src/utils/isTheme.ts
 create mode 100644 src/utils/useThemeDetector.ts

diff --git a/src/App.tsx b/src/App.tsx
index 6b7b592..c964f59 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,8 @@
 import InfiniteCanvas from "./components/InfinateCanvas"
+import { useThemeDetector } from "./utils/useThemeDetector"
 
 export function App() {
+  useThemeDetector()
+
   return <InfiniteCanvas />
 }
diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx
index 56b5905..1f750ff 100644
--- a/src/components/ImageCard.tsx
+++ b/src/components/ImageCard.tsx
@@ -4,7 +4,7 @@ import { useDebounce } from "../utils/useDebounce"
 import { LayerEnum } from "../utils/enums"
 import images, { ImageCardType } from "../signals/images"
 import { updateLocalStorage } from "../utils/localStorage"
-import { isTheme } from "../utils/isTheme"
+import { useThemeDetector } from "../utils/useThemeDetector"
 
 namespace ImageCard {
   export interface ImageCardProps {
@@ -121,6 +121,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
 function ExpandIcon({ cb }: {
   cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
 }) {
+  const isDarkTheme = useThemeDetector()
   return (
     <svg
       onmousedown={cb}
@@ -129,7 +130,7 @@ function ExpandIcon({ cb }: {
       height="24"
       viewBox="0 0 24 24"
       fill="none"
-      stroke={isTheme('dark') ? "#777" : "#999"}
+      stroke={isDarkTheme ? "#777" : "#999"}
       stroke-width="1"
       stroke-linecap="round"
       stroke-linejoin="round"
diff --git a/src/components/InfinateCanvas.tsx b/src/components/InfinateCanvas.tsx
index dbfceb2..7d5f1a7 100644
--- a/src/components/InfinateCanvas.tsx
+++ b/src/components/InfinateCanvas.tsx
@@ -6,11 +6,12 @@ import { MiniMap } from "./MiniMap"
 import { ImageCard } from "./ImageCard"
 import images from "../signals/images"
 import { CardSelector } from "./cardSelector/CardSelector"
-import { isTheme } from "../utils/isTheme"
 import { Logo } from "./Logo"
+import { useThemeDetector } from "../utils/useThemeDetector"
 
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
+  const isDarkTheme = useThemeDetector()
 
   useEffect(() => {
     window.scrollTo({
@@ -51,7 +52,7 @@ export default function InfiniteCanvas() {
             width: `${canvasDimentsion.value.width}px`,
             height: `${canvasDimentsion.value.width}px`,
             backgroundSize: "30px 30px",
-            backgroundImage: `radial-gradient(circle, rgba(${isTheme('dark') ? '255, 255, 255, 0.2' : '0, 0, 0, 0.2'}) 1px, transparent 1px)`,
+            backgroundImage: `radial-gradient(circle, rgba(${isDarkTheme ? '255, 255, 255, 0.2' : '0, 0, 0, 0.2'}) 1px, transparent 1px)`,
           }}>
           {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
             const item = NotesSigal.default.notes.value[itemKey]
diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
index 3e254d0..ab019ff 100644
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@@ -3,7 +3,7 @@ import { NotesSigal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import notes, { NoteCardType } from "../signals/notes"
 import { LayerEnum } from "../utils/enums"
-import { isTheme } from "../utils/isTheme"
+import { useThemeDetector } from "../utils/useThemeDetector"
 
 namespace NoteCard {
   export interface NoteCardProps {
@@ -134,6 +134,8 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
 function ExpandIcon({ cb }: {
   cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
 }) {
+  const isDarkTheme = useThemeDetector()
+
   return (
     <svg
       onmousedown={cb}
@@ -142,7 +144,7 @@ function ExpandIcon({ cb }: {
       height="24"
       viewBox="0 0 24 24"
       fill="none"
-      stroke={isTheme('dark') ? "#777" : "#999"}
+      stroke={isDarkTheme ? "#777" : "#999"}
       stroke-width="1"
       stroke-linecap="round"
       stroke-linejoin="round"
diff --git a/src/utils/isTheme.ts b/src/utils/isTheme.ts
deleted file mode 100644
index 0611519..0000000
--- a/src/utils/isTheme.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isTheme(value: "light" | "dark") {
-  return window.matchMedia(`(prefers-color-scheme: ${value})`).matches
-}
diff --git a/src/utils/useThemeDetector.ts b/src/utils/useThemeDetector.ts
new file mode 100644
index 0000000..8c7ae3a
--- /dev/null
+++ b/src/utils/useThemeDetector.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "kaioken"
+
+export function useThemeDetector() {
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(getCurrentTheme())
+  function getCurrentTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+  }
+
+  const mqListener = (e: MediaQueryListEvent) => {
+    setIsDarkTheme(e.matches)
+  }
+
+  useEffect(() => {
+    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)")
+    darkThemeMq.addListener(mqListener)
+    return () => darkThemeMq.removeListener(mqListener)
+  }, [])
+
+  return isDarkTheme
+}