mirror of https://github.com/msgbyte/tailchat
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.
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import React, { PropsWithChildren, useContext, useEffect } from 'react';
|
|
import { parseColorScheme } from '../utils/color-scheme-helper';
|
|
import { sharedEvent } from '../event';
|
|
import { useStorage } from '../manager/storage';
|
|
|
|
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<PropsWithChildren> =
|
|
React.memo((props) => {
|
|
const [colorScheme = 'dark', { save: setColorScheme }] = useStorage(
|
|
'colorScheme',
|
|
'dark'
|
|
);
|
|
|
|
useEffect(() => {
|
|
sharedEvent.emit('loadColorScheme', colorScheme);
|
|
}, [colorScheme]);
|
|
|
|
return (
|
|
<ColorSchemeContext.Provider value={{ colorScheme, setColorScheme }}>
|
|
{props.children}
|
|
</ColorSchemeContext.Provider>
|
|
);
|
|
});
|
|
ColorSchemeContextProvider.displayName = 'ColorSchemeContextProvider';
|
|
|
|
export function useColorScheme() {
|
|
const { colorScheme, setColorScheme } = useContext(ColorSchemeContext);
|
|
const { isDarkMode, extraSchemeName } = parseColorScheme(colorScheme);
|
|
|
|
return { colorScheme, setColorScheme, isDarkMode, extraSchemeName };
|
|
}
|