Blame · theme.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {atom} from 'jotai';
b69ab31	9	import {useCommand} from './ISLShortcuts';
b69ab31	10	import {localStorageBackedAtom, writeAtom} from './jotaiUtils';
b69ab31	11	import platform from './platform';
b69ab31	12	import {registerDisposable} from './utils';
b69ab31	13
b69ab31	14	import 'isl-components/theme/themeDark.css';
b69ab31	15	import 'isl-components/theme/themeLight.css';
b69ab31	16
b69ab31	17	const THEME_LOCAL_STORAGE_KEY = 'isl-color-theme';
b69ab31	18
b69ab31	19	export type ThemeColor = 'dark' \| 'light';
b69ab31	20
b69ab31	21	// local override. `null` means prefer platform theme.
b69ab31	22	const localThemeState = localStorageBackedAtom<ThemeColor \| null>(THEME_LOCAL_STORAGE_KEY, null);
b69ab31	23
b69ab31	24	// platform theme. `null` means not supported.
b69ab31	25	const theme = platform.theme;
b69ab31	26	const platformThemeState = atom<ThemeColor \| undefined>(theme?.getTheme());
b69ab31	27	registerDisposable(
b69ab31	28	platform,
b69ab31	29	theme?.onDidChangeTheme(themeColor => {
b69ab31	30	writeAtom(platformThemeState, themeColor);
b69ab31	31	// reset local theme state so the user can notice the theme change
b69ab31	32	writeAtom(localThemeState, null);
b69ab31	33	theme.getThemeName && writeAtom(themeNameState, theme.getThemeName());
b69ab31	34	}) ?? {dispose: () => null},
b69ab31	35	import.meta.hot,
b69ab31	36	);
b69ab31	37
b69ab31	38	// combined state
b69ab31	39	// - read: nullable local theme -> platform theme -> 'dark'
b69ab31	40	// - write: update local theme
b69ab31	41	export const themeState = atom<ThemeColor, [ThemeColor], void>(
b69ab31	42	get => get(localThemeState) ?? get(platformThemeState) ?? 'dark',
b69ab31	43	(_get, set, themeColor) => set(localThemeState, themeColor),
b69ab31	44	);
b69ab31	45
b69ab31	46	/**
b69ab31	47	* The specific theme name, like "Default Light Modern".
b69ab31	48	* Typically, you'd rather use `themeState` to get simply "light" / "dark".
b69ab31	49	* Theme name is useful for dynamically updating stylex styles for specific themes.
b69ab31	50	*/
b69ab31	51	export const themeNameState = atom<string \| undefined>(theme?.getThemeName?.());
b69ab31	52
b69ab31	53	export function useThemeShortcut() {
b69ab31	54	useCommand('ToggleTheme', () => {
b69ab31	55	if (platform.theme == null) {
b69ab31	56	writeAtom(localThemeState, theme => (theme === 'dark' ? 'light' : 'dark'));
b69ab31	57	}
b69ab31	58	});
b69ab31	59	}