From f6203263e415037ecf076884db1952edd0ba8b90 Mon Sep 17 00:00:00 2001
From: Nezumi-2711 <phanhuuloi15@gmail.com>
Date: Thu, 3 Sep 2026 16:12:19 +0700
Subject: [PATCH] feat: add button for toggle theme

---
 index.html                              | 20 +++++++++
 src/client/components/AppHeader.tsx     |  3 ++
 src/client/components/ThemeToggle.tsx   | 38 +++++++++++++++++
 src/client/lib/theme.ts                 | 55 +++++++++++++++++++++++++
 src/client/main.tsx                     |  3 ++
 src/client/pages/IncidentDetailPage.tsx | 10 +++--
 src/client/pages/LoginPage.tsx          |  2 +
 src/client/pages/StatusPage.tsx         | 20 +++++----
 src/client/styles.css                   | 12 ++++++
 9 files changed, 152 insertions(+), 11 deletions(-)
 create mode 100644 src/client/components/ThemeToggle.tsx
 create mode 100644 src/client/lib/theme.ts

diff --git a/index.html b/index.html
index 82da4f6..bef7e75 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,27 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="description" content="Upwatch — fast, dependable uptime monitoring from Cloudflare's edge." />
 		<meta name="robots" content="noindex,nofollow" />
+		<meta name="color-scheme" content="light dark" />
 		<meta name="theme-color" content="#ffffff" />
+		<script>
+			(() => {
+				try {
+					const storedTheme = localStorage.getItem('upwatch-theme');
+					const theme =
+						storedTheme === 'light' || storedTheme === 'dark'
+							? storedTheme
+							: matchMedia('(prefers-color-scheme: dark)').matches
+								? 'dark'
+								: 'light';
+					const root = document.documentElement;
+					root.classList.toggle('dark', theme === 'dark');
+					root.style.colorScheme = theme;
+					document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme === 'dark' ? '#171717' : '#ffffff');
+				} catch {
+					// Keep the default light theme when browser storage is unavailable.
+				}
+			})();
+		</script>
 		<link rel="icon" href="/favicon.ico" sizes="32x32" />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
diff --git a/src/client/components/AppHeader.tsx b/src/client/components/AppHeader.tsx
index dc968b3..d5ae80a 100644
--- a/src/client/components/AppHeader.tsx
+++ b/src/client/components/AppHeader.tsx
@@ -2,6 +2,7 @@ import { Activity, LogOut, Menu, Settings, Zap, type LucideIcon } from 'lucide-r
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { ThemeToggle } from './ThemeToggle';
 import { navigate, usePathname } from '../lib/router';
 import { useLogoutMutation } from '../queries/auth';
 
@@ -54,6 +55,7 @@ export function AppHeader({ context }: { context?: string }) {
 				<TooltipProvider>
 					<nav className="nav-actions" aria-label="Primary navigation">
 						{context && <span className="header-context">{context}</span>}
+						<ThemeToggle className="app-nav-icon" />
 						{items.map((item) => {
 							const ItemIcon = item.icon;
 							const isCurrent = item.href === pathname;
@@ -97,6 +99,7 @@ export function AppHeader({ context }: { context?: string }) {
 								{context && <SheetDescription>{context}</SheetDescription>}
 							</SheetHeader>
 							<nav className="app-nav-mobile" aria-label="Primary navigation">
+								<ThemeToggle className="app-nav-mobile-item" showLabel />
 								{items.map((item) => {
 									const ItemIcon = item.icon;
 									const isCurrent = item.href === pathname;
diff --git a/src/client/components/ThemeToggle.tsx b/src/client/components/ThemeToggle.tsx
new file mode 100644
index 0000000..3ccceed
--- /dev/null
+++ b/src/client/components/ThemeToggle.tsx
@@ -0,0 +1,38 @@
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useTheme } from '../lib/theme';
+
+type ThemeToggleProps = {
+	className?: string;
+	showLabel?: boolean;
+};
+
+export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
+	const { theme, toggleTheme } = useTheme();
+	const isDark = theme === 'dark';
+	const label = isDark ? 'Switch to light mode' : 'Switch to dark mode';
+	const Icon = isDark ? Sun : Moon;
+
+	if (showLabel) {
+		return (
+			<Button variant="unstyled" className={className} type="button" onClick={toggleTheme} aria-label={label}>
+				<Icon aria-hidden="true" />
+				<span>{label}</span>
+			</Button>
+		);
+	}
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button variant="ghost" size="icon" className={className} type="button" onClick={toggleTheme} aria-label={label}>
+						<Icon aria-hidden="true" />
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent sideOffset={6}>{label}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+}
diff --git a/src/client/lib/theme.ts b/src/client/lib/theme.ts
new file mode 100644
index 0000000..be79f8e
--- /dev/null
+++ b/src/client/lib/theme.ts
@@ -0,0 +1,55 @@
+import { useSyncExternalStore } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+const THEME_STORAGE_KEY = 'upwatch-theme';
+const listeners = new Set<() => void>();
+let currentTheme: Theme = 'light';
+
+function getPreferredTheme(): Theme {
+	try {
+		const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+		if (storedTheme === 'light' || storedTheme === 'dark') return storedTheme;
+	} catch {
+		// Storage can be unavailable in privacy or sandboxed contexts.
+	}
+
+	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function applyTheme(theme: Theme) {
+	document.documentElement.classList.toggle('dark', theme === 'dark');
+	document.documentElement.style.colorScheme = theme;
+	document.querySelector<HTMLMetaElement>('meta[name="theme-color"]')?.setAttribute('content', theme === 'dark' ? '#171717' : '#ffffff');
+}
+
+export function initializeTheme() {
+	currentTheme = getPreferredTheme();
+	applyTheme(currentTheme);
+}
+
+function subscribe(listener: () => void) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function getThemeSnapshot() {
+	return currentTheme;
+}
+
+export function useTheme() {
+	const theme = useSyncExternalStore(subscribe, getThemeSnapshot, () => 'light');
+	function toggleTheme() {
+		const nextTheme = theme === 'dark' ? 'light' : 'dark';
+		currentTheme = nextTheme;
+		applyTheme(nextTheme);
+		listeners.forEach((listener) => listener());
+		try {
+			window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
+		} catch {
+			// The active theme still works for this page when persistence is unavailable.
+		}
+	}
+
+	return { theme, toggleTheme };
+}
diff --git a/src/client/main.tsx b/src/client/main.tsx
index 8099f62..d44f2e6 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -3,6 +3,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import { queryClient } from './lib/query-client';
+import { initializeTheme } from './lib/theme';
 import './styles.css';
 
 const root = document.getElementById('root');
@@ -11,6 +12,8 @@ if (!root) {
 	throw new Error('Root element was not found');
 }
 
+initializeTheme();
+
 createRoot(root).render(
 	<StrictMode>
 		<QueryClientProvider client={queryClient}>
diff --git a/src/client/pages/IncidentDetailPage.tsx b/src/client/pages/IncidentDetailPage.tsx
index f22039e..e65bd1d 100644
--- a/src/client/pages/IncidentDetailPage.tsx
+++ b/src/client/pages/IncidentDetailPage.tsx
@@ -2,6 +2,7 @@ import { ArrowLeft, TriangleAlert, Zap } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { IncidentTimeline } from '../components/IncidentTimeline';
+import { ThemeToggle } from '../components/ThemeToggle';
 import { navigate } from '../lib/router';
 import { useSeo } from '../lib/seo';
 import { usePublicIncidentQuery } from '../queries/status';
@@ -32,9 +33,12 @@ export function IncidentDetailPage({ id }: { id: number }) {
 					<a className="brand" href="/" aria-label="Upwatch public status">
 						<Zap className="brand-mark" fill="currentColor" /> <span>upwatch</span>
 					</a>
-					<Button variant="unstyled" className="status-header-action" onClick={() => navigate('/')}>
-						Status page
-					</Button>
+					<div className="status-header-actions">
+						<ThemeToggle className="app-nav-icon" />
+						<Button variant="unstyled" className="status-header-action" onClick={() => navigate('/')}>
+							Status page
+						</Button>
+					</div>
 				</div>
 			</header>
 			<main className="status-main incident-detail-page">
diff --git a/src/client/pages/LoginPage.tsx b/src/client/pages/LoginPage.tsx
index b5e6341..939b8fb 100644
--- a/src/client/pages/LoginPage.tsx
+++ b/src/client/pages/LoginPage.tsx
@@ -3,6 +3,7 @@ import { Zap } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { ThemeToggle } from '../components/ThemeToggle';
 import { navigate } from '../lib/router';
 import { useSeo } from '../lib/seo';
 import { useLoginMutation, useSessionQuery } from '../queries/auth';
@@ -26,6 +27,7 @@ export function LoginPage() {
 
 	return (
 		<main className="auth-page">
+			<ThemeToggle className="auth-theme-toggle app-nav-icon" />
 			<div className="auth-brand" aria-label="Upwatch">
 				<Zap className="auth-brand-mark" fill="currentColor" />
 				<span>upwatch</span>
diff --git a/src/client/pages/StatusPage.tsx b/src/client/pages/StatusPage.tsx
index 2385f42..3c3a244 100644
--- a/src/client/pages/StatusPage.tsx
+++ b/src/client/pages/StatusPage.tsx
@@ -6,6 +6,7 @@ import { Empty, EmptyContent, EmptyDescription, EmptyMedia, EmptyTitle } from '@
 import type { PublicOverallStatus, PublicServiceStatus } from '../api/status';
 import { SiteIcon } from '../components/SiteIcon';
 import { StatusHistoryBar } from '../components/StatusHistoryBar';
+import { ThemeToggle } from '../components/ThemeToggle';
 import { formatDate, formatDuration } from '../lib/format';
 import { navigate } from '../lib/router';
 import { useSeo } from '../lib/seo';
@@ -96,14 +97,17 @@ export function StatusPage() {
 						<Zap className="brand-mark" fill="currentColor" />
 						<span>upwatch</span>
 					</a>
-					<Button
-						variant="unstyled"
-						className="status-header-action"
-						type="button"
-						onClick={() => navigate(sessionQuery.data?.authenticated ? '/dashboard' : '/login')}
-					>
-						{sessionQuery.data?.authenticated ? 'Dashboard' : 'Sign in'}
-					</Button>
+					<div className="status-header-actions">
+						<ThemeToggle className="app-nav-icon" />
+						<Button
+							variant="unstyled"
+							className="status-header-action"
+							type="button"
+							onClick={() => navigate(sessionQuery.data?.authenticated ? '/dashboard' : '/login')}
+						>
+							{sessionQuery.data?.authenticated ? 'Dashboard' : 'Sign in'}
+						</Button>
+					</div>
 				</div>
 			</header>
 
diff --git a/src/client/styles.css b/src/client/styles.css
index 371331d..4b15738 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -873,6 +873,7 @@ button {
 }
 
 .auth-page {
+	position: relative;
 	display: grid;
 	grid-template-rows: auto 1fr auto;
 	justify-items: center;
@@ -880,6 +881,12 @@ button {
 	padding: 32px 24px 24px;
 	background: radial-gradient(circle at 50% 38%, rgb(62 207 142 / 0.08), transparent 34%), linear-gradient(#fff, #fcfcfc);
 }
+.auth-theme-toggle {
+	position: absolute;
+	z-index: 1;
+	top: 28px;
+	right: 28px;
+}
 .auth-page::before {
 	position: fixed;
 	inset: 0;
@@ -2102,6 +2109,11 @@ button {
 .status-header-inner {
 	width: min(960px, calc(100% - 48px));
 }
+.status-header-actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
 .status-header-action {
 	min-height: 34px;
 	padding: 6px 13px;