mirror of https://github.com/authelia/authelia.git
138 lines
3.6 KiB
TypeScript
138 lines
3.6 KiB
TypeScript
import { createTheme } from "@mui/material/styles";
|
|
|
|
const Grey = createTheme({
|
|
custom: {
|
|
icon: "#929aa5",
|
|
loadingBar: "#929aa5",
|
|
},
|
|
palette: {
|
|
mode: "dark",
|
|
primary: {
|
|
main: "#929aa5",
|
|
},
|
|
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: "#929aa5",
|
|
secondary: "rgba(0, 0, 0, 0.54)",
|
|
disabled: "rgba(0, 0, 0, 0.38)",
|
|
},
|
|
divider: "rgba(0, 0, 0, 0.12)",
|
|
background: {
|
|
paper: "#2f343e",
|
|
default: "#2f343e",
|
|
},
|
|
action: {
|
|
active: "#929aa5",
|
|
hover: "#929aa5",
|
|
hoverOpacity: 0.04,
|
|
selected: "#929aa5",
|
|
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,
|
|
},
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
"@global": {
|
|
body: {
|
|
backgroundColor: "#2f343e",
|
|
color: "#929aa5",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
root: {
|
|
"& $notchedOutline": {
|
|
borderColor: "#929aa5",
|
|
},
|
|
"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
|
|
borderColor: "#929aa5",
|
|
borderWidth: 2,
|
|
},
|
|
"&$focused $notchedOutline": {
|
|
borderColor: "#929aa5",
|
|
},
|
|
},
|
|
notchedOutline: {},
|
|
},
|
|
},
|
|
MuiCheckbox: {
|
|
styleOverrides: {
|
|
root: {
|
|
color: "#929aa5",
|
|
},
|
|
},
|
|
},
|
|
MuiInputBase: {
|
|
styleOverrides: {
|
|
input: {
|
|
color: "#929aa5",
|
|
},
|
|
},
|
|
},
|
|
MuiInputLabel: {
|
|
styleOverrides: {
|
|
root: {
|
|
color: "#929aa5",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export default Grey;
|