Add new colors and define green theme

src/App.tsx

@@ -12,7 +12,7 @@ import {
   prefGlobal
 } from "./preferences";
 import { store } from "./store";
-import { theme } from "./theme";
+import { greenTheme, grayscaleTheme } from "./theme";
 
 import "../style/index.css";
 
@@ -78,7 +78,13 @@ export class App<
   render(): React.ReactNode {
     return (
       <PrefContext.Provider value={this.state.pref}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider
+          theme={
+            this.state.pref.styleType === "grayscale"
+              ? grayscaleTheme
+              : greenTheme
+          }
+        >
           <Provider store={store}>
             <AppRouter />
           </Provider>

src/colors.tsx

@@ -0,0 +1,48 @@
+export const green = {
+  50: "#D6EEDC",
+  100: "#ADDCBA",
+  200: "#85CB97",
+  300: "#5CB975",
+  400: "#36AB55",
+  500: "#298642",
+  600: "#206532",
+  700: "#144321",
+  800: "#0A2210",
+  900: "#051108"
+};
+
+export const gray = {
+  50: "#F7F8F8",
+  100: "#E1E3E4",
+  200: "#C3C7CB",
+  300: "#A6ACB2",
+  400: "#90969C",
+  500: "#5B5F63",
+  600: "#44474A",
+  700: "#3C3C3B",
+  800: "#242628",
+  900: "#1A1C1D"
+};
+
+export const purple = {
+  50: "#E7E0F0",
+  100: "#D0C0E5",
+  200: "#B9A1DA",
+  300: "#A78BD0",
+  400: "#8966C2",
+  500: "#6643A8",
+  600: "#55309D",
+  700: "#3B216E",
+  800: "#2F1957",
+  900: "#231240"
+};
+
+export const red = "#D72D47";
+
+export const orange = "#F66A0A";
+
+export const blue = "#276BE9";
+
+export const white = "#FFFFFF";
+
+export const black = "#000000";

src/index.tsx

@@ -1,4 +1,5 @@
 export * from "./App";
 export { IPreferences } from "./preferences";
 export { store } from "./store";
-export { theme, themeDecorator } from "./theme";
+export { grayscaleTheme, greenTheme, themeDecorator } from "./theme";
+export * from "./colors";

src/theme.tsx

@@ -1,20 +1,89 @@
 import { createTheme, ThemeProvider } from "@mui/material";
 import React from "react";
 
-export const theme = createTheme({
+import { green, purple, gray, white, red, orange, blue, black } from "./colors";
+
+export const grayscaleTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif'
   },
   palette: {
     primary: {
-      main: "#C4C4C4"
+      main: "#C4C4C4",
+      contrastText: white
     },
     secondary: {
-      main: "#7E7E7E"
+      main: "#7E7E7E",
+      contrastText: white
     }
   }
 });
 
+const baseTheme = createTheme({
+  typography: {
+    fontFamily: '"Inter", sans-serif'
+  },
+  palette: {
+    primary: {
+      light: green[300],
+      main: green[400],
+      dark: green[700],
+      contrastText: white
+    },
+    secondary: {
+      light: gray[300],
+      main: gray[400],
+      dark: gray[700],
+      contrastText: white
+    },
+    warning: {
+      main: orange,
+      contrastText: white
+    },
+    error: {
+      main: red,
+      contrastText: white
+    },
+    info: {
+      main: blue,
+      contrastText: white
+    },
+    success: {
+      main: green[500],
+      contrastText: white
+    },
+    mode: "light"
+  }
+});
+
+export const greenTheme = createTheme(baseTheme, {
+  palette: {
+    accent: baseTheme.palette.augmentColor({
+      color: {
+        light: purple[300],
+        main: purple[400],
+        dark: purple[700],
+        contrastText: white
+      },
+      name: "accent"
+    }),
+    white: baseTheme.palette.augmentColor({
+      color: {
+        main: white,
+        contrastText: black
+      },
+      name: "white"
+    }),
+    black: baseTheme.palette.augmentColor({
+      color: {
+        main: black,
+        contrastText: white
+      },
+      name: "black"
+    })
+  }
+});
+
 export const themeDecorator = (func: any) => (
-  <ThemeProvider theme={theme}>{func()}</ThemeProvider>
+  <ThemeProvider theme={greenTheme}>{func()}</ThemeProvider>
 );