ThemeProvider nitpicks

This commit is contained in:
Alex Gleason 2025-06-01 09:37:49 -05:00
parent 7c5fe75572
commit 738b512d9c
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 26 additions and 24 deletions

View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Theme, ThemeProviderContext } from "@/lib/theme-context" import { type Theme, ThemeContext } from "@/lib/ThemeContext"
type ThemeProviderProps = { type ThemeProviderProps = {
children: React.ReactNode children: React.ReactNode
@ -61,9 +61,9 @@ export function ThemeProvider({
} }
return ( return (
<ThemeProviderContext.Provider {...props} value={value}> <ThemeContext.Provider {...props} value={value}>
{children} {children}
</ThemeProviderContext.Provider> </ThemeContext.Provider>
) )
} }

View File

@ -1,11 +1,13 @@
import { useContext } from "react" import { useContext } from "react"
import { ThemeProviderContext } from "@/lib/theme-context" import { ThemeContext, type ThemeContextType } from "@/lib/ThemeContext"
export const useTheme = () => { /** Hook to get and set the active theme. */
const context = useContext(ThemeProviderContext) export function useTheme(): ThemeContextType {
const context = useContext(ThemeContext);
if (context === undefined) if (!context) {
throw new Error("useTheme must be used within a ThemeProvider") throw new Error("useTheme must be used within a ThemeProvider");
}
return context return context;
} }

15
src/lib/ThemeContext.ts Normal file
View File

@ -0,0 +1,15 @@
import { createContext } from "react";
export type Theme = "dark" | "light" | "system";
export type ThemeContextType = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeContextType = {
theme: "system",
setTheme: () => undefined,
};
export const ThemeContext = createContext<ThemeContextType>(initialState);

View File

@ -1,15 +0,0 @@
import { createContext } from "react";
export type Theme = "dark" | "light" | "system";
export type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);