From f2e384ad9772ad2195aef4646f38000d9cc4a184 Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Sun, 21 Apr 2019 12:39:22 -0400 Subject: [PATCH] Add setting for system-determined dark mode --- src/pages/Settings.tsx | 26 ++++++++++++++++++++++++-- src/types/HyperspaceTheme.tsx | 29 ++++++++++++++++++++++++----- src/utilities/settings.tsx | 5 ++++- src/utilities/themes.tsx | 15 ++++++++++++++- 4 files changed, 66 insertions(+), 9 deletions(-) diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index d2e5aca..853e5b9 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -28,10 +28,11 @@ import {canSendNotifications, browserSupportsNotificationRequests} from '../util import {themes, defaultTheme} from '../types/HyperspaceTheme'; import ThemePreview from '../components/ThemePreview'; import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes'; -import { Visibility, toVisibility } from '../types/Visibility'; +import { Visibility } from '../types/Visibility'; interface ISettingsState { darkModeEnabled: boolean; + systemDecidesDarkMode: boolean; pushNotificationsEnabled: boolean; badgeDisplaysAllNotifs: boolean; selectThemeName: string; @@ -50,6 +51,7 @@ class SettingsPage extends Component { this.state = { darkModeEnabled: getUserDefaultBool('darkModeEnabled'), + systemDecidesDarkMode: getUserDefaultBool('systemDecidesDarkMode'), pushNotificationsEnabled: canSendNotifications(), badgeDisplaysAllNotifs: getUserDefaultBool('displayAllOnNotificationBadge'), selectThemeName: getUserDefaultTheme().key, @@ -62,6 +64,7 @@ class SettingsPage extends Component { } this.toggleDarkMode = this.toggleDarkMode.bind(this); + this.toggleSystemDarkMode = this.toggleSystemDarkMode.bind(this); this.togglePushNotifications = this.togglePushNotifications.bind(this); this.toggleBadgeCount = this.toggleBadgeCount.bind(this); this.toggleThemeDialog = this.toggleThemeDialog.bind(this); @@ -77,6 +80,12 @@ class SettingsPage extends Component { window.location.reload(); } + toggleSystemDarkMode() { + this.setState({ systemDecidesDarkMode: !this.state.systemDecidesDarkMode }); + setUserDefaultBool('systemDecidesDarkMode', !this.state.systemDecidesDarkMode); + window.location.reload(); + } + togglePushNotifications() { this.setState({ pushNotificationsEnabled: !this.state.pushNotificationsEnabled }); setUserDefaultBool('enablePushNotifications', !this.state.pushNotificationsEnabled); @@ -269,10 +278,23 @@ class SettingsPage extends Component { Appearance + + + + + + - + diff --git a/src/types/HyperspaceTheme.tsx b/src/types/HyperspaceTheme.tsx index 4704061..d7797ac 100644 --- a/src/types/HyperspaceTheme.tsx +++ b/src/types/HyperspaceTheme.tsx @@ -1,5 +1,5 @@ import {Color} from '@material-ui/core'; -import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink, brown } from '@material-ui/core/colors'; +import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink, brown, blueGrey } from '@material-ui/core/colors'; /** * Basic theme colors for Hyperspace. @@ -8,8 +8,12 @@ export type HyperspaceTheme = { key: string; name: string; palette: { - primary: Color; - secondary: Color; + primary: { + main: string; + } | Color; + secondary: { + main: string; + } | Color; } } @@ -116,9 +120,24 @@ export const blissTheme: HyperspaceTheme = { key: "blissTheme", name: "Bliss", palette: { - primary: brown, + primary: { + main: "#3e2723" + }, secondary: lightBlue } } -export const themes = [defaultTheme, gardenerTheme, teacherTheme, jokerTheme, brotherTheme, guardTheme, scientistTheme, entertainerTheme, kingTheme, dragonTheme, memoriumTheme, blissTheme] \ No newline at end of file +export const attractTheme: HyperspaceTheme = { + key: "attractTheme", + name: "Attract", + palette: { + primary: { + main: '#f5f5f5', + }, + secondary: { + main: "#1a237e", + } + } +} + +export const themes = [defaultTheme, gardenerTheme, teacherTheme, jokerTheme, brotherTheme, guardTheme, scientistTheme, entertainerTheme, kingTheme, dragonTheme, memoriumTheme, blissTheme, attractTheme] \ No newline at end of file diff --git a/src/utilities/settings.tsx b/src/utilities/settings.tsx index 5258b22..17ad3ef 100644 --- a/src/utilities/settings.tsx +++ b/src/utilities/settings.tsx @@ -7,9 +7,11 @@ import { Visibility } from "../types/Visibility"; type SettingsTemplate = { [key:string]: any; darkModeEnabled: boolean; + systemDecidesDarkMode: boolean; enablePushNotifications: boolean; clearNotificationsOnRead: boolean; displayAllOnNotificationBadge: boolean; + defaultVisibility: string; } /** @@ -89,13 +91,14 @@ export function setUserDefaultTheme(themeName: string) { export function createUserDefaults() { let defaults: SettingsTemplate = { darkModeEnabled: false, + systemDecidesDarkMode: true, enablePushNotifications: true, clearNotificationsOnRead: false, displayAllOnNotificationBadge: false, defaultVisibility: "public" } - let settings = ["darkModeEnabled", "clearNotificationsOnRead", "displayAllOnNotificationBadge", "defaultVisibility"]; + let settings = ["darkModeEnabled", "systemDecidesDarkMode", "clearNotificationsOnRead", "displayAllOnNotificationBadge", "defaultVisibility"]; settings.forEach((setting: string) => { if (localStorage.getItem(setting) === null) { if (typeof defaults[setting] === "boolean") { diff --git a/src/utilities/themes.tsx b/src/utilities/themes.tsx index 39e1d8f..41a57b8 100644 --- a/src/utilities/themes.tsx +++ b/src/utilities/themes.tsx @@ -42,11 +42,24 @@ export function setHyperspaceTheme(theme: HyperspaceTheme): Theme { palette: { primary: theme.palette.primary, secondary: theme.palette.secondary, - type: getUserDefaultBool('darkModeEnabled')? "dark": "light" + type: getUserDefaultBool('darkModeEnabled')? "dark": + getDarkModeFromSystem() === "dark"? "dark": "light" } }) } +export function getDarkModeFromSystem(): string { + if (getUserDefaultBool('systemDecidesDarkMode')) { + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + return "dark"; + } else { + return "light"; + } + } else { + return "light"; + } +} + /** * 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