e6eedefec4
Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade
29 lines
913 B
TypeScript
29 lines
913 B
TypeScript
import { createContext, useContext } from 'react';
|
|
import { MantineTheme } from '@mantine/core';
|
|
|
|
type colorThemeContextType = {
|
|
primaryColor: MantineTheme['primaryColor'];
|
|
secondaryColor: MantineTheme['primaryColor'];
|
|
primaryShade: MantineTheme['primaryShade'];
|
|
setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
|
|
setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
|
|
setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
|
|
};
|
|
|
|
export const ColorTheme = createContext<colorThemeContextType>({
|
|
primaryColor: 'red',
|
|
secondaryColor: 'orange',
|
|
primaryShade: 6,
|
|
setPrimaryColor: () => {},
|
|
setSecondaryColor: () => {},
|
|
setPrimaryShade: () => {},
|
|
});
|
|
|
|
export function useColorTheme() {
|
|
const context = useContext(ColorTheme);
|
|
if (context === undefined) {
|
|
throw new Error('useColorTheme must be used within a ColorTheme.Provider');
|
|
}
|
|
return context;
|
|
}
|