bug/fix os theme switch detection

src/App.tsx

@@ -1,5 +1,8 @@
 import InfiniteCanvas from "./components/InfinateCanvas"
+import { useThemeDetector } from "./utils/useThemeDetector"
 
 export function App() {
+  useThemeDetector()
+
   return <InfiniteCanvas />
 }

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"

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]

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"

src/utils/isTheme.ts

@@ -1,3 +0,0 @@
-export function isTheme(value: "light" | "dark") {
-  return window.matchMedia(`(prefers-color-scheme: ${value})`).matches
-}

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
+}