Merge pull request #1621 from danielyxie/dev

added button as editable color

src/Settings/Settings.ts

@@ -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);

src/ui/React/Theme.tsx

@@ -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": {

src/ui/React/ThemeEditorModal.tsx

@@ -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