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,38 @@
+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"
+};

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,7 +1,9 @@
 import { createTheme, ThemeProvider } from "@mui/material";
 import React from "react";
 
-export const theme = createTheme({
+import { green, purple, gray } from "./colors";
+
+export const grayscaleTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif'
   },
@@ -15,6 +17,30 @@ export const theme = createTheme({
   }
 });
 
+export const greenTheme = createTheme({
+  typography: {
+    fontFamily: '"Inter", sans-serif'
+  },
+  palette: {
+    primary: {
+      light: green[100],
+      main: green[400],
+      dark: green[600]
+    },
+    secondary: {
+      light: gray[100],
+      main: gray[400],
+      dark: gray[600]
+    },
+    warning: {
+      light: purple[100],
+      main: purple[400],
+      dark: purple[600]
+    },
+    mode: "light"
+  }
+});
+
 export const themeDecorator = (func: any) => (
-  <ThemeProvider theme={theme}>{func()}</ThemeProvider>
+  <ThemeProvider theme={greenTheme}>{func()}</ThemeProvider>
 );