239 lines
4.7 KiB
TypeScript
239 lines
4.7 KiB
TypeScript
import { QuizTheme } from "@model/settingsData";
|
|
import { Theme, createTheme } from "@mui/material";
|
|
import themePublic from "./genericPublication";
|
|
|
|
|
|
const StandardTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#7E2AEA",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#7E2AEA",
|
|
},
|
|
|
|
background: {
|
|
default: "#FFFFFF",
|
|
},
|
|
}
|
|
})
|
|
|
|
const StandardDarkTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#7E2AEA",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#FFFFFF",
|
|
secondary: "#7E2AEA",
|
|
},
|
|
|
|
background: {
|
|
default: "#333647",
|
|
},
|
|
}
|
|
})
|
|
|
|
const PinkTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#D34085",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#D34085",
|
|
},
|
|
|
|
background: {
|
|
default: "#FFF9FC",
|
|
},
|
|
}
|
|
})
|
|
|
|
const PinkDarkTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#D34085",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#FFFFFF",
|
|
secondary: "#D34085",
|
|
},
|
|
|
|
background: {
|
|
default: "#333647",
|
|
},
|
|
}
|
|
})
|
|
|
|
const BlackWhiteTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#4E4D51",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#FFF9FC",
|
|
},
|
|
|
|
background: {
|
|
default: "#FFFFFF",
|
|
},
|
|
}
|
|
})
|
|
|
|
const OliveTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#758E4F",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#758E4F",
|
|
},
|
|
|
|
background: {
|
|
default: "#F9FBF1",
|
|
},
|
|
}
|
|
})
|
|
|
|
const PurpleTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#7E2AEA",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#7E2AEA",
|
|
},
|
|
|
|
background: {
|
|
default: "#FBF8FF",
|
|
},
|
|
}
|
|
})
|
|
|
|
const YellowTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#F2B133",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#F2B133",
|
|
},
|
|
|
|
background: {
|
|
default: "#FFFCF6",
|
|
},
|
|
}
|
|
})
|
|
|
|
const GoldDarkTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#E6AA37",
|
|
},
|
|
secondary: {
|
|
main: "#FFFCF6",
|
|
},
|
|
text: {
|
|
primary: "#FFFFFF",
|
|
secondary: "#F2B133",
|
|
},
|
|
|
|
background: {
|
|
default: "#333647",
|
|
},
|
|
}
|
|
})
|
|
|
|
const BlueTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#4964ED",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#333647",
|
|
secondary: "#4964ED",
|
|
},
|
|
|
|
background: {
|
|
default: "#F5F7FF",
|
|
},
|
|
}
|
|
})
|
|
|
|
const BlueDarkTheme = createTheme({
|
|
...themePublic,
|
|
palette: {
|
|
primary: {
|
|
main: "#07A0C3",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#FFFFFF",
|
|
secondary: "#07A0C3",
|
|
},
|
|
|
|
background: {
|
|
default: "#333647",
|
|
},
|
|
}
|
|
})
|
|
|
|
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
|
|
StandardTheme: { theme: StandardTheme, isLight: true },
|
|
StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
|
|
PinkTheme: { theme: PinkTheme, isLight: true },
|
|
PinkDarkTheme: { theme: PinkDarkTheme, isLight: false },
|
|
BlackWhiteTheme: { theme: BlackWhiteTheme, isLight: true },
|
|
OliveTheme: { theme: OliveTheme, isLight: true },
|
|
YellowTheme: { theme: YellowTheme, isLight: true },
|
|
GoldDarkTheme: { theme: GoldDarkTheme, isLight: false },
|
|
PurpleTheme: { theme: PurpleTheme, isLight: true },
|
|
BlueTheme: { theme: BlueTheme, isLight: true },
|
|
BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
|
|
};
|