Add basic themes

src/types/HyperspaceTheme.tsx

@@ -0,0 +1,85 @@
+import {Color} from '@material-ui/core';
+import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink } from '@material-ui/core/colors';
+
+/**
+ * Basic theme colors for Hyperspace.
+ */
+export type HyperspaceTheme = {
+    name: string;
+    palette: {
+        primary: Color;
+        secondary: Color;
+    }
+}
+
+export const defaultTheme: HyperspaceTheme = {
+    name: "Hypergod (Default)",
+    palette: {
+        primary: deepPurple,
+        secondary: red
+    }
+}
+
+export const gardenerTheme: HyperspaceTheme = {
+    name: "Gardener",
+    palette: {
+        primary: lightGreen,
+        secondary: yellow
+    }
+}
+
+export const teacherTheme: HyperspaceTheme = {
+    name: "Teacher",
+    palette: {
+        primary: purple,
+        secondary: deepOrange
+    }
+}
+
+export const jokerTheme: HyperspaceTheme = {
+    name: "Joker",
+    palette: {
+        primary: indigo,
+        secondary: lightBlue
+    }
+}
+
+export const brotherTheme: HyperspaceTheme = {
+    name: "Brother",
+    palette: {
+        primary: red,
+        secondary: orange
+    }
+}
+
+export const guardTheme: HyperspaceTheme = {
+    name: "Guard",
+    palette: {
+        primary: blue,
+        secondary: deepOrange
+    }
+}
+
+export const scientistTheme: HyperspaceTheme = {
+    name: "Scientist",
+    palette: {
+        primary: amber,
+        secondary: yellow
+    }
+}
+
+export const entertainerTheme: HyperspaceTheme = {
+    name: "Entertainer",
+    palette: {
+        primary: pink,
+        secondary: purple
+    }
+}
+
+export const kingTheme: HyperspaceTheme = {
+    name: "King",
+    palette: {
+        primary: deepPurple,
+        secondary: amber
+    }
+}

src/utilities/themes.tsx

@@ -0,0 +1,44 @@
+import { createMuiTheme, Theme } from '@material-ui/core';
+import { HyperspaceTheme } from '../types/HyperspaceTheme';
+
+/**
+ * Creates a Material-UI theme from a selected Hyperspace theme palette.
+ * @param theme The Hyperspace theme that should be applied
+ * @returns A Material-UI theme with the Hyperspace theme's palette colors
+ */
+export function setHyperspaceTheme(theme: HyperspaceTheme): Theme {
+    return createMuiTheme({
+        typography: {
+            fontFamily: [
+              '-apple-system',
+              'BlinkMacSystemFont',
+              '"Segoe UI"',
+              'Roboto',
+              '"Helvetica Neue"',
+              'Arial',
+              'sans-serif',
+              '"Apple Color Emoji"',
+              '"Segoe UI Emoji"',
+              '"Segoe UI Symbol"',
+            ].join(','),
+          },
+        palette: {
+            primary: theme.palette.primary,
+            secondary: theme.palette.secondary
+        }
+    })
+}
+
+/**
+ * Sets the app's palette type (aka. turns on an off dark mode)
+ * @param theme The Material-UI theme to toggle the dark mode on
+ * @param setting Whether dark mode should be on (`true`) or off (`false`)
+ */
+export function darkMode(theme: Theme, setting: boolean): Theme {
+    if (setting) {
+        theme.palette.type = 'dark';
+    } else {
+        theme.palette.type = 'light';
+    }
+    return theme;
+}