fix: convert the new dashboard theme to be an experiment (#10108)

site/src/api/typesGenerated.ts

@@ -1668,12 +1668,14 @@ export const Entitlements: Entitlement[] = [
 
 // From codersdk/deployment.go
 export type Experiment =
+  | "dashboard_theme"
   | "deployment_health_page"
   | "moons"
   | "single_tailnet"
   | "tailnet_pg_coordinator"
   | "template_autostop_requirement";
 export const Experiments: Experiment[] = [
+  "dashboard_theme",
   "deployment_health_page",
   "moons",
   "single_tailnet",

site/src/theme/colors.ts

@@ -1,47 +1,95 @@
 // Based on https://codepen.io/hkfoster/pen/YzeYRwR
 
+import { getMetadataAsJSON } from "utils/metadata";
+
+// When in development mode the experiments meta tag won't exist,
+// so you can just set this to true.
+export const experimentalTheme =
+  typeof document !== "undefined" &&
+  getMetadataAsJSON("experiments")?.includes("dashboard_theme");
+
 export const colors = {
   white: "hsl(0, 0%, 100%)",
 
-  gray: {
-    17: "hsl(0, 0%, 4%)",
-    16: "hsl(0, 0%, 7%)",
-    15: "hsl(0, 0%, 10%)",
-    14: "hsl(0, 0%, 14%)",
-    13: "hsl(0, 0%, 17%)",
-    12: "hsl(0, 0%, 20%)",
-    11: "hsl(0, 0%, 23%)",
-    10: "hsl(0, 0%, 27%)",
-    9: "hsl(0, 0%, 31%)",
-    8: "hsl(0, 0%, 35%)",
-    7: "hsl(0, 0%, 62%)",
-    6: "hsl(0, 0%, 69%)",
-    5: "hsl(0, 0%, 75%)",
-    4: "hsl(0, 0%, 82%)",
-    3: "hsl(0, 0%, 90%)",
-    2: "hsl(0, 0%, 93%)",
-    1: "hsl(0, 0%, 96%)",
-  },
+  gray: experimentalTheme
+    ? {
+        17: "hsl(0, 0%, 4%)",
+        16: "hsl(0, 0%, 7%)",
+        15: "hsl(0, 0%, 10%)",
+        14: "hsl(0, 0%, 14%)",
+        13: "hsl(0, 0%, 17%)",
+        12: "hsl(0, 0%, 20%)",
+        11: "hsl(0, 0%, 23%)",
+        10: "hsl(0, 0%, 27%)",
+        9: "hsl(0, 0%, 31%)",
+        8: "hsl(0, 0%, 35%)",
+        7: "hsl(0, 0%, 62%)",
+        6: "hsl(0, 0%, 69%)",
+        5: "hsl(0, 0%, 75%)",
+        4: "hsl(0, 0%, 82%)",
+        3: "hsl(0, 0%, 90%)",
+        2: "hsl(0, 0%, 93%)",
+        1: "hsl(0, 0%, 96%)",
+      }
+    : {
+        17: "hsl(220, 50%, 3%)",
+        16: "hsl(223, 44%, 9%)",
+        15: "hsl(222, 38%, 14%)",
+        14: "hsl(222, 32%, 19%)",
+        13: "hsl(222, 31%, 25%)",
+        12: "hsl(222, 30%, 31%)",
+        11: "hsl(219, 29%, 38%)",
+        10: "hsl(219, 28%, 45%)",
+        9: "hsl(219, 28%, 52%)",
+        8: "hsl(218, 29%, 58%)",
+        7: "hsl(219, 30%, 64%)",
+        6: "hsl(219, 31%, 71%)",
+        5: "hsl(218, 32%, 77%)",
+        4: "hsl(223, 38%, 84%)",
+        3: "hsl(218, 44%, 92%)",
+        2: "hsl(220, 50%, 95%)",
+        1: "hsl(220, 55%, 98%)",
+      },
 
-  red: {
-    17: "hsl(355, 95%, 3%)",
-    16: "hsl(355, 88%, 8%)",
-    15: "hsl(355, 86%, 13%)",
-    14: "hsl(355, 84%, 18%)",
-    13: "hsl(355, 82%, 23%)",
-    12: "hsl(355, 74%, 28%)",
-    11: "hsl(355, 70%, 33%)",
-    10: "hsl(355, 66%, 38%)",
-    9: "hsl(355, 69%, 43%)",
-    8: "hsl(355, 73%, 48%)",
-    7: "hsl(355, 76%, 53%)",
-    6: "hsl(355, 78%, 58%)",
-    5: "hsl(355, 79%, 63%)",
-    4: "hsl(355, 85%, 68%)",
-    3: "hsl(355, 88%, 73%)",
-    2: "hsl(355, 95%, 78%)",
-    1: "hsl(355, 100%, 83%) ",
-  },
+  red: experimentalTheme
+    ? {
+        17: "hsl(355, 95%, 3%)",
+        16: "hsl(355, 88%, 8%)",
+        15: "hsl(355, 86%, 13%)",
+        14: "hsl(355, 84%, 18%)",
+        13: "hsl(355, 82%, 23%)",
+        12: "hsl(355, 74%, 28%)",
+        11: "hsl(355, 70%, 33%)",
+        10: "hsl(355, 66%, 38%)",
+        9: "hsl(355, 69%, 43%)",
+        8: "hsl(355, 73%, 48%)",
+        7: "hsl(355, 76%, 53%)",
+        6: "hsl(355, 78%, 58%)",
+        5: "hsl(355, 79%, 63%)",
+        4: "hsl(355, 85%, 68%)",
+        3: "hsl(355, 88%, 73%)",
+        2: "hsl(355, 95%, 78%)",
+        1: "hsl(355, 100%, 83%) ",
+      }
+    : {
+        17: "hsl(355, 95%, 3%)",
+        16: "hsl(355, 88%, 9%)",
+        15: "hsl(355, 86%, 14%)",
+        14: "hsl(355, 84%, 19%)",
+        13: "hsl(355, 82%, 25%)",
+        12: "hsl(355, 74%, 31%)",
+        11: "hsl(355, 70%, 38%)",
+        10: "hsl(355, 66%, 45%)",
+        9: "hsl(355, 69%, 52%)",
+        8: "hsl(355, 73%, 58%)",
+        7: "hsl(355, 76%, 64%)",
+        6: "hsl(355, 78%, 71%)",
+        5: "hsl(355, 79%, 77%)",
+        4: "hsl(355, 85%, 84%)",
+        3: "hsl(355, 88%, 92%)",
+        2: "hsl(355, 95%, 96%)",
+        1: "hsl(355, 100%, 98%) ",
+      },
 
   orange: {
     17: "hsl(20, 100%, 3%)",

site/src/theme/theme.ts

@@ -1,4 +1,4 @@
-import { colors } from "./colors";
+import { colors, experimentalTheme } from "./colors";
 import { createTheme, type ThemeOptions } from "@mui/material/styles";
 import { BODY_FONT_FAMILY, borderRadius } from "./constants";
 
@@ -45,8 +45,8 @@ export let dark = createTheme({
     },
     divider: colors.gray[13],
     warning: {
-      light: colors.orange[9],
-      main: colors.orange[11],
+      light: experimentalTheme ? colors.orange[9] : colors.orange[7],
+      main: experimentalTheme ? colors.orange[11] : colors.orange[9],
       dark: colors.orange[15],
     },
     success: {