mirror of
https://gitlab.com/soapbox-pub/mkstack.git
synced 2025-08-26 20:49:22 +00:00
ThemeProvider nitpicks
This commit is contained in:
parent
7c5fe75572
commit
738b512d9c
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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
15
src/lib/ThemeContext.ts
Normal 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);
|
@ -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);
|
Loading…
x
Reference in New Issue
Block a user