From 629ed7c8853a2b6fabb0fffb8de18a2d8f748921 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 16 Nov 2022 22:44:20 -0800 Subject: [PATCH] default to system color mode --- src/theme/foundations/config.ts | 12 ++++++++++++ src/theme/foundations/index.ts | 1 + src/theme/index.ts | 3 ++- 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/theme/foundations/config.ts diff --git a/src/theme/foundations/config.ts b/src/theme/foundations/config.ts new file mode 100644 index 0000000000..c02702847e --- /dev/null +++ b/src/theme/foundations/config.ts @@ -0,0 +1,12 @@ +import { type ThemeConfig } from '@chakra-ui/react'; +/** + * https://chakra-ui.com/docs/styled-system/color-mode + * initialColorMode: 'system' —— Will default to users system color mode + * useSystemColorMode=true —— Color mode will change if user changes their system color mode + * Can be overridden with toggle on site and will persist after refresh + * Choice is stored/managed with local storage + */ +export const config: ThemeConfig = { + initialColorMode: 'system', + useSystemColorMode: true +}; diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts index b18404055e..fce166179d 100644 --- a/src/theme/foundations/index.ts +++ b/src/theme/foundations/index.ts @@ -1,4 +1,5 @@ export * from './colors'; +export * from './config'; export * from './shadows'; export * from './sizes'; export * from './textStyles'; diff --git a/src/theme/index.ts b/src/theme/index.ts index 04d88facfd..6edc778471 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,9 +1,10 @@ import { extendTheme } from '@chakra-ui/react'; -import { colors, shadows, sizes, textStyles } from './foundations'; +import { config, colors, shadows, sizes, textStyles } from './foundations'; import { Button, Link } from './components'; const overrides = { + config, colors, components: { Button,