36 lines
908 B
TypeScript
36 lines
908 B
TypeScript
/**
|
|
* Shares the chosen theme with every component. `ThemeProvider` fills this
|
|
* context and `useTheme` reads it.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { createContext } from "react";
|
|
import {
|
|
BASE_STYLE,
|
|
type ColorScheme,
|
|
DEFAULT_COLOR_SCHEME,
|
|
type StyleName,
|
|
} from "../../../shared/theme.ts";
|
|
|
|
/**
|
|
* Provided by `ThemeProvider` to `useTheme`. A setter applies the choice and
|
|
* stores it in this browser, and in the account's settings when signed in.
|
|
*/
|
|
export interface ThemeContextValue {
|
|
style: StyleName;
|
|
colorScheme: ColorScheme;
|
|
setStyle(s: StyleName): void;
|
|
setColorScheme(c: ColorScheme): void;
|
|
}
|
|
|
|
/** The theme's context. Its default is only seen outside `ThemeProvider`. */
|
|
export const ThemeContext: React.Context<ThemeContextValue> = createContext<
|
|
ThemeContextValue
|
|
>({
|
|
style: BASE_STYLE,
|
|
colorScheme: DEFAULT_COLOR_SCHEME,
|
|
setStyle: () => {},
|
|
setColorScheme: () => {},
|
|
});
|