jselesan/personal-admin-2026
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement theme switching functionality with ThemeProvider and update Header component

Browse Source
This commit is contained in:
Jose Selesan
2026-05-28 16:45:28 -03:00
parent d6808fb595
commit bd5e29236b
4 changed files with 117 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/frontend/index.html
View File

@@ -4,6 +4,14 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Admin</title> <title>Personal Admin</title>
<script>
(function() {
var theme = localStorage.getItem("theme");
if (theme === "dark" || (theme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
}
})();
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

16
apps/frontend/src/components/layout/Header.tsx
View File

@@ -1,6 +1,7 @@
import { Menu } from "lucide-react"; import { Menu, Sun, Moon, Monitor } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useSseStatus } from "@/lib/sse-context"; import { useSseStatus } from "@/lib/sse-context";
import { useTheme } from "@/lib/theme";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
interface HeaderProps { interface HeaderProps {
@@ -9,6 +10,11 @@ interface HeaderProps {
export function Header({ onMenuClick }: HeaderProps) { export function Header({ onMenuClick }: HeaderProps) {
const sseStatus = useSseStatus(); const sseStatus = useSseStatus();
const { theme, cycleTheme } = useTheme();
const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
const themeLabel =
theme === "light" ? "Claro" : theme === "dark" ? "Oscuro" : "Sistema";
return ( return (
<header className="flex h-14 items-center gap-4 border-b px-4"> <header className="flex h-14 items-center gap-4 border-b px-4">
@@ -22,6 +28,14 @@ export function Header({ onMenuClick }: HeaderProps) {
</Button> </Button>
<div className="flex-1" /> <div className="flex-1" />
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<Button
variant="ghost"
size="icon"
onClick={cycleTheme}
title={`Tema: ${themeLabel} (Cmd+D)`}
>
<ThemeIcon className="size-4" />
</Button>
<span <span
className={cn( className={cn(
"size-2 rounded-full", "size-2 rounded-full",

87
apps/frontend/src/lib/theme.tsx Normal file
View File

@@ -0,0 +1,87 @@
import { createContext, useContext, useEffect, useState, useCallback } from "react";
type Theme = "light" | "dark" | "system";
interface ThemeContextValue {
theme: Theme;
resolved: "light" | "dark";
setTheme: (theme: Theme) => void;
cycleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextValue | null>(null);
const STORAGE_KEY = "theme";
const THEME_CYCLE: Theme[] = ["light", "dark", "system"];
function getStoredTheme(): Theme {
if (typeof localStorage === "undefined") return "system";
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === "light" || stored === "dark" || stored === "system") return stored;
return "system";
}
function getSystemTheme(): "light" | "dark" {
if (typeof window === "undefined") return "light";
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function applyThemeClass(resolved: "light" | "dark") {
const root = document.documentElement;
root.classList.toggle("dark", resolved === "dark");
}
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setThemeState] = useState<Theme>(getStoredTheme);
const resolved = theme === "system" ? getSystemTheme() : theme;
const setTheme = useCallback((t: Theme) => {
setThemeState(t);
localStorage.setItem(STORAGE_KEY, t);
}, []);
const cycleTheme = useCallback(() => {
const idx = THEME_CYCLE.indexOf(theme);
setTheme(THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]);
}, [theme, setTheme]);
useEffect(() => {
applyThemeClass(resolved);
}, [resolved]);
useEffect(() => {
if (theme !== "system") return;
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const handler = () => {
applyThemeClass(getSystemTheme());
// force re-render so `resolved` updates
setThemeState("system");
};
mq.addEventListener("change", handler);
return () => mq.removeEventListener("change", handler);
}, [theme]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === "d" && !e.shiftKey && !e.altKey) {
e.preventDefault();
cycleTheme();
}
};
document.addEventListener("keydown", handler);
return () => document.removeEventListener("keydown", handler);
}, [cycleTheme]);
return (
<ThemeContext.Provider value={{ theme, resolved, setTheme, cycleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
return ctx;
}

3
apps/frontend/src/main.tsx
View File

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ThemeProvider } from "@/lib/theme";
import App from "./App"; import App from "./App";
import "./index.css"; import "./index.css";
@@ -17,9 +18,11 @@ const queryClient = new QueryClient({
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<ThemeProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<App /> <App />
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider> </QueryClientProvider>
</ThemeProvider>
</StrictMode>, </StrictMode>,
); );