feat: remove dark blue theme (#14890)

coderd/database/migrations/000260_remove_dark_blue_theme.down.sql

@@ -0,0 +1 @@
+-- Nothing to restore

coderd/database/migrations/000260_remove_dark_blue_theme.up.sql

@@ -0,0 +1 @@
+UPDATE users SET theme_preference = '' WHERE theme_preference = 'darkBlue';

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

@@ -42,19 +42,12 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
 					themes={[themes.dark, themes.light]}
 					onSelect={() => onChangeTheme("auto")}
 				/>
-
 				<ThemePreviewButton
 					displayName="Dark"
 					active={currentTheme === "dark"}
 					theme={themes.dark}
 					onSelect={() => onChangeTheme("dark")}
 				/>
-				<ThemePreviewButton
-					displayName="Dark blue"
-					active={currentTheme === "darkBlue"}
-					theme={themes.darkBlue}
-					onSelect={() => onChangeTheme("darkBlue")}
-				/>
 				<ThemePreviewButton
 					displayName="Light"
 					active={currentTheme === "light"}

site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx

@@ -21,24 +21,6 @@ describe("appearance page", () => {
 		expect(API.updateAppearanceSettings).toBeCalledTimes(0);
 	});
 
-	it("changes theme to dark blue", async () => {
-		renderWithAuth(<AppearancePage />);
-
-		jest.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({
-			...MockUser,
-			theme_preference: "darkBlue",
-		});
-
-		const darkBlue = await screen.findByText("Dark blue");
-		await userEvent.click(darkBlue);
-
-		// Check if the API was called correctly
-		expect(API.updateAppearanceSettings).toBeCalledTimes(1);
-		expect(API.updateAppearanceSettings).toHaveBeenCalledWith("me", {
-			theme_preference: "darkBlue",
-		});
-	});
-
 	it("changes theme to light", async () => {
 		renderWithAuth(<AppearancePage />);
 

site/src/pages/UsersPage/storybookData/users.ts

@@ -343,7 +343,7 @@ export const MockUsers: User[] = [
 		last_seen_at: "2024-09-05T12:27:22.098297Z",
 		status: "active",
 		login_type: "oidc",
-		theme_preference: "darkBlue",
+		theme_preference: "dark",
 		organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"],
 		roles: [
 			{
@@ -423,7 +423,7 @@ export const MockUsers: User[] = [
 		last_seen_at: "2024-09-05T07:24:39.324649Z",
 		status: "active",
 		login_type: "oidc",
-		theme_preference: "darkBlue",
+		theme_preference: "dark",
 		organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"],
 		roles: [
 			{

site/src/theme/darkBlue/branding.ts

@@ -1,33 +0,0 @@
-import type { Branding } from "../branding";
-import colors from "../tailwindColors";
-
-export const branding: Branding = {
-	enterprise: {
-		background: colors.blue[950],
-		divider: colors.blue[900],
-		border: colors.blue[400],
-		text: colors.blue[50],
-	},
-	premium: {
-		background: colors.violet[950],
-		divider: colors.violet[900],
-		border: colors.violet[400],
-		text: colors.violet[50],
-	},
-
-	featureStage: {
-		background: colors.sky[900],
-		divider: colors.sky[800],
-		border: colors.sky[400],
-		text: colors.sky[400],
-
-		hover: {
-			background: colors.gray[900],
-			divider: colors.gray[800],
-			border: colors.sky[400],
-			text: colors.sky[400],
-		},
-	},
-};
-
-export default branding;

site/src/theme/darkBlue/experimental.ts

@@ -1,52 +0,0 @@
-import type { NewTheme } from "../experimental";
-import colors from "../tailwindColors";
-
-export default {
-	l1: {
-		background: colors.gray[950],
-		outline: colors.gray[700],
-		text: colors.white,
-		fill: {
-			solid: colors.gray[600],
-			outline: colors.gray[600],
-			text: colors.white,
-		},
-	},
-
-	l2: {
-		background: colors.gray[900],
-		outline: colors.gray[700],
-		text: colors.gray[50],
-		fill: {
-			solid: colors.gray[500],
-			outline: colors.gray[500],
-			text: colors.white,
-		},
-		disabled: {
-			background: colors.gray[900],
-			outline: colors.zinc[700],
-			text: colors.gray[200],
-			fill: {
-				solid: colors.gray[500],
-				outline: colors.gray[500],
-				text: colors.white,
-			},
-		},
-		hover: {
-			background: colors.gray[800],
-			outline: colors.gray[600],
-			text: colors.white,
-			fill: {
-				solid: colors.zinc[400],
-				outline: colors.zinc[400],
-				text: colors.white,
-			},
-		},
-	},
-
-	pillDefault: {
-		background: colors.gray[800],
-		outline: colors.gray[700],
-		text: colors.gray[200],
-	},
-} satisfies NewTheme;

site/src/theme/darkBlue/index.ts

@@ -1,15 +0,0 @@
-import { forDarkThemes } from "../externalImages";
-import branding from "./branding";
-import experimental from "./experimental";
-import monaco from "./monaco";
-import muiTheme from "./mui";
-import roles from "./roles";
-
-export default {
-	...muiTheme,
-	externalImages: forDarkThemes,
-	experimental,
-	branding,
-	monaco,
-	roles,
-};

site/src/theme/darkBlue/monaco.ts

@@ -1,37 +0,0 @@
-import type * as monaco from "monaco-editor";
-import muiTheme from "./mui";
-
-export default {
-	base: "vs-dark",
-	inherit: true,
-	rules: [
-		{
-			token: "comment",
-			foreground: "6B737C",
-		},
-		{
-			token: "type",
-			foreground: "B392F0",
-		},
-		{
-			token: "string",
-			foreground: "9DB1C5",
-		},
-		{
-			token: "variable",
-			foreground: "DDDDDD",
-		},
-		{
-			token: "identifier",
-			foreground: "B392F0",
-		},
-		{
-			token: "delimiter.curly",
-			foreground: "EBB325",
-		},
-	],
-	colors: {
-		"editor.foreground": muiTheme.palette.text.primary,
-		"editor.background": muiTheme.palette.background.paper,
-	},
-} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;

site/src/theme/darkBlue/mui.ts

@@ -1,79 +0,0 @@
-// biome-ignore lint/nursery/noRestrictedImports: createTheme
-import { createTheme } from "@mui/material/styles";
-import { BODY_FONT_FAMILY, borderRadius } from "../constants";
-import { components } from "../mui";
-import tw from "../tailwindColors";
-
-const muiTheme = createTheme({
-	palette: {
-		mode: "dark",
-		primary: {
-			main: tw.sky[500],
-			contrastText: tw.sky[50],
-			light: tw.sky[300],
-			dark: tw.sky[400],
-		},
-		secondary: {
-			main: tw.gray[500],
-			contrastText: tw.gray[200],
-			dark: tw.gray[400],
-		},
-		background: {
-			default: tw.gray[900],
-			paper: tw.gray[900],
-		},
-		text: {
-			primary: tw.gray[50],
-			secondary: tw.gray[400],
-			disabled: tw.gray[500],
-		},
-		divider: tw.gray[700],
-		warning: {
-			light: tw.amber[500],
-			main: tw.amber[800],
-			dark: tw.amber[950],
-		},
-		success: {
-			main: tw.green[500],
-			dark: tw.green[600],
-		},
-		info: {
-			light: tw.blue[400],
-			main: tw.blue[600],
-			dark: tw.blue[950],
-			contrastText: tw.gray[200],
-		},
-		error: {
-			light: tw.red[400],
-			main: tw.red[500],
-			dark: tw.red[950],
-			contrastText: tw.gray[200],
-		},
-		action: {
-			hover: tw.gray[800],
-		},
-		neutral: {
-			main: tw.gray[50],
-		},
-		dots: tw.gray[500],
-	},
-	typography: {
-		fontFamily: BODY_FONT_FAMILY,
-
-		body1: {
-			fontSize: "1rem" /* 16px at default scaling */,
-			lineHeight: "160%",
-		},
-
-		body2: {
-			fontSize: "0.875rem" /* 14px at default scaling */,
-			lineHeight: "160%",
-		},
-	},
-	shape: {
-		borderRadius,
-	},
-	components,
-});
-
-export default muiTheme;

site/src/theme/darkBlue/roles.ts

@@ -1,157 +0,0 @@
-import type { Roles } from "../roles";
-import colors from "../tailwindColors";
-
-const roles: Roles = {
-	danger: {
-		background: colors.orange[950],
-		outline: colors.orange[500],
-		text: colors.orange[50],
-		fill: {
-			solid: colors.orange[500],
-			outline: colors.orange[400],
-			text: colors.white,
-		},
-		disabled: {
-			background: colors.orange[950],
-			outline: colors.orange[800],
-			text: colors.orange[200],
-			fill: {
-				solid: colors.orange[800],
-				outline: colors.orange[800],
-				text: colors.white,
-			},
-		},
-		hover: {
-			background: colors.orange[900],
-			outline: colors.orange[500],
-			text: colors.white,
-			fill: {
-				solid: colors.orange[500],
-				outline: colors.orange[500],
-				text: colors.white,
-			},
-		},
-	},
-	error: {
-		background: colors.red[950],
-		outline: colors.red[600],
-		text: colors.red[50],
-		fill: {
-			solid: colors.red[400],
-			outline: colors.red[400],
-			text: colors.white,
-		},
-	},
-	warning: {
-		background: colors.amber[950],
-		outline: colors.amber[300],
-		text: colors.amber[50],
-		fill: {
-			solid: colors.amber[500],
-			outline: colors.amber[500],
-			text: colors.white,
-		},
-	},
-	notice: {
-		background: colors.blue[950],
-		outline: colors.blue[400],
-		text: colors.blue[50],
-		fill: {
-			solid: colors.blue[500],
-			outline: colors.blue[600],
-			text: colors.white,
-		},
-	},
-	info: {
-		background: colors.gray[950],
-		outline: colors.gray[400],
-		text: colors.gray[50],
-		fill: {
-			solid: colors.gray[500],
-			outline: colors.gray[600],
-			text: colors.white,
-		},
-	},
-	success: {
-		background: colors.green[950],
-		outline: colors.green[500],
-		text: colors.green[50],
-		fill: {
-			solid: colors.green[600],
-			outline: colors.green[600],
-			text: colors.white,
-		},
-		disabled: {
-			background: colors.green[950],
-			outline: colors.green[800],
-			text: colors.green[200],
-			fill: {
-				solid: colors.green[800],
-				outline: colors.green[800],
-				text: colors.white,
-			},
-		},
-		hover: {
-			background: colors.green[900],
-			outline: colors.green[500],
-			text: colors.white,
-			fill: {
-				solid: colors.green[500],
-				outline: colors.green[500],
-				text: colors.white,
-			},
-		},
-	},
-	active: {
-		background: colors.sky[950],
-		outline: colors.sky[500],
-		text: colors.sky[50],
-		fill: {
-			solid: colors.sky[600],
-			outline: colors.sky[400],
-			text: colors.white,
-		},
-		disabled: {
-			background: colors.sky[950],
-			outline: colors.sky[800],
-			text: colors.sky[200],
-			fill: {
-				solid: colors.sky[800],
-				outline: colors.sky[800],
-				text: colors.white,
-			},
-		},
-		hover: {
-			background: colors.sky[900],
-			outline: colors.sky[500],
-			text: colors.white,
-			fill: {
-				solid: colors.sky[500],
-				outline: colors.sky[500],
-				text: colors.white,
-			},
-		},
-	},
-	inactive: {
-		background: colors.gray[950],
-		outline: colors.gray[500],
-		text: colors.gray[50],
-		fill: {
-			solid: colors.gray[400],
-			outline: colors.gray[400],
-			text: colors.white,
-		},
-	},
-	preview: {
-		background: colors.violet[950],
-		outline: colors.violet[500],
-		text: colors.violet[50],
-		fill: {
-			solid: colors.violet[400],
-			outline: colors.violet[400],
-			text: colors.white,
-		},
-	},
-};
-
-export default roles;

site/src/theme/index.ts

@@ -3,7 +3,6 @@ import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";
 import dark from "./dark";
-import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
@@ -33,7 +32,6 @@ export const DEFAULT_THEME = "dark";
 
 const theme = {
 	dark,
-	darkBlue,
 	light,
 } satisfies Record<string, Theme>;