:)

aslilac · aslilac · commit 467bd0d3b0c8 · 2023-12-06T17:56:32.000Z
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -32,8 +32,8 @@ const defaultQueryClient = new QueryClient({
 export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme.dark}>
-        <EmotionThemeProvider theme={theme.dark}>
+      <MuiThemeProvider theme={theme.darkBlue}>
+        <EmotionThemeProvider theme={theme.darkBlue}>
           <CssBaseline enableColorScheme />
           {children}
         </EmotionThemeProvider>
diff --git a/site/src/theme/darkBlue/colors.ts b/site/src/theme/darkBlue/colors.ts
@@ -4,17 +4,17 @@ export default {
   white: "#fff",
 
   gray: {
-    17: tw.gray[950],
-    16: tw.gray[900],
-    14: tw.gray[800],
-    13: tw.gray[700],
-    12: tw.gray[600],
-    11: tw.gray[500],
-    9: tw.gray[400],
-    6: tw.gray[300],
-    4: tw.gray[200],
-    2: tw.gray[100],
-    1: tw.gray[50],
+    17: tw.slate[900],
+    16: tw.slate[900],
+    14: tw.slate[800],
+    13: tw.slate[700],
+    12: tw.slate[600],
+    11: tw.slate[500],
+    9: tw.slate[400],
+    6: tw.slate[300],
+    4: tw.slate[200],
+    2: tw.slate[100],
+    1: tw.slate[50],
   },
 
   red: {
diff --git a/site/src/theme/theme.stories.tsx b/site/src/theme/theme.stories.tsx
@@ -134,6 +134,16 @@ const DARK_BACKGROUND = {
   values: [
     {
       name: "dark",
+      value: colors.zinc[950],
+    },
+  ],
+};
+
+const DARK_BLUE_BACKGROUND = {
+  default: "darkBlue",
+  values: [
+    {
+      name: "darkBlue",
       value: colors.gray[950],
     },
   ],
@@ -159,6 +169,16 @@ export const ExperimentalDark: Story = {
   },
 };
 
+export const ExperimentalDarkBlue: Story = {
+  name: "Experimental (Dark blue)",
+  args: {
+    children: <ExperimentalExample />,
+  },
+  parameters: {
+    backgrounds: DARK_BLUE_BACKGROUND,
+  },
+};
+
 export const ExperimentalLight: Story = {
   name: "Experimental (Light)",
   args: {
@@ -180,6 +200,16 @@ export const MuiDark: Story = {
   },
 };
 
+export const MuiDarkBlue: Story = {
+  name: "MUI (Dark Blue)",
+  args: {
+    children: <MuiExample />,
+  },
+  parameters: {
+    backgrounds: DARK_BLUE_BACKGROUND,
+  },
+};
+
 export const MuiLight: Story = {
   name: "MUI (Light)",
   args: {
