Make system setting the default theme preference (#1581)

* Make system setting the default theme preference * Update Release Notes * Make system the first item in the list * Update system theme logic
Automattic · Oct 16, 2019 · 7e6c067 · 7e6c067
1 parent 2b6eb87
commit 7e6c067
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -2,6 +2,10 @@
 
 ## Future release
 
+### Enhancements
+
+ - Add ability to select system as a theme option and make it the default
+
 ### Fixes
 
  - Rework WordPress.com signin to prevent infinite looping and login failures [#1627](https://github.com/Automattic/simplenote-electron/pull/1627)

diff --git a/lib/app.jsx b/lib/app.jsx
@@ -309,8 +309,20 @@ export const App = connect(
         preferencesBucket: this.props.preferencesBucket,
       });
 
+    getSystemColorMode = () =>
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+    getTheme = () => {
+      const {
+        settings: { theme },
+      } = this.props;
+      return 'system' === theme ? this.getSystemColorMode() : theme;
+    };
+
     initializeElectron = () => {
-      const remote = __non_webpack_require__('electron').remote; // eslint-disable-line no-undef
+      const { remote } = __non_webpack_require__('electron'); // eslint-disable-line no-undef
 
       this.setState({
         electron: {
@@ -404,7 +416,7 @@ export const App = connect(
       } = this.props;
       const isMacApp = isElectronMac();
 
-      const themeClass = `theme-${settings.theme}`;
+      const themeClass = `theme-${this.getTheme()}`;
 
       const appClasses = classNames('app', themeClass, {
         'is-line-length-full': settings.lineLength === 'full',

diff --git a/lib/dialogs/settings-group.jsx b/lib/dialogs/settings-group.jsx
@@ -27,11 +27,13 @@ export const SettingsGroup = ({
     </a>
   );
 
+  const childElements = React.Children.toArray(children).filter(o => o);
+
   return (
     <div className="settings-group">
       <PanelTitle headingLevel="3">{groupTitle}</PanelTitle>
       <div className="settings-items theme-color-border">
-        {React.Children.map(children, ({ props: { slug, title } }) => (
+        {childElements.map(({ props: { slug, title } }) => (
           <label
             className="settings-item theme-color-border"
             htmlFor={`settings-field-${groupSlug}-${slug}`}

diff --git a/lib/dialogs/settings/panels/display.jsx b/lib/dialogs/settings/panels/display.jsx
@@ -102,6 +102,9 @@ const DisplayPanel = props => {
         onChange={actions.activateTheme}
         renderer={RadioGroup}
       >
+        {navigator.userAgent.toLowerCase().indexOf(' electron/') === -1 && (
+          <Item title="System" slug="system" />
+        )}
         <Item title="Light" slug="light" />
         <Item title="Dark" slug="dark" />
       </SettingsGroup>

diff --git a/lib/state/settings/reducer.js b/lib/state/settings/reducer.js
@@ -11,7 +11,7 @@ export const initialState = {
   sortTagsAlpha: false,
   sortType: 'modificationDate',
   spellCheckEnabled: true,
-  theme: 'light',
+  theme: 'system',
   wpToken: false,
 };