diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js index 5035d0bb..e3ef4220 100644 --- a/app/components/DropdownMenu/DropdownMenuItem.js +++ b/app/components/DropdownMenu/DropdownMenuItem.js @@ -26,7 +26,11 @@ const DropdownMenuItem = ({ {...rest} > {selected !== undefined && ( - + +   + )} {children} diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js index 0b75c1ee..f28bda62 100644 --- a/app/stores/UiStore.js +++ b/app/stores/UiStore.js @@ -9,7 +9,10 @@ import type { Toast } from '../types'; const UI_STORE = 'UI_STORE'; class UiStore { + // theme represents the users UI preference (defaults to system) @observable theme: 'light' | 'dark' | 'system'; + + // systemTheme represents the system UI theme (Settings -> General in macOS) @observable systemTheme: 'light' | 'dark'; @observable activeModalName: ?string; @observable activeModalProps: ?Object; @@ -30,15 +33,18 @@ class UiStore { // no-op Safari private mode } - let colorSchemeQueryList = window.matchMedia( + // system theme listeners + const colorSchemeQueryList = window.matchMedia( '(prefers-color-scheme: dark)' ); + const setSystemTheme = event => { this.systemTheme = event.matches ? 'dark' : 'light'; }; - setSystemTheme(colorSchemeQueryList); - colorSchemeQueryList.addListener(setSystemTheme); + if (colorSchemeQueryList.addListener) { + colorSchemeQueryList.addListener(setSystemTheme); + } // persisted keys this.tocVisible = data.tocVisible;