diff --git a/packages/stack/src/providers/design-provider.tsx b/packages/stack/src/providers/design-provider.tsx
index c6e6e5a95..85c695b6e 100644
--- a/packages/stack/src/providers/design-provider.tsx
+++ b/packages/stack/src/providers/design-provider.tsx
@@ -30,8 +30,8 @@ type DesignContextValue = {
 
 export type DesignConfig = {
   colors?: {
-    dark: Partial<ColorPalette>,
-    light: Partial<ColorPalette>,
+    dark?: Partial<ColorPalette>,
+    light?: Partial<ColorPalette>,
   },
   breakpoints?: Partial<Breakpoints>,
 } & (
@@ -61,9 +61,12 @@ export function hasCustomColorMode(config: DesignConfig): config is DesignConfig
 
 function getColors(
   theme: 'dark' | 'light', 
-  colors: { dark: Partial<ColorPalette>, light: Partial<ColorPalette> } | undefined,
+  colors: { dark?: Partial<ColorPalette>, light?: Partial<ColorPalette> } | undefined,
 ): ColorPalette {
-  return { ...DEFAULT_COLORS[theme], ...colors?.[theme]};
+  return {
+    dark: { ...DEFAULT_COLORS.dark, ...colors?.dark },
+    light: { ...DEFAULT_COLORS.light, ...colors?.light },
+  }[theme];
 }
 
 const useColorMode = (
diff --git a/packages/stack/src/providers/theme-provider.tsx b/packages/stack/src/providers/theme-provider.tsx
index 4b5f5f2ee..96c0ba726 100644
--- a/packages/stack/src/providers/theme-provider.tsx
+++ b/packages/stack/src/providers/theme-provider.tsx
@@ -28,7 +28,7 @@ export function StackTheme({
     let { colorMode, setColorMode } = theme;
     designProps = { colorMode, setColorMode };
   }
-  designProps = designProps || {breakpoints: theme?.breakpoints, colors: theme?.colors};
+  designProps = { breakpoints: theme?.breakpoints, colors: theme?.colors, ...designProps };
 
   return (
     <ColorModeProvider {...colorModeProps}>