useTheme (contexts/ThemeContext.tsx)

Backlog.md · src/web/contexts/ThemeContext.tsx · typescript · MIT
ui

React context hook for managing light/dark theme with persistence and system preference detection.

// Source: https://github.com/MrLesk/Backlog.md | License: MIT | Copyright 2025 Backlog.md
// Provided via justclaw.it.com; keep this notice with the code.
import React, { createContext, useContext, useEffect, useState } from 'react';

type Theme = 'light' | 'dark';

interface ThemeContextType {
	theme: Theme;
	toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const useTheme = () => {
	const context = useContext(ThemeContext);
	if (context === undefined) {
		throw new Error('useTheme must be used within a ThemeProvider');
	}
	return context;
};

interface ThemeProviderProps {
	children: React.ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
	const [theme, setTheme] = useState<Theme>((

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key