default to system color mode

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
+};

src/theme/foundations/index.ts

@@ -1,4 +1,5 @@
 export * from './colors';
+export * from './config';
 export * from './shadows';
 export * from './sizes';
 export * from './textStyles';

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,