8000 Add purple theme · coder/coder@44928e5 · GitHub
[go: up one dir, main page]
Skip to content

Commit 44928e5

Browse files
kylecarbskylecarbs
committed
Add purple theme
1 parent 5ed0c7a commit 44928e5

File tree

8 files changed

+390
-9
lines changed

8 files changed

+390
-9
lines changed

‎site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,19 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
8686
theme={themes.dark}
8787
onSelect={() => onChangeTheme("dark")}
8888
/>
89-
<ThemePreviewButton
90-
displayName="Light"
91-
active={currentTheme === "light"}
92-
theme={themes.light}
93-
onSelect={() => onChangeTheme("light")}
94-
/>
95-
</Stack>
89+
<ThemePreviewButton
90+
displayName="Light"
91+
active={currentTheme === "light"}
92+
theme={themes.light}
93+
onSelect={() => onChangeTheme("light")}
94+
/>
95+
<ThemePreviewButton
96+
displayName="Purple"
97+
active={currentTheme === "purple"}
98+
theme={themes.purple}
99+
onSelect={() => onChangeTheme("purple")}
100+
/>
101+
</Stack>
96102
</Section>
97103
<div css={{ marginBottom: 48 }}></div>
98104
<Section

‎site/src/theme/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Theme as MuiTheme } from "@mui/material/styles";
33
import type * as monaco from "monaco-editor";
44
import type { Branding } from "./branding";
55
import dark from "./dark";
6+
import purple from "./purple";
67
import type { NewTheme } from "./experimental";
78
import type { ExternalImageModeStyles } from "./externalImages";
89
import light from "./light";
@@ -31,8 +32,9 @@ export interface Theme extends Omit<MuiTheme, "palette"> {
3132
export const DEFAULT_THEME = "dark";
3233

3334
const theme = {
34-
dark,
35-
light,
35+
dark,
36+
light,
37+
purple,
3638
} satisfies Record<string, Theme>;
3739

3840
export default theme;

‎site/src/theme/purple/branding.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Branding } from "../branding";
2+
import colors from "../tailwindColors";
3+
4+
const branding: Branding = {
5+
enterprise: {
6+
background: colors.blue[950],
7+
divider: colors.blue[900],
8+
border: colors.blue[400],
9+
text: colors.blue[50],
10+
},
11+
premium: {
12+
background: colors.violet[950],
13+
divider: colors.violet[900],
14+
border: colors.violet[400],
15+
text: colors.violet[50],
16+
},
17+
18+
featureStage: {
19+
background: colors.violet[950],
20+
divider: colors.violet[900],
21+
border: colors.violet[400],
22+
text: colors.violet[400],
23+
24+
hover: {
25+
background: colors.zinc[950],
26+
divider: colors.zinc[900],
27+
border: colors.violet[400],
28+
text: colors.violet[400],
29+
},
30+
},
31+
};
32+
33+
export default branding;

‎site/src/theme/purple/experimental.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { NewTheme } from "../experimental";
2+
import colors from "../tailwindColors";
3+
4+
export default {
5+
l1: {
6+
background: colors.zinc[950],
7+
outline: colors.zinc[700],
8+
text: colors.white,
9+
fill: {
10+
solid: colors.zinc[600],
11+
outline: colors.zinc[600],
12+
text: colors.white,
13+
},
14+
},
15+
16+
l2: {
17+
background: colors.zinc[900],
18+
outline: colors.zinc[700],
19+
text: colors.zinc[50],
20+
fill: {
21+
solid: colors.zinc[500],
22+
outline: colors.zinc[500],
23+
text: colors.white,
24+
},
25+
disabled: {
26+
background: colors.gray[900],
27+
outline: colors.zinc[700],
28+
text: colors.zinc[200],
29+
fill: {
30+
solid: colors.zinc[500],
31+
outline: colors.zinc[500],
32+
text: colors.white,
33+
},
34+
},
35+
hover: {
36+
background: colors.zinc[800],
37+
outline: colors.zinc[600],
38+
text: colors.white,
39+
fill: {
40+
solid: colors.zinc[400],
41+
outline: colors.zinc[400],
42+
text: colors.white,
43+
},
44+
},
45+
},
46+
47+
pillDefault: {
48+
background: colors.zinc[800],
49+
outline: colors.zinc[700],
50+
text: colors.zinc[200],
51+
},
52+
} satisfies NewTheme;

‎site/src/theme/purple/index.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { forDarkThemes } from "../externalImages";
2+
import branding from "./branding";
3+
import experimental from "./experimental";
4+
import monaco from "./monaco";
5+
import muiTheme from "./mui";
6+
import roles from "./roles";
7+
8+
export default {
9+
...muiTheme,
10+
externalImages: forDarkThemes,
11+
experimental,
12+
branding,
13+
monaco,
14+
roles,
15+
};

‎site/src/theme/purple/monaco.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type * as monaco from "monaco-editor";
2+
import muiTheme from "./mui";
3+
4+
export default {
5+
base: "vs-dark",
6+
inherit: true,
7+
rules: [
8+
{
9+
token: "comment",
10+
foreground: "6B737C",
11+
},
12+
{
13+
token: "type",
14+
foreground: "B392F0",
15+
},
16+
{
17+
token: "string",
18+
foreground: "9DB1C5",
19+
},
20+
{
21+
token: "variable",
22+
foreground: "DDDDDD",
23+
},
24+
{
25+
token: "identifier",
26+
foreground: "B392F0",
27+
},
28+
{
29+
token: "delimiter.curly",
30+
foreground: "EBB325",
31+
},
32+
],
33+
colors: {
34+
"editor.foreground": muiTheme.palette.text.primary,
35+
"editor.background": muiTheme.palette.background.paper,
36+
},
37+
} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;

‎site/src/theme/purple/mui.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// biome-ignore lint/nursery/noRestrictedImports: createTheme
2+
import { createTheme } from "@mui/material/styles";
3+
import { BODY_FONT_FAMILY, borderRadius } from "../constants";
4+
import { components } from "../mui";
5+
import tw from "../tailwindColors";
6+
7+
const muiTheme = createTheme({
8+
palette: {
9+
mode: "dark",
10+
primary: {
11+
main: tw.violet[500],
12+
contrastText: tw.white,
13+
light: tw.violet[400],
14+
dark: tw.violet[600],
15+
},
16+
secondary: {
17+
main: tw.zinc[500],
18+
contrastText: tw.zinc[200],
19+
dark: tw.zinc[400],
20+
},
21+
background: {
22+
default: tw.zinc[950],
23+
paper: tw.zinc[900],
24+
},
25+
text: {
26+
primary: tw.zinc[50],
27+
secondary: tw.zinc[400],
28+
disabled: tw.zinc[500],
29+
},
30+
divider: tw.zinc[700],
31+
warning: {
32+
light: tw.amber[500],
33+
main: tw.amber[800],
34+
dark: tw.amber[950],
35+
},
36+
success: {
37+
main: tw.green[500],
38+
dark: tw.green[600],
39+
},
40+
info: {
41+
light: tw.blue[400],
42+
main: tw.blue[600],
43+
dark: tw.blue[950],
44+
contrastText: tw.zinc[200],
45+
},
46+
error: {
47+
light: tw.red[400],
48+
main: tw.red[500],
49+
dark: tw.red[950],
50+
contrastText: tw.zinc[200],
51+
},
52+
action: {
53+
hover: tw.zinc[800],
54+
},
55+
neutral: {
56+
main: tw.zinc[50],
57+
},
58+
dots: tw.zinc[500],
59+
},
60+
typography: {
61+
fontFamily: BODY_FONT_FAMILY,
62+
63+
body1: {
64+
fontSize: "1rem" /* 16px at default scaling */,
65+
lineHeight: "160%",
66+
},
67+
68+
body2: {
69+
fontSize: "0.875rem" /* 14px at default scaling */,
70+
lineHeight: "160%",
71+
},
72+
},
73+
shape: {
74+
borderRadius,
75+
},
76+
components,
77+
});
78+
79+
export default muiTheme;

0 commit comments

Comments
 (0)
0