From f4784308c302c17b48aeb5e60fea9bf7fac4599d Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Mon, 25 Mar 2019 16:48:25 -0400 Subject: [PATCH] Add basic themes --- src/types/HyperspaceTheme.tsx | 85 +++++++++++++++++++++++++++++++++++ src/utilities/themes.tsx | 44 ++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 src/types/HyperspaceTheme.tsx create mode 100644 src/utilities/themes.tsx diff --git a/src/types/HyperspaceTheme.tsx b/src/types/HyperspaceTheme.tsx new file mode 100644 index 0000000..19173a1 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/utilities/themes.tsx b/src/utilities/themes.tsx new file mode 100644 index 0000000..2a0d33e --- /dev/null +++ b/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; +} \ No newline at end of file