Skip to content

Commit 2d2bea7

Browse files
kylecarbskylecarbs
authored
fix: convert the new dashboard theme to be an experiment (#10108)
1 parent 69b6569 commit 2d2bea7

File tree

7 files changed

+103
-45
lines changed

7 files changed

+103
-45
lines changed

‎coderd/apidoc/docs.go

+4-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coderd/apidoc/swagger.json

+4-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎codersdk/deployment.go

+3
Original file line numberDiff line numberDiff line change
@@ -1985,6 +1985,9 @@ const (
19851985
// Deployment health page
19861986
ExperimentDeploymentHealthPage Experiment = "deployment_health_page"
19871987

1988+
// ExperimentDashboardTheme mutates the dashboard to use a new, dark color scheme.
1989+
ExperimentDashboardTheme Experiment = "dashboard_theme"
1990+
19881991
// Add new experiments here!
19891992
// ExperimentExample Experiment = "example"
19901993
)

‎docs/api/schemas.md

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/api/typesGenerated.ts

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/theme/colors.ts

+86-38
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,95 @@
11
// Based on https://codepen.io/hkfoster/pen/YzeYRwR
22

3+
import { getMetadataAsJSON } from "utils/metadata";
4+
5+
// When in development mode the experiments meta tag won't exist,
6+
// so you can just set this to true.
7+
export const experimentalTheme =
8+
typeof document !== "undefined" &&
9+
getMetadataAsJSON("experiments")?.includes("dashboard_theme");
10+
311
export const colors = {
412
white: "hsl(0, 0%, 100%)",
513

6-
gray: {
7-
17: "hsl(0, 0%, 4%)",
8-
16: "hsl(0, 0%, 7%)",
9-
15: "hsl(0, 0%, 10%)",
10-
14: "hsl(0, 0%, 14%)",
11-
13: "hsl(0, 0%, 17%)",
12-
12: "hsl(0, 0%, 20%)",
13-
11: "hsl(0, 0%, 23%)",
14-
10: "hsl(0, 0%, 27%)",
15-
9: "hsl(0, 0%, 31%)",
16-
8: "hsl(0, 0%, 35%)",
17-
7: "hsl(0, 0%, 62%)",
18-
6: "hsl(0, 0%, 69%)",
19-
5: "hsl(0, 0%, 75%)",
20-
4: "hsl(0, 0%, 82%)",
21-
3: "hsl(0, 0%, 90%)",
22-
2: "hsl(0, 0%, 93%)",
23-
1: "hsl(0, 0%, 96%)",
24-
},
14+
gray: experimentalTheme
15+
? {
16+
17: "hsl(0, 0%, 4%)",
17+
16: "hsl(0, 0%, 7%)",
18+
15: "hsl(0, 0%, 10%)",
19+
14: "hsl(0, 0%, 14%)",
20+
13: "hsl(0, 0%, 17%)",
21+
12: "hsl(0, 0%, 20%)",
22+
11: "hsl(0, 0%, 23%)",
23+
10: "hsl(0, 0%, 27%)",
24+
9: "hsl(0, 0%, 31%)",
25+
8: "hsl(0, 0%, 35%)",
26+
7: "hsl(0, 0%, 62%)",
27+
6: "hsl(0, 0%, 69%)",
28+
5: "hsl(0, 0%, 75%)",
29+
4: "hsl(0, 0%, 82%)",
30+
3: "hsl(0, 0%, 90%)",
31+
2: "hsl(0, 0%, 93%)",
32+
1: "hsl(0, 0%, 96%)",
33+
}
34+
: {
35+
17: "hsl(220, 50%, 3%)",
36+
16: "hsl(223, 44%, 9%)",
37+
15: "hsl(222, 38%, 14%)",
38+
14: "hsl(222, 32%, 19%)",
39+
13: "hsl(222, 31%, 25%)",
40+
12: "hsl(222, 30%, 31%)",
41+
11: "hsl(219, 29%, 38%)",
42+
10: "hsl(219, 28%, 45%)",
43+
9: "hsl(219, 28%, 52%)",
44+
8: "hsl(218, 29%, 58%)",
45+
7: "hsl(219, 30%, 64%)",
46+
6: "hsl(219, 31%, 71%)",
47+
5: "hsl(218, 32%, 77%)",
48+
4: "hsl(223, 38%, 84%)",
49+
3: "hsl(218, 44%, 92%)",
50+
2: "hsl(220, 50%, 95%)",
51+
1: "hsl(220, 55%, 98%)",
52+
},
2553

26-
red: {
27-
17: "hsl(355, 95%, 3%)",
28-
16: "hsl(355, 88%, 8%)",
29-
15: "hsl(355, 86%, 13%)",
30-
14: "hsl(355, 84%, 18%)",
31-
13: "hsl(355, 82%, 23%)",
32-
12: "hsl(355, 74%, 28%)",
33-
11: "hsl(355, 70%, 33%)",
34-
10: "hsl(355, 66%, 38%)",
35-
9: "hsl(355, 69%, 43%)",
36-
8: "hsl(355, 73%, 48%)",
37-
7: "hsl(355, 76%, 53%)",
38-
6: "hsl(355, 78%, 58%)",
39-
5: "hsl(355, 79%, 63%)",
40-
4: "hsl(355, 85%, 68%)",
41-
3: "hsl(355, 88%, 73%)",
42-
2: "hsl(355, 95%, 78%)",
43-
1: "hsl(355, 100%, 83%) ",
44-
},
54+
red: experimentalTheme
55+
? {
56+
17: "hsl(355, 95%, 3%)",
57+
16: "hsl(355, 88%, 8%)",
58+
15: "hsl(355, 86%, 13%)",
59+
14: "hsl(355, 84%, 18%)",
60+
13: "hsl(355, 82%, 23%)",
61+
12: "hsl(355, 74%, 28%)",
62+
11: "hsl(355, 70%, 33%)",
63+
10: "hsl(355, 66%, 38%)",
64+
9: "hsl(355, 69%, 43%)",
65+
8: "hsl(355, 73%, 48%)",
66+
7: "hsl(355, 76%, 53%)",
67+
6: "hsl(355, 78%, 58%)",
68+
5: "hsl(355, 79%, 63%)",
69+
4: "hsl(355, 85%, 68%)",
70+
3: "hsl(355, 88%, 73%)",
71+
2: "hsl(355, 95%, 78%)",
72+
1: "hsl(355, 100%, 83%) ",
73+
}
74+
: {
75+
17: "hsl(355, 95%, 3%)",
76+
16: "hsl(355, 88%, 9%)",
77+
15: "hsl(355, 86%, 14%)",
78+
14: "hsl(355, 84%, 19%)",
79+
13: "hsl(355, 82%, 25%)",
80+
12: "hsl(355, 74%, 31%)",
81+
11: "hsl(355, 70%, 38%)",
82+
10: "hsl(355, 66%, 45%)",
83+
9: "hsl(355, 69%, 52%)",
84+
8: "hsl(355, 73%, 58%)",
85+
7: "hsl(355, 76%, 64%)",
86+
6: "hsl(355, 78%, 71%)",
87+
5: "hsl(355, 79%, 77%)",
88+
4: "hsl(355, 85%, 84%)",
89+
3: "hsl(355, 88%, 92%)",
90+
2: "hsl(355, 95%, 96%)",
91+
1: "hsl(355, 100%, 98%) ",
92+
},
4593

4694
orange: {
4795
17: "hsl(20, 100%, 3%)",

‎site/src/theme/theme.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { colors } from "./colors";
1+
import { colors, experimentalTheme } from "./colors";
22
import { createTheme, type ThemeOptions } from "@mui/material/styles";
33
import { BODY_FONT_FAMILY, borderRadius } from "./constants";
44

@@ -45,8 +45,8 @@ export let dark = createTheme({
4545
},
4646
divider: colors.gray[13],
4747
warning: {
48-
light: colors.orange[9],
49-
main: colors.orange[11],
48+
light: experimentalTheme ? colors.orange[9] : colors.orange[7],
49+
main: experimentalTheme ? colors.orange[11] : colors.orange[9],
5050
dark: colors.orange[15],
5151
},
5252
success: {

0 commit comments

Comments
 (0)