Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
React context for managing the application’s color theme preference
ColorThemeContext provides theme management functionality for the application, allowing users to choose between system, light, or dark color themes.
type ColorTheme = "system" | "light" | "dark";
interface IColorThemeContext {
colorTheme: ColorTheme;
setColorTheme: (colorTheme: ColorTheme) => void;
}
"system", "light", or "dark".ColorThemeContext.Provider is configured in _app.tsx:
import ColorThemeContext from "@/context/colorThemeContext";
import useColorTheme from "@/hooks/useColorTheme";
function MyApp({ Component, pageProps }: AppProps) {
const [colorTheme, setColorTheme] = useColorTheme();
return (
<ColorThemeContext.Provider value={{ colorTheme, setColorTheme }}>
{/* App content */}
</ColorThemeContext.Provider>
);
}
import { useContext } from "react";
import ColorThemeContext from "@/context/colorThemeContext";
function ThemeSwitcher() {
const { colorTheme, setColorTheme } = useContext(ColorThemeContext);
return (
<div>
<button onClick={() => setColorTheme("light")}>Light</button>
<button onClick={() => setColorTheme("dark")}>Dark</button>
<button onClick={() => setColorTheme("system")}>System</button>
<p>Current theme: {colorTheme}</p>
</div>
);
}
function isColorTheme(value?: string | null): value is ColorTheme
import { isColorTheme } from "@/context/colorThemeContext";
const userPref = localStorage.getItem("theme");
if (isColorTheme(userPref)) {
setColorTheme(userPref);
}