synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-15 22:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove dark blue theme (#14890)

Browse Source
This commit is contained in:
zx
2024-10-02 23:30:33 +08:00
committed by GitHub
parent 0589267301
commit d0a8424819
12 changed files with 4 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
coderd/database/migrations/000260_remove_dark_blue_theme.down.sql Normal file
View File

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

1
coderd/database/migrations/000260_remove_dark_blue_theme.up.sql Normal file
View File

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

7
site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
View File

@ -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"}

18
site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
View File

@ -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 />);

4
site/src/pages/UsersPage/storybookData/users.ts
View File

@ -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: [
{

33
site/src/theme/darkBlue/branding.ts
View File

@ -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;

52
site/src/theme/darkBlue/experimental.ts
View File

@ -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;

15
site/src/theme/darkBlue/index.ts
View File

@ -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,
};

37
site/src/theme/darkBlue/monaco.ts
View File

@ -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;

79
site/src/theme/darkBlue/mui.ts
View File

@ -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;

157
site/src/theme/darkBlue/roles.ts
View File

@ -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;

2
site/src/theme/index.ts
View File

@ -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>;