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 { Theme, ThemeProviderContext } from "@/lib/theme-context"
import { type Theme, ThemeContext } from "@/lib/ThemeContext"
type ThemeProviderProps = {
children: React.ReactNode
@ -61,9 +61,9 @@ export function ThemeProvider({
}
return (
<ThemeProviderContext.Provider {...props} value={value}>
<ThemeContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
</ThemeContext.Provider>
)
}

View File

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