2021-09-13 18:44:46 +02:00
|
|
|
import React from "react";
|
2021-09-14 04:27:43 +02:00
|
|
|
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
|
2021-09-13 18:44:46 +02:00
|
|
|
|
|
|
|
export const colors = {
|
2021-09-13 23:11:02 +02:00
|
|
|
primarylight: "#0f0",
|
|
|
|
primary: "#0c0",
|
2021-09-13 18:44:46 +02:00
|
|
|
primarydark: "#090",
|
2021-09-14 20:10:59 +02:00
|
|
|
|
|
|
|
errorlight: "#f00",
|
|
|
|
error: "#c00",
|
|
|
|
errordark: "#900",
|
|
|
|
|
|
|
|
secondarylight: "#AAA",
|
|
|
|
secondary: "#888",
|
|
|
|
secondarydark: "#666",
|
|
|
|
|
2021-09-15 03:05:49 +02:00
|
|
|
welllight: "#444",
|
2021-09-13 23:11:02 +02:00
|
|
|
well: "#222",
|
2021-09-14 20:10:59 +02:00
|
|
|
white: "#fff",
|
|
|
|
black: "#000",
|
2021-09-13 18:44:46 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
export const theme = createMuiTheme({
|
|
|
|
palette: {
|
|
|
|
primary: {
|
2021-09-14 20:10:59 +02:00
|
|
|
light: colors.primarylight,
|
2021-09-13 18:44:46 +02:00
|
|
|
main: colors.primary,
|
|
|
|
dark: colors.primarydark,
|
|
|
|
},
|
2021-09-14 20:10:59 +02:00
|
|
|
secondary: {
|
|
|
|
light: colors.secondarylight,
|
|
|
|
main: colors.secondary,
|
|
|
|
dark: colors.secondarydark,
|
|
|
|
},
|
|
|
|
error: {
|
|
|
|
light: colors.errorlight,
|
|
|
|
main: colors.error,
|
|
|
|
dark: colors.errordark,
|
|
|
|
},
|
2021-09-15 03:05:49 +02:00
|
|
|
background: {
|
|
|
|
paper: colors.well,
|
|
|
|
},
|
2021-09-13 18:44:46 +02:00
|
|
|
},
|
|
|
|
typography: {
|
2021-09-14 20:10:59 +02:00
|
|
|
fontFamily: "monospace",
|
2021-09-13 18:44:46 +02:00
|
|
|
button: {
|
|
|
|
textTransform: "none",
|
|
|
|
},
|
|
|
|
},
|
2021-09-13 23:11:02 +02:00
|
|
|
overrides: {
|
|
|
|
MuiInputBase: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
input: {
|
|
|
|
color: colors.primary,
|
|
|
|
"&::placeholder": {
|
|
|
|
userSelect: "none",
|
|
|
|
color: colors.primarydark,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiInput: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
borderBottomColor: "#fff",
|
|
|
|
},
|
|
|
|
underline: {
|
2021-09-14 04:27:43 +02:00
|
|
|
"&:hover": {
|
2021-09-14 02:37:35 +02:00
|
|
|
borderBottomColor: colors.primarydark,
|
|
|
|
},
|
|
|
|
"&:before": {
|
|
|
|
borderBottomColor: colors.primary,
|
|
|
|
},
|
|
|
|
"&:after": {
|
|
|
|
borderBottomColor: colors.primarylight,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiInputLabel: {
|
|
|
|
root: {
|
|
|
|
color: colors.primarydark, // why is this switched?
|
|
|
|
userSelect: "none",
|
|
|
|
"&:before": {
|
|
|
|
color: colors.primarylight,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-14 04:27:43 +02:00
|
|
|
MuiButton: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: "#333",
|
|
|
|
border: "1px solid " + colors.well,
|
|
|
|
color: colors.primary,
|
|
|
|
margin: "5px",
|
|
|
|
padding: "3px 5px",
|
|
|
|
"&:hover": {
|
2021-09-14 20:10:59 +02:00
|
|
|
backgroundColor: colors.black,
|
2021-09-14 04:27:43 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
borderRadius: 0,
|
|
|
|
},
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
MuiSelect: {
|
|
|
|
icon: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiMenu: {
|
|
|
|
list: {
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiMenuItem: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiAccordionSummary: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: "#111",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiAccordionDetails: {
|
|
|
|
root: {
|
2021-09-14 20:10:59 +02:00
|
|
|
backgroundColor: colors.black,
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
2021-09-13 23:11:02 +02:00
|
|
|
},
|
2021-09-14 04:27:43 +02:00
|
|
|
MuiIconButton: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiTooltip: {
|
|
|
|
tooltip: {
|
|
|
|
fontSize: "1em",
|
|
|
|
color: colors.primary,
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
borderRadius: 0,
|
|
|
|
border: "2px solid white",
|
|
|
|
},
|
|
|
|
},
|
2021-09-14 20:10:59 +02:00
|
|
|
MuiSvgIcon: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiDrawer: {
|
|
|
|
paper: {
|
|
|
|
"&::-webkit-scrollbar": {
|
|
|
|
// webkit
|
|
|
|
display: "none",
|
|
|
|
},
|
|
|
|
scrollbarWidth: "none", // firefox
|
|
|
|
backgroundColor: colors.black,
|
|
|
|
},
|
|
|
|
paperAnchorDockedLeft: {
|
2021-09-15 03:05:49 +02:00
|
|
|
borderRight: "1px solid " + colors.welllight,
|
2021-09-14 20:10:59 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiDivider: {
|
|
|
|
root: {
|
2021-09-15 03:05:49 +02:00
|
|
|
backgroundColor: colors.welllight,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiFormControlLabel: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiSwitch: {
|
|
|
|
switchBase: {
|
|
|
|
color: colors.primarydark,
|
|
|
|
},
|
|
|
|
track: {
|
|
|
|
backgroundColor: colors.welllight,
|
2021-09-14 20:10:59 +02:00
|
|
|
},
|
|
|
|
},
|
2021-09-13 23:11:02 +02:00
|
|
|
},
|
2021-09-13 18:44:46 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
children: JSX.Element[] | JSX.Element;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Theme = ({ children }: IProps): React.ReactElement => (
|
|
|
|
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
|
|
|
);
|