- {/* Background ambient colorful glow effects */}
-
-
{/* Navigation Header */}
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index cf139f0..304d5d1 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -1,19 +1,12 @@
import React, { useState } from "react"
import { useNavigate, Navigate } from "react-router"
-import { Eye, EyeOff, Lock, Database, ArrowRight, Loader2, AlertCircle, Sparkles, Shield, Cloud } from "lucide-react"
+import { Eye, EyeOff, Lock, Database, ArrowRight, Loader2, AlertCircle } from "lucide-react"
import { useAuth } from "@/features/auth/hooks/useAuth"
import { ApiError } from "@/lib/api-client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card"
+import { ThemeToggle } from "@/components/ThemeToggle"
function getErrorMessage(error: Error | null): string | null {
if (!error) return null
@@ -75,134 +68,104 @@ export default function SignIn() {
}
return (
-
- {/* Background ambient colorful glow effects */}
-
-
-
-
+
+ {/* Theme Toggle in top-right */}
+
+
-
- {/* Logo and Brand Header */}
-
-
-
-
-
-
-
-
-
+
+ {/* Brand & Header */}
+
+
+
-
-
-
- Cloudflare Worker & Drive Bridge
-
-
-
- S3 Drive Storage
+
+ S3 Drive Storage
-
- High-performance management console for Google Drive S3 gateway
+
+ Enter your management password to access the console
{/* Sign In Card */}
-
-
-
-
-
- Sign In to Console
-
-
- Enter your gateway access password to unlock management tools
-
-
-
-
)
diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
new file mode 100644
index 0000000..c83f804
--- /dev/null
+++ b/src/providers/ThemeProvider.tsx
@@ -0,0 +1,105 @@
+import * as React from "react"
+
+export type Theme = "light" | "dark" | "system"
+
+interface ThemeProviderProps {
+ children: React.ReactNode
+ defaultTheme?: Theme
+ storageKey?: string
+}
+
+interface ThemeContextType {
+ theme: Theme
+ resolvedTheme: "light" | "dark"
+ setTheme: (theme: Theme) => void
+ toggleTheme: () => void
+}
+
+const ThemeContext = React.createContext
(undefined)
+
+export function ThemeProvider({
+ children,
+ defaultTheme = "system",
+ storageKey = "s3-drive-ui-theme",
+}: ThemeProviderProps) {
+ const [theme, setThemeState] = React.useState(() => {
+ try {
+ const stored = localStorage.getItem(storageKey) as Theme | null
+ if (stored === "light" || stored === "dark" || stored === "system") {
+ return stored
+ }
+ } catch {
+ // localStorage may be unavailable in some private browsing modes
+ }
+ return defaultTheme
+ })
+
+ const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">(() => {
+ if (theme === "system") {
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+ }
+ return theme
+ })
+
+ React.useEffect(() => {
+ const root = document.documentElement
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+
+ const applyTheme = () => {
+ const currentResolved =
+ theme === "system" ? (mediaQuery.matches ? "dark" : "light") : theme
+
+ setResolvedTheme(currentResolved)
+ root.classList.remove("light", "dark")
+ root.classList.add(currentResolved)
+ root.style.colorScheme = currentResolved
+ }
+
+ applyTheme()
+
+ const listener = () => {
+ if (theme === "system") {
+ applyTheme()
+ }
+ }
+
+ mediaQuery.addEventListener("change", listener)
+ return () => mediaQuery.removeEventListener("change", listener)
+ }, [theme])
+
+ const setTheme = React.useCallback(
+ (newTheme: Theme) => {
+ try {
+ localStorage.setItem(storageKey, newTheme)
+ } catch {
+ // ignore storage write errors
+ }
+ setThemeState(newTheme)
+ },
+ [storageKey]
+ )
+
+ const toggleTheme = React.useCallback(() => {
+ setTheme(resolvedTheme === "dark" ? "light" : "dark")
+ }, [resolvedTheme, setTheme])
+
+ const value = React.useMemo(
+ () => ({
+ theme,
+ resolvedTheme,
+ setTheme,
+ toggleTheme,
+ }),
+ [theme, resolvedTheme, setTheme, toggleTheme]
+ )
+
+ return {children}
+}
+
+export function useTheme(): ThemeContextType {
+ const context = React.useContext(ThemeContext)
+ if (!context) {
+ throw new Error("useTheme must be used within a ThemeProvider")
+ }
+ return context
+}