added button as editable color

This commit is contained in:
Olivier Gagnon 2021-10-28 17:38:22 -04:00
parent ec49029dde
commit a34d6e0dfa
5 changed files with 16 additions and 4 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -137,6 +137,7 @@ interface IDefaultSettings {
disabled: string;
backgroundprimary: string;
backgroundsecondary: string;
button: string;
};
}
@ -213,6 +214,7 @@ export const defaultSettings: IDefaultSettings = {
disabled: "#66cfbc",
backgroundprimary: "#000",
backgroundsecondary: "#000",
button: "#333",
},
};
@ -277,6 +279,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
disabled: defaultSettings.theme.disabled,
backgroundprimary: defaultSettings.theme.backgroundprimary,
backgroundsecondary: defaultSettings.theme.backgroundsecondary,
button: defaultSettings.theme.button,
},
init() {
Object.assign(Settings, defaultSettings);

@ -17,6 +17,7 @@ declare module "@mui/material/styles" {
rep: React.CSSProperties["color"];
backgroundprimary: React.CSSProperties["color"];
backgroundsecondary: React.CSSProperties["color"];
button: React.CSSProperties["color"];
};
}
interface ThemeOptions {
@ -30,6 +31,7 @@ declare module "@mui/material/styles" {
rep: React.CSSProperties["color"];
backgroundprimary: React.CSSProperties["color"];
backgroundsecondary: React.CSSProperties["color"];
button: React.CSSProperties["color"];
};
}
}
@ -48,6 +50,7 @@ export function refreshTheme(): void {
rep: Settings.theme.rep,
backgroundprimary: Settings.theme.backgroundprimary,
backgroundsecondary: Settings.theme.backgroundsecondary,
button: Settings.theme.button,
},
palette: {
primary: {
@ -140,7 +143,7 @@ export function refreshTheme(): void {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: "#333",
backgroundColor: Settings.theme.button,
border: "1px solid " + Settings.theme.well,
// color: Settings.theme.primary,
"&:hover": {

@ -241,6 +241,12 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
color={customTheme["backgroundsecondary"]}
defaultColor={defaultSettings.theme["backgroundsecondary"]}
/>
<ColorEditor
name="button"
onColorChange={onColorChange}
color={customTheme["button"]}
defaultColor={defaultSettings.theme["button"]}
/>
<br />
<ColorEditor