2021-09-13 18:44:46 +02:00
|
|
|
import React from "react";
|
2021-09-18 01:43:08 +02:00
|
|
|
import { createTheme, ThemeProvider, Theme, StyledEngineProvider } from "@mui/material/styles";
|
2021-09-17 01:23:03 +02:00
|
|
|
|
|
|
|
declare module "@mui/styles/defaultTheme" {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
|
|
interface DefaultTheme extends Theme {}
|
|
|
|
}
|
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-18 03:30:02 +02:00
|
|
|
warninglight: "#ff0",
|
|
|
|
warning: "#cc0",
|
|
|
|
warningdark: "#990",
|
|
|
|
|
2021-09-18 06:16:02 +02:00
|
|
|
infolight: "#69f",
|
|
|
|
info: "#36c",
|
|
|
|
infodark: "#039",
|
|
|
|
|
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-16 23:30:47 +02:00
|
|
|
|
|
|
|
hp: "#dd3434",
|
|
|
|
money: "#ffd700",
|
|
|
|
hack: "#adff2f",
|
|
|
|
combat: "#faffdf",
|
|
|
|
cha: "#a671d1",
|
|
|
|
int: "#6495ed",
|
2021-09-13 18:44:46 +02:00
|
|
|
};
|
|
|
|
|
2021-09-17 01:23:03 +02:00
|
|
|
export const theme = createTheme({
|
2021-09-13 18:44:46 +02:00
|
|
|
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-18 06:16:02 +02:00
|
|
|
info: {
|
|
|
|
light: colors.infolight,
|
|
|
|
main: colors.info,
|
|
|
|
dark: colors.infodark,
|
|
|
|
},
|
2021-09-18 03:30:02 +02:00
|
|
|
warning: {
|
|
|
|
light: colors.warninglight,
|
|
|
|
main: colors.warning,
|
|
|
|
dark: colors.warningdark,
|
|
|
|
},
|
2021-09-15 03:05:49 +02:00
|
|
|
background: {
|
2021-09-18 08:11:20 +02:00
|
|
|
default: colors.black,
|
2021-09-15 03:05:49 +02:00
|
|
|
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-17 01:23:03 +02:00
|
|
|
components: {
|
2021-09-13 23:11:02 +02:00
|
|
|
MuiInputBase: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: colors.well,
|
2021-09-18 06:16:02 +02:00
|
|
|
color: colors.primary,
|
2021-09-17 01:23:03 +02:00
|
|
|
},
|
|
|
|
input: {
|
|
|
|
"&::placeholder": {
|
|
|
|
userSelect: "none",
|
|
|
|
color: colors.primarydark,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-17 01:23:03 +02:00
|
|
|
|
2021-09-14 02:37:35 +02:00
|
|
|
MuiInput: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
borderBottomColor: "#fff",
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
2021-09-17 01:23:03 +02:00
|
|
|
underline: {
|
|
|
|
"&:hover": {
|
|
|
|
borderBottomColor: colors.primarydark,
|
|
|
|
},
|
|
|
|
"&:before": {
|
|
|
|
borderBottomColor: colors.primary,
|
|
|
|
},
|
|
|
|
"&:after": {
|
|
|
|
borderBottomColor: colors.primarylight,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-17 01:23:03 +02:00
|
|
|
|
2021-09-14 02:37:35 +02:00
|
|
|
MuiInputLabel: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
color: colors.primarydark, // why is this switched?
|
|
|
|
userSelect: "none",
|
|
|
|
"&:before": {
|
|
|
|
color: colors.primarylight,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-18 06:16:02 +02:00
|
|
|
MuiButton: {
|
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: "#333",
|
|
|
|
border: "1px solid " + colors.well,
|
|
|
|
// color: colors.primary,
|
|
|
|
margin: "5px",
|
|
|
|
padding: "3px 5px",
|
|
|
|
"&:hover": {
|
|
|
|
backgroundColor: colors.black,
|
|
|
|
},
|
2021-09-14 04:27:43 +02:00
|
|
|
|
2021-09-18 06:16:02 +02:00
|
|
|
borderRadius: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
MuiSelect: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
icon: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiMenu: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
list: {
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiMenuItem: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiAccordionSummary: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: "#111",
|
|
|
|
},
|
2021-09-14 02:37:35 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiAccordionDetails: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
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: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
2021-09-14 04:27:43 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiTooltip: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
tooltip: {
|
|
|
|
fontSize: "1em",
|
|
|
|
color: colors.primary,
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
borderRadius: 0,
|
|
|
|
border: "2px solid white",
|
|
|
|
},
|
2021-09-14 04:27:43 +02:00
|
|
|
},
|
|
|
|
},
|
2021-09-17 03:19:53 +02:00
|
|
|
MuiSlider: {
|
|
|
|
styleOverrides: {
|
|
|
|
valueLabel: {
|
|
|
|
color: colors.primary,
|
|
|
|
backgroundColor: colors.well,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-14 20:10:59 +02:00
|
|
|
MuiDrawer: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
paper: {
|
|
|
|
"&::-webkit-scrollbar": {
|
|
|
|
// webkit
|
|
|
|
display: "none",
|
|
|
|
},
|
|
|
|
scrollbarWidth: "none", // firefox
|
|
|
|
backgroundColor: colors.black,
|
|
|
|
},
|
|
|
|
paperAnchorDockedLeft: {
|
|
|
|
borderRight: "1px solid " + colors.welllight,
|
2021-09-14 20:10:59 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiDivider: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
backgroundColor: colors.welllight,
|
|
|
|
},
|
2021-09-15 03:05:49 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiFormControlLabel: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
2021-09-15 03:05:49 +02:00
|
|
|
},
|
|
|
|
},
|
|
|
|
MuiSwitch: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
switchBase: {
|
|
|
|
color: colors.primarydark,
|
|
|
|
},
|
|
|
|
track: {
|
|
|
|
backgroundColor: colors.welllight,
|
|
|
|
},
|
2021-09-14 20:10:59 +02:00
|
|
|
},
|
|
|
|
},
|
2021-09-16 23:30:47 +02:00
|
|
|
MuiPaper: {
|
2021-09-17 01:23:03 +02:00
|
|
|
styleOverrides: {
|
|
|
|
root: {
|
2021-09-18 06:16:02 +02:00
|
|
|
borderRadius: 0,
|
2021-09-17 01:23:03 +02:00
|
|
|
backgroundColor: colors.black,
|
|
|
|
border: "1px solid " + colors.welllight,
|
|
|
|
},
|
2021-09-16 23:30:47 +02:00
|
|
|
},
|
|
|
|
},
|
2021-09-18 06:16:02 +02:00
|
|
|
MuiTablePagination: {
|
|
|
|
styleOverrides: {
|
|
|
|
select: {
|
|
|
|
color: colors.primary,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-09-13 23:11:02 +02:00
|
|
|
},
|
2021-09-13 18:44:46 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
children: JSX.Element[] | JSX.Element;
|
|
|
|
}
|
|
|
|
|
2021-09-17 01:23:03 +02:00
|
|
|
export const TTheme = ({ children }: IProps): React.ReactElement => (
|
|
|
|
<StyledEngineProvider injectFirst>
|
|
|
|
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
|
|
|
</StyledEngineProvider>
|
2021-09-13 18:44:46 +02:00
|
|
|
);
|