Add purple theme

GunnWATT · Dec 15, 2022 · f00d770 · f00d770
1 parent 36c37dd
commit f00d770
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/client/src/components/layout/ThemeHandler.tsx b/client/src/components/layout/ThemeHandler.tsx
@@ -4,7 +4,7 @@ import {hexToRgb} from '../../util/progressBarColor';
 
 
 type Colors = { theme: string, accent: string, shadow: string };
-export type ColorTheme = { id: 'default' | 'goldenrod', dark: Colors, light: Colors }
+export type ColorTheme = { id: 'default' | 'goldenrod' | 'electric-violet', dark: Colors, light: Colors }
 
 export default function ThemeHandler() {
     const {colors} = useContext(UserDataContext);
@@ -39,7 +39,7 @@ export const defaultTheme: ColorTheme = {
     }
 }
 
-export const goldenRod: ColorTheme = {
+export const goldenrod: ColorTheme = {
     id: 'goldenrod',
     dark: {
         theme: '#f59e0b',
@@ -52,3 +52,18 @@ export const goldenRod: ColorTheme = {
         shadow: '#c2410c'
     }
 }
+
+export const electricViolet: ColorTheme = {
+    id: 'electric-violet',
+    dark: {
+        theme: '#e879f9',
+        accent: '#9024f5',
+        shadow: '#6b21a8'
+    },
+    // TODO: play around with these and make better
+    light: {
+        theme: '#913399',
+        accent: '#5d30a6',
+        shadow: '#7e22ce'
+    }
+}
diff --git a/client/src/pages/settings/Appearance.tsx b/client/src/pages/settings/Appearance.tsx
@@ -9,7 +9,7 @@ import CurrentTimeContext from '../../contexts/CurrentTimeContext';
 // Firestore
 import {useAuth, useFirestore} from 'reactfire';
 import { updateUserData } from '../../util/firestore';
-import {ColorTheme, defaultTheme, goldenRod} from '../../components/layout/ThemeHandler';
+import {ColorTheme, defaultTheme, goldenrod, electricViolet} from '../../components/layout/ThemeHandler';
 
 
 export default function Appearance() {
@@ -47,9 +47,12 @@ export default function Appearance() {
                     <ColorCard label="Default (red)" value={defaultTheme}>
                         WATT's classic, red look.
                     </ColorCard>
-                    <ColorCard label="Goldenrod" value={goldenRod}>
+                    <ColorCard label="Goldenrod" value={goldenrod}>
                         A golden theme for golden students.
                     </ColorCard>
+                    <ColorCard label="Electric violet" value={electricViolet}>
+                        High-amp action!
+                    </ColorCard>
                 </RadioCards>
 
                 <RadioCards label="Time Format" value={currTimePref} onChange={changeTime}>