feat: toggle color scheme

kwaa · kwaa · commit a7b2e01328fa · 2025-03-01T19:27:51.000+08:00
diff --git a/app/src/components/environment.tsx b/app/src/components/environment.tsx
@@ -1,12 +1,23 @@
 import { Grid, Stars } from '@react-three/drei'
 import { RigidBody } from '@react-three/rapier'
-import { isDarkMode } from '@react-three/uikit'
 import { colors } from '@react-three/uikit-default'
 import { IfInSessionMode } from '@react-three/xr'
+import { useEffect, useState } from 'react'
+
+import { useIsDarkValue } from '~/hooks/use-is-dark'
 
 export const Environment = () => {
-  // const intensity = isDarkMode.value ? 0.5 : 1
-  const intensity = 1
+  const isDark = useIsDarkValue()
+  const intensity = isDark ? 1 : 1.5
+
+  const [bg, setBg] = useState(colors.background.value)
+  const [fg, setFg] = useState(colors.foreground.value)
+
+  // fix: listen signal update
+  useEffect(() => {
+    setBg(colors.background.value)
+    setFg(colors.foreground.value)
+  }, [isDark])
 
   return (
     <>
@@ -22,7 +33,7 @@ export const Environment = () => {
       </RigidBody>
       <IfInSessionMode deny="immersive-ar">
         <Grid
-          cellColor={colors.foreground.value}
+          cellColor={fg}
           cellSize={1}
           cellThickness={1}
           fadeDistance={50}
@@ -31,8 +42,8 @@ export const Environment = () => {
           position={[0, 0, 0]}
           sectionSize={0}
         />
-        <color args={[colors.background.value]} attach="background" />
-        {isDarkMode.value && <Stars count={99} depth={99} fade />}
+        <color args={[bg]} attach="background" />
+        {isDark && <Stars count={99} depth={99} fade />}
       </IfInSessionMode>
     </>
   )
diff --git a/app/src/components/ui/navbar.tsx b/app/src/components/ui/navbar.tsx
@@ -4,14 +4,21 @@ import {
   Text,
 } from '@react-three/uikit'
 import { Button, Defaults, Input } from '@react-three/uikit-default'
-import { GithubIcon, SettingsIcon } from '@react-three/uikit-lucide'
+import { GithubIcon, MoonIcon, SettingsIcon, SunIcon } from '@react-three/uikit-lucide'
 import { IfInSessionMode, useXRStore } from '@react-three/xr'
 
+import { useIsDarkValue, useToggleIsDark } from '~/hooks/use-is-dark'
 import { useNavigate } from '~/router'
 
+const NavbarThemeIcon = ({ isDark }: { isDark: boolean }) => isDark
+  ? <SunIcon height={16} width={16} />
+  : <MoonIcon height={16} width={16} />
+
 export const Navbar = () => {
   const store = useXRStore()
   const navigate = useNavigate()
+  const isDark = useIsDarkValue()
+  const toggleIsDark = useToggleIsDark()
 
   return (
     <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
@@ -24,7 +31,7 @@ export const Navbar = () => {
           pointerEvents="listener"
         >
           <Container flexDirection="column" gap={8} lg={{ flexDirection: 'row' }}>
-            <Input maxWidth={256} placeholder="Send message..." />
+            <Input marginX="auto" maxWidth={288} placeholder="Send message..." />
             <Container gap={8} justifyContent="center">
               <Button
                 data-test-id="enter-vr"
@@ -49,6 +56,14 @@ export const Navbar = () => {
               >
                 <SettingsIcon height={16} width={16} />
               </Button>
+              <Button
+                data-test-id="toggle-color-scheme"
+                onClick={() => toggleIsDark()}
+                size="icon"
+                variant="secondary"
+              >
+                <NavbarThemeIcon isDark={isDark} />
+              </Button>
               <Button
                 data-test-id="github"
                 onClick={() => window.open('https://github.com/moeru-ai/n3p6', '_blank', 'noopener')}
diff --git a/app/src/hooks/use-is-dark.ts b/app/src/hooks/use-is-dark.ts
@@ -0,0 +1,15 @@
+import { createLocalStorageState } from 'foxact/create-local-storage-state'
+import { useCallback } from 'react'
+
+const [useIsDark, useIsDarkValue] = createLocalStorageState(
+  'n3p6/is-dark',
+  window.matchMedia('(prefers-color-scheme: dark)').matches,
+)
+
+const useToggleIsDark = () => {
+  const [,setIsDark] = useIsDark()
+
+  return useCallback(() => setIsDark(prevIsDark => !prevIsDark), [setIsDark])
+}
+
+export { useIsDark, useIsDarkValue, useToggleIsDark }
diff --git a/app/src/pages/_app.tsx b/app/src/pages/_app.tsx
@@ -1,14 +1,17 @@
 import { Canvas } from '@react-three/fiber'
 import { setPreferredColorScheme } from '@react-three/uikit'
 import { noEvents } from '@react-three/xr'
+import { useEffect } from 'react'
 import { Outlet, useLocation } from 'react-router'
 
-// eslint-disable-next-line @masknet/no-top-level
-setPreferredColorScheme('system')
+import { useIsDarkValue } from '~/hooks/use-is-dark'
 
 const AppLayout = () => {
   const { pathname } = useLocation()
   const events = pathname.includes('settings') ? undefined : noEvents
+  const isDark = useIsDarkValue()
+
+  useEffect(() => setPreferredColorScheme(isDark ? 'dark' : 'light'), [isDark])
 
   return (
     <Canvas
