From 11f395f65f88d0921a31503c9f13c64e96acc34c Mon Sep 17 00:00:00 2001 From: Gregory Anders <8965202+gpanders@users.noreply.github.com> Date: Mon, 3 Jan 2022 06:16:43 -0700 Subject: [PATCH] Add toggle to use browser's preferred theme (#224) * Add Auto theme that uses browser's preferred color scheme This will use dark mode automatically if the browser requests it. * fixup! Add Auto theme that uses browser's preferred color scheme * Use a toggle to use system theme --- src/app/organisms/settings/Settings.jsx | 38 +++++++++++++++++-------- src/client/action/settings.js | 6 ++++ src/client/state/cons.js | 2 ++ src/client/state/settings.js | 28 ++++++++++++++++++ src/index.scss | 14 +++++++-- 5 files changed, 74 insertions(+), 14 deletions(-) diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index e31af8f..9a3db0f 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -5,7 +5,7 @@ import './Settings.scss'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import settings from '../../../client/state/settings'; -import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings'; +import { toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings'; import logout from '../../../client/action/logout'; import Text from '../../atoms/text/Text'; @@ -49,20 +49,34 @@ function AppearanceSection() { return (
settings.setTheme(index)} + title="Follow system theme" + options={( + { toggleSystemTheme(); updateState({}); }} /> )} + content={Use light or dark mode based on the system's settings.} /> + {(() => { + if (!settings.useSystemTheme) { + return settings.setTheme(index)} + /> + )} + /> + } + })()} { + this.useSystemTheme = !this.useSystemTheme; + setSettings('useSystemTheme', this.useSystemTheme); + const appBody = document.getElementById('appBody'); + + if (this.useSystemTheme) { + appBody.classList.add('system-theme'); + this.themes.forEach((themeName) => { + if (themeName === '') return; + appBody.classList.remove(themeName); + }); + } else { + appBody.classList.remove('system-theme'); + this.setTheme(this.themeIndex); + } + + this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme); + }, [cons.actions.settings.TOGGLE_MARKDOWN]: () => { this.isMarkdown = !this.isMarkdown; setSettings('isMarkdown', this.isMarkdown); diff --git a/src/index.scss b/src/index.scss index 52688e8..e24af32 100644 --- a/src/index.scss +++ b/src/index.scss @@ -202,8 +202,7 @@ --bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0); } -.dark-theme, -.butter-theme { +@mixin dark-mode() { /* background color | --bg-[background type]: value */ --bg-surface: hsl(208, 8%, 20%); --bg-surface-transparent: hsla(208, 8%, 20%, 0); @@ -290,6 +289,17 @@ --font-secondary: 'Inter', 'Roboto', sans-serif; } +.dark-theme, +.butter-theme { + @include dark-mode(); +} + +@media (prefers-color-scheme: dark) { + .system-theme { + @include dark-mode(); + } +} + .butter-theme { /* background color | --bg-[background type]: value */ --bg-surface: hsl(64, 6%, 14%);