feat: implement dark mode and add custom color palette (theme)
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
import { extendTheme } from "@mui/joy/styles";
|
||||
|
||||
// I generated this theme with AI (Claude Opus 4.6)
|
||||
|
||||
export const theme = extendTheme({
|
||||
cssVarPrefix: "joy",
|
||||
colorSchemes: {
|
||||
light: {
|
||||
palette: {
|
||||
primary: {
|
||||
50: "#eef7ff",
|
||||
100: "#dcedff",
|
||||
200: "#b3d9ff",
|
||||
300: "#7fbdff",
|
||||
400: "#469cf5",
|
||||
500: "#0b6bcb",
|
||||
600: "#0958a8",
|
||||
700: "#08478a",
|
||||
800: "#0a3a6e",
|
||||
900: "#0c2f59",
|
||||
solidBg: "#0b6bcb",
|
||||
solidHoverBg: "#095aa7",
|
||||
solidActiveBg: "#08478a",
|
||||
outlinedBorder: "#7fbdff",
|
||||
outlinedColor: "#08478a",
|
||||
softBg: "#dcedff", // Color in sidebar for selected view
|
||||
softColor: "#08478a",
|
||||
},
|
||||
success: {
|
||||
50: "#ecfdf5",
|
||||
100: "#d1faee",
|
||||
200: "#a6f4dc",
|
||||
300: "#6ee7c9",
|
||||
400: "#34d0ac",
|
||||
500: "#0d9488",
|
||||
600: "#0b7c73",
|
||||
700: "#0a655e",
|
||||
800: "#0b514c",
|
||||
900: "#0a423f",
|
||||
solidBg: "#0d9488",
|
||||
solidHoverBg: "#0b7c73",
|
||||
softBg: "#d1faee",
|
||||
softColor: "#0a655e",
|
||||
},
|
||||
warning: {
|
||||
50: "#fffaeb",
|
||||
100: "#fef0c7",
|
||||
200: "#fedf89",
|
||||
300: "#fdc74a",
|
||||
400: "#fbaf24",
|
||||
500: "#f59e0b",
|
||||
600: "#d67e06",
|
||||
700: "#b25f08",
|
||||
800: "#8f4a0e",
|
||||
900: "#763d10",
|
||||
solidBg: "#f59e0b",
|
||||
solidHoverBg: "#d67e06",
|
||||
softBg: "#fef0c7",
|
||||
softColor: "#8f4a0e",
|
||||
},
|
||||
danger: {
|
||||
50: "#fff1f2",
|
||||
100: "#ffe1e4",
|
||||
200: "#ffc7cd",
|
||||
300: "#ff9ba7",
|
||||
400: "#fb6b7d",
|
||||
500: "#e11d48",
|
||||
600: "#be123c",
|
||||
700: "#9b1038",
|
||||
800: "#7f1230",
|
||||
900: "#6a122b",
|
||||
solidBg: "#e11d48",
|
||||
solidHoverBg: "#be123c",
|
||||
softBg: "#ffe1e4",
|
||||
softColor: "#9b1038",
|
||||
},
|
||||
neutral: {
|
||||
50: "#f8fafc",
|
||||
100: "#f1f5f9",
|
||||
200: "#e2e8f0",
|
||||
300: "#cbd5e1",
|
||||
400: "#94a3b8",
|
||||
500: "#64748b",
|
||||
600: "#475569",
|
||||
700: "#334155",
|
||||
800: "#1e293b",
|
||||
900: "#0f172a",
|
||||
},
|
||||
background: {
|
||||
body: "#f7f9fc",
|
||||
surface: "#ffffff",
|
||||
level1: "#f1f5f9",
|
||||
level2: "#e2e8f0",
|
||||
level3: "#cbd5e1",
|
||||
},
|
||||
text: {
|
||||
primary: "#0f172a",
|
||||
secondary: "#475569",
|
||||
tertiary: "#64748b",
|
||||
},
|
||||
divider: "rgba(15, 23, 42, 0.08)",
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
palette: {
|
||||
primary: {
|
||||
50: "#0c2f59",
|
||||
100: "#0a3a6e",
|
||||
200: "#08478a",
|
||||
300: "#0958a8",
|
||||
400: "#0b6bcb",
|
||||
500: "#3b8ce0",
|
||||
600: "#6ba9ea",
|
||||
700: "#9cc6f2",
|
||||
800: "#c7defa",
|
||||
900: "#eef7ff",
|
||||
solidBg: "#3b8ce0",
|
||||
solidHoverBg: "#6ba9ea",
|
||||
solidActiveBg: "#0958a8",
|
||||
outlinedBorder: "#0958a8",
|
||||
outlinedColor: "#9cc6f2",
|
||||
softBg: "rgba(59, 140, 224, 0.16)", // Color in sidebar for selected view
|
||||
softColor: "#9cc6f2",
|
||||
},
|
||||
success: {
|
||||
50: "#0a423f",
|
||||
100: "#0b514c",
|
||||
200: "#0a655e",
|
||||
300: "#0b7c73",
|
||||
400: "#0d9488",
|
||||
500: "#2dc8b1",
|
||||
600: "#6ee7c9",
|
||||
700: "#a6f4dc",
|
||||
800: "#d1faee",
|
||||
900: "#ecfdf5",
|
||||
solidBg: "#0d9488",
|
||||
solidHoverBg: "#2dc8b1",
|
||||
softBg: "rgba(13, 148, 136, 0.18)",
|
||||
softColor: "#6ee7c9",
|
||||
},
|
||||
warning: {
|
||||
50: "#763d10",
|
||||
100: "#8f4a0e",
|
||||
200: "#b25f08",
|
||||
300: "#d67e06",
|
||||
400: "#f59e0b",
|
||||
500: "#fbaf24",
|
||||
600: "#fdc74a",
|
||||
700: "#fedf89",
|
||||
800: "#fef0c7",
|
||||
900: "#fffaeb",
|
||||
solidBg: "#f59e0b",
|
||||
solidHoverBg: "#fbaf24",
|
||||
softBg: "rgba(245, 158, 11, 0.16)",
|
||||
softColor: "#fdc74a",
|
||||
},
|
||||
danger: {
|
||||
50: "#6a122b",
|
||||
100: "#7f1230",
|
||||
200: "#9b1038",
|
||||
300: "#be123c",
|
||||
400: "#e11d48",
|
||||
500: "#f04463",
|
||||
600: "#fb6b7d",
|
||||
700: "#ff9ba7",
|
||||
800: "#ffc7cd",
|
||||
900: "#fff1f2",
|
||||
solidBg: "#e11d48",
|
||||
solidHoverBg: "#f04463",
|
||||
softBg: "rgba(225, 29, 72, 0.18)",
|
||||
softColor: "#fb6b7d",
|
||||
},
|
||||
neutral: {
|
||||
50: "#0b1220",
|
||||
100: "#0f172a",
|
||||
200: "#1e293b",
|
||||
300: "#334155",
|
||||
400: "#475569",
|
||||
500: "#64748b",
|
||||
600: "#94a3b8",
|
||||
700: "#cbd5e1",
|
||||
800: "#e2e8f0",
|
||||
900: "#f1f5f9",
|
||||
},
|
||||
background: {
|
||||
body: "#0b1220",
|
||||
surface: "#111a2e",
|
||||
level1: "#16213a",
|
||||
level2: "#1e293b",
|
||||
level3: "#334155",
|
||||
},
|
||||
text: {
|
||||
primary: "#f1f5f9",
|
||||
secondary: "#cbd5e1",
|
||||
tertiary: "#94a3b8",
|
||||
},
|
||||
divider: "rgba(226, 232, 240, 0.08)",
|
||||
},
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
body: "'Inter', 'Segoe UI', system-ui, sans-serif",
|
||||
display: "'Inter', 'Segoe UI', system-ui, sans-serif",
|
||||
},
|
||||
radius: {
|
||||
xs: "6px",
|
||||
sm: "10px",
|
||||
md: "14px",
|
||||
lg: "20px",
|
||||
xl: "28px",
|
||||
},
|
||||
components: {
|
||||
JoyInput: {
|
||||
styleOverrides: {
|
||||
input: ({ theme }) => ({
|
||||
color: theme.vars.palette.text.primary,
|
||||
"&::placeholder": {
|
||||
color: theme.vars.palette.text.tertiary,
|
||||
opacity: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
JoySelect: {
|
||||
styleOverrides: {
|
||||
button: ({ theme }) => ({
|
||||
color: theme.vars.palette.text.primary,
|
||||
}),
|
||||
listbox: ({ theme }) => ({
|
||||
color: theme.vars.palette.text.primary,
|
||||
backgroundColor: theme.vars.palette.background.surface,
|
||||
}),
|
||||
},
|
||||
},
|
||||
JoySheet: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundColor: theme.vars.palette.background.surface,
|
||||
borderColor: theme.vars.palette.divider,
|
||||
}),
|
||||
},
|
||||
},
|
||||
JoyOption: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
color: theme.vars.palette.text.primary,
|
||||
backgroundColor: theme.vars.palette.background.surface,
|
||||
"&:hover": {
|
||||
backgroundColor: theme.vars.palette.background.level1,
|
||||
},
|
||||
'&[aria-selected="true"]': {
|
||||
backgroundColor: theme.vars.palette.background.level2,
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
JoyButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
transition: "all 0.15s ease",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user