You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/shared/contexts/ColorSchemeContext.tsx

33 lines
864 B
TypeScript

import React, { useContext } from 'react';
import { useStorage } from 'tailchat-shared';
const ColorSchemeContext = React.createContext<{
/**
* 'dark' | 'light' | 'auto' | string
*/
colorScheme: string;
setColorScheme: (colorScheme: string) => void;
}>({
colorScheme: 'dark',
setColorScheme: () => {},
});
ColorSchemeContext.displayName = 'ColorSchemeContext';
export const ColorSchemeContextProvider: React.FC = React.memo((props) => {
const [colorScheme = 'dark', { save: setColorScheme }] = useStorage(
'colorScheme',
'dark'
);
return (
<ColorSchemeContext.Provider value={{ colorScheme, setColorScheme }}>
{props.children}
</ColorSchemeContext.Provider>
);
});
ColorSchemeContextProvider.displayName = 'ColorSchemeContextProvider';
export function useColorScheme() {
return useContext(ColorSchemeContext);
}