Add browser level dark color scheme
This commit is contained in:
parent
b6d94ecdc4
commit
c6e8688dc0
|
@ -30,12 +30,23 @@
|
||||||
* POSSIBILITY OF SUCH DAMAGE.
|
* POSSIBILITY OF SUCH DAMAGE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { extendTheme, type ThemeConfig } from '@chakra-ui/react';
|
import { extendTheme, type Theme, type ThemeConfig } from '@chakra-ui/react';
|
||||||
|
|
||||||
const config: ThemeConfig = {
|
const config: ThemeConfig = {
|
||||||
initialColorMode: 'system',
|
initialColorMode: 'system',
|
||||||
};
|
};
|
||||||
|
|
||||||
const theme = extendTheme({ config });
|
const styles: Theme['styles'] = {
|
||||||
|
global: (props) => ({
|
||||||
|
':root': {
|
||||||
|
colorScheme: props.colorMode,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
const theme = extendTheme({
|
||||||
|
config,
|
||||||
|
styles,
|
||||||
|
});
|
||||||
|
|
||||||
export default theme;
|
export default theme;
|
||||||
|
|
Loading…
Reference in New Issue