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,