diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 73646e5727..966e110019 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -16,6 +16,7 @@ import { oceanBlueColors } from 'theme/colors/oceanBlue';
 
 import '@fontsource/inter/variable.css';
 import { MantineProvider } from '@mantine/core';
+import { mantineTheme } from 'mantine-theme/theme';
 import 'overlayscrollbars/overlayscrollbars.css';
 import 'theme/css/overlayscrollbars.css';
 
@@ -52,11 +53,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   }, [direction]);
 
   return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{ colorScheme: 'dark' }}
-    >
+    <MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme}>
       <ChakraProvider theme={theme} colorModeManager={manager}>
         {children}
       </ChakraProvider>
diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts
new file mode 100644
index 0000000000..2313b9a41b
--- /dev/null
+++ b/invokeai/frontend/web/src/mantine-theme/theme.ts
@@ -0,0 +1,21 @@
+import { MantineThemeOverride } from '@mantine/core';
+
+export const mantineTheme: MantineThemeOverride = {
+  colorScheme: 'dark',
+  colors: {
+    ocean: [
+      '#dcf5ff',
+      '#afddff',
+      '#80c4fd',
+      '#50acf9',
+      '#2295f6',
+      '#097bdd',
+      '#0060ad',
+      '#00447d',
+      '#00294e',
+      '#000f20',
+    ],
+  },
+  primaryColor: 'ocean',
+  primaryShade: 6,
+};