feat(web): global day/night toggle via an inverse-colour overlay

Xinze-Li-Moqian · Xinze-Li-Moqian · commit 3975c2fbb3e2 · 2026-06-26T23:36:01.000-04:00
Light mode applies filter: invert(1) hue-rotate(180deg) to &lt;html&gt; (re-inverting
real media), toggled by a sun/moon button in the navbar and the editor header,
persisted to localStorage with an anti-flash inline script in the layout.
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -10,6 +10,17 @@ html, body {
   overflow: hidden;
 }
 
+/* Light mode: a global inverse-colour overlay. Invert the whole UI, then
+ * re-invert real media so photos/diagrams keep their true colours. */
+html.light {
+  filter: invert(1) hue-rotate(180deg);
+}
+html.light img,
+html.light video,
+html.light .no-invert {
+  filter: invert(1) hue-rotate(180deg);
+}
+
 /* ============================================
  * Astrolabe Color System CSS Variables
  * Synchronized with src/lib/colors.ts
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -18,6 +18,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="h-full overflow-hidden">
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "try{if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light')}catch(e){}",
+          }}
+        />
+      </head>
       <body className="h-full overflow-hidden">{children}</body>
     </html>
   );
diff --git a/web/src/app/local/edit/page.tsx b/web/src/app/local/edit/page.tsx
@@ -4,6 +4,7 @@ import '@/lib/errorSuppression'
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react'
 import { Bars3BottomLeftIcon, MinusIcon, PlusIcon, HomeIcon } from '@heroicons/react/24/outline'
 import { API_BASE } from '@/lib/apiBase'
+import { ThemeToggle } from '@/components/ThemeToggle'
 import { useViewStore } from '@/stores/viewStore'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels'
@@ -84,6 +85,7 @@ function EditorPage() {
                     <button onClick={() => useViewStore.getState().increaseFontSize()} className="p-1 text-white/30 hover:text-white/70 transition-colors rounded hover:bg-white/5" title="Increase font size">
                         <PlusIcon className="w-3 h-3" />
                     </button>
+                    <ThemeToggle className="p-1 ml-1 text-white/30 hover:text-white/70 transition-colors rounded hover:bg-white/5" />
                 </div>
             </div>
 
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { ThemeToggle } from './ThemeToggle'
 
 /** Top navigation bar — gives the site a normal-website feel. */
 export function Navbar() {
@@ -25,6 +26,7 @@ export function Navbar() {
         >
           GitHub
         </a>
+        <ThemeToggle className="hover:text-white/75 transition-colors" />
       </div>
     </nav>
   )
diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'
+
+/** Global day/night toggle. Light mode is a CSS inverse-colour overlay applied to
+ *  <html> (see globals.css); the choice is persisted to localStorage. */
+export function ThemeToggle({ className }: { className?: string }) {
+  const [light, setLight] = useState(false)
+
+  useEffect(() => {
+    setLight(document.documentElement.classList.contains('light'))
+  }, [])
+
+  const toggle = () => {
+    const next = !document.documentElement.classList.contains('light')
+    document.documentElement.classList.toggle('light', next)
+    try { localStorage.setItem('theme', next ? 'light' : 'dark') } catch { /* ignore */ }
+    setLight(next)
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      title={light ? 'Switch to dark mode' : 'Switch to light mode'}
+      className={className ?? 'hover:text-white/75 transition-colors'}
+    >
+      {light ? <MoonIcon className="w-4 h-4" /> : <SunIcon className="w-4 h-4" />}
+    </button>
+  )
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import Link from 'next/link'`
	`2`	`+import { ThemeToggle } from './ThemeToggle'`
`2`	`3`
`3`	`4`	`/** Top navigation bar — gives the site a normal-website feel. */`
`4`	`5`	`export function Navbar() {`
`@@ -25,6 +26,7 @@ export function Navbar() {`
`25`	`26`	`>`
`26`	`27`	`GitHub`
`27`	`28`	`</a>`
	`29`	`+ <ThemeToggle className="hover:text-white/75 transition-colors" />`
`28`	`30`	`</div>`
`29`	`31`	`</nav>`
`30`	`32`	`)`