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;