authelia/web/src/themes/Light.ts

88 lines
2.3 KiB
TypeScript

import { createTheme } from "@mui/material/styles";
const Light = createTheme({
custom: {
icon: "#000",
loadingBar: "#000",
},
palette: {
mode: "light",
primary: {
main: "#1976d2",
},
secondary: {
light: "#ff4081",
main: "#f50057",
dark: "#c51162",
contrastText: "#ffffff",
},
error: {
light: "#e57373",
main: "#f44336",
dark: "#d32f2f",
contrastText: "#ffffff",
},
warning: {
light: "#ffb74d",
main: "#ff9800",
dark: "#f57c00",
contrastText: "rgba(0, 0, 0, 0.87)",
},
info: {
light: "#64b5f6",
main: "#2196f3",
dark: "#1976d2",
contrastText: "#ffffff",
},
success: {
light: "#81c784",
main: "#4caf50",
dark: "#388e3c",
contrastText: "rgba(0, 0, 0, 0.87)",
},
grey: {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
A100: "#d5d5d5",
A200: "#aaaaaa",
A400: "#303030",
A700: "#616161",
},
contrastThreshold: 3,
tonalOffset: 0.2,
text: {
primary: "rgba(0, 0, 0, 0.87)",
secondary: "rgba(0, 0, 0, 0.54)",
disabled: "rgba(0, 0, 0, 0.38)",
},
divider: "rgba(0, 0, 0, 0.12)",
background: {
paper: "#fff",
default: "#fff",
},
action: {
active: "rgba(0, 0, 0, 0.54)",
hover: "rgba(0, 0, 0, 0.04)",
hoverOpacity: 0.04,
selected: "rgba(0, 0, 0, 0.08)",
selectedOpacity: 0.08,
disabled: "rgba(0, 0, 0, 0.26)",
disabledBackground: "rgba(0, 0, 0, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(0, 0, 0, 0.12)",
focusOpacity: 0.12,
activatedOpacity: 0.12,
},
},
});
export default Light;