khollise/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add dark theme

Browse source
This commit is contained in:
Nathan Lamy 2025-07-30 13:16:55 +02:00
parent 9ea54ed90f
commit ea585bd748
3 changed files with 104 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
app/components/theme-provider.tsx Normal file
View file

@ -0,0 +1,100 @@
import { createContext, useContext, useEffect, useState } from "react";
type Theme = "dark" | "light" | "system";
type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
const isLocalStorageAvailable = () => {
return (
typeof window !== "undefined" &&
typeof window.localStorage !== "undefined" &&
window.localStorage !== null
);
};
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "vite-ui-theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(() => {
if (isLocalStorageAvailable()) {
const storedTheme = localStorage.getItem(storageKey) as Theme;
return storedTheme || defaultTheme;
}
return defaultTheme;
});
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme]);
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider");
return context;
};
export const useDisplayedTheme = () => {
const { theme, setTheme } = useTheme();
if (theme === "system") {
return {
theme: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light",
setTheme,
};
}
return { theme, setTheme };
};

6
app/components/user-dropdown.tsx
View file

@ -17,15 +17,13 @@ import {
Settings, Settings,
Sun, Sun,
} from "lucide-react"; } from "lucide-react";
// TODO: THEME import { useDisplayedTheme } from "~/components/theme-provider";
// import { useTheme } from "~/components/ui/theme-provider";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { logout, type User } from "~/lib/api"; import { logout, type User } from "~/lib/api";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
export default function UserDropdown({ user }: { user: User }) { export default function UserDropdown({ user }: { user: User }) {
// TODO: const { theme, setTheme } = useTheme(); const { theme, setTheme } = useDisplayedTheme();
const [theme, setTheme] = useState("light");
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();

3
app/root.tsx
View file

@ -12,6 +12,7 @@ import "./app.css";
import { QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
import queryClient from "~/lib/client"; import queryClient from "~/lib/client";
import Toaster from "~/components/ui/sonner"; import Toaster from "~/components/ui/sonner";
import { ThemeProvider } from "./components/theme-provider";
export const links: Route.LinksFunction = () => [ export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "preconnect", href: "https://fonts.googleapis.com" },
@ -51,7 +52,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
</head> </head>
<body> <body>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
{children} <ThemeProvider>{children}</ThemeProvider>
</QueryClientProvider> </QueryClientProvider>
<Toaster /> <Toaster />
<ScrollRestoration /> <ScrollRestoration />