diff --git a/hyperglass/ui/context/HyperglassProvider.tsx b/hyperglass/ui/context/HyperglassProvider.tsx
index 547c01c..872a3e5 100644
--- a/hyperglass/ui/context/HyperglassProvider.tsx
+++ b/hyperglass/ui/context/HyperglassProvider.tsx
@@ -19,7 +19,7 @@ const queryClient = new QueryClient();
 export const HyperglassProvider = (props: THyperglassProvider) => {
   const { config, children } = props;
   const value = useMemo(() => config, []);
-  const userTheme = value && makeTheme(value.web.theme);
+  const userTheme = value && makeTheme(value.web.theme, value.web.theme.default_color_mode);
   const theme = value ? userTheme : defaultTheme;
   return (
     <ChakraProvider theme={theme}>
diff --git a/hyperglass/ui/util/theme.ts b/hyperglass/ui/util/theme.ts
index f6e1e02..f3417c5 100644
--- a/hyperglass/ui/util/theme.ts
+++ b/hyperglass/ui/util/theme.ts
@@ -173,12 +173,30 @@ function importColors(userColors: IConfigTheme['colors']): Theme.Colors {
   };
 }
 
-export function makeTheme(userTheme: IConfigTheme): Theme.Full {
+export function makeTheme(
+  userTheme: IConfigTheme,
+  defaultColorMode: 'dark' | 'light' | null,
+): Theme.Full {
   const [fonts, fontWeights] = importFonts(userTheme.fonts);
+  const colors = importColors(userTheme.colors);
+  const config = {} as Theme.Full['config'];
+
+  switch (defaultColorMode) {
+    case null:
+      config.useSystemColorMode = true;
+      break;
+    case 'light':
+      config.initialColorMode = 'light';
+      break;
+    case 'dark':
+      config.initialColorMode = 'dark';
+      break;
+  }
 
   const defaultTheme = extendTheme({
-    colors: importColors(userTheme.colors),
     fonts,
+    colors,
+    config,
     fontWeights,
     styles: {
       global: props => ({