From 8d0947d078b0a6ded1baff475d4662bcf0a11994 Mon Sep 17 00:00:00 2001 From: Jonathan Belcher Date: Mon, 23 Sep 2019 14:48:47 -0400 Subject: [PATCH 1/4] Make system setting the default theme preference --- desktop/menus/view-menu.js | 4 ++++ lib/app.jsx | 3 ++- lib/dialogs/settings/panels/display.jsx | 1 + lib/state/settings/reducer.js | 2 +- lib/utils/get-theme.js | 12 ++++++++++++ 5 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 lib/utils/get-theme.js diff --git a/desktop/menus/view-menu.js b/desktop/menus/view-menu.js index 2e34e9338..eb8bf997a 100644 --- a/desktop/menus/view-menu.js +++ b/desktop/menus/view-menu.js @@ -106,6 +106,10 @@ const buildViewMenu = settings => { label: '&Dark', id: 'dark', }, + { + label: '&System', + id: 'system', + }, ].map( buildRadioGroup({ action: 'activateTheme', diff --git a/lib/app.jsx b/lib/app.jsx index b9e8dfbd7..bffea934e 100644 --- a/lib/app.jsx +++ b/lib/app.jsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import getTheme from './utils/get-theme'; import 'focus-visible/dist/focus-visible.js'; import appState from './flux/app-state'; import { loadTags } from './state/domain/tags'; @@ -404,7 +405,7 @@ export const App = connect( } = this.props; const isMacApp = isElectronMac(); - const themeClass = `theme-${settings.theme}`; + const themeClass = `theme-${getTheme(settings.theme, isElectron())}`; const appClasses = classNames('app', themeClass, { 'is-line-length-full': settings.lineLength === 'full', diff --git a/lib/dialogs/settings/panels/display.jsx b/lib/dialogs/settings/panels/display.jsx index ca94b44cd..6926c8d97 100644 --- a/lib/dialogs/settings/panels/display.jsx +++ b/lib/dialogs/settings/panels/display.jsx @@ -104,6 +104,7 @@ const DisplayPanel = props => { > + ); diff --git a/lib/state/settings/reducer.js b/lib/state/settings/reducer.js index 8717b28d7..400de1b8b 100644 --- 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, }; diff --git a/lib/utils/get-theme.js b/lib/utils/get-theme.js new file mode 100644 index 000000000..7dcef6484 --- /dev/null +++ b/lib/utils/get-theme.js @@ -0,0 +1,12 @@ +export default (themeSetting, isElectron) => { + if (themeSetting === 'system') { + if (isElectron) { + const { remote } = __non_webpack_require__('electron'); // eslint-disable-line no-undef + return remote.systemPreferences.isDarkMode ? 'dark' : 'light'; + } + return window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; + } + return themeSetting; +}; From 1e9bed905a205d31527d94ecf9eb34843dafa1c5 Mon Sep 17 00:00:00 2001 From: Jonathan Belcher Date: Mon, 23 Sep 2019 15:03:06 -0400 Subject: [PATCH 2/4] Update Release Notes --- RELEASE-NOTES.txt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt index 9b0eebbe8..bf9d837b0 100644 --- 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) From e862ed45090af11c23fe035c2e72279581ebab6b Mon Sep 17 00:00:00 2001 From: belcherj Date: Mon, 7 Oct 2019 15:16:17 -0400 Subject: [PATCH 3/4] Make system the first item in the list --- desktop/menus/view-menu.js | 8 ++++---- lib/dialogs/settings/panels/display.jsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/desktop/menus/view-menu.js b/desktop/menus/view-menu.js index eb8bf997a..d2fc84400 100644 --- a/desktop/menus/view-menu.js +++ b/desktop/menus/view-menu.js @@ -98,6 +98,10 @@ const buildViewMenu = settings => { { label: 'T&heme', submenu: [ + { + label: '&System', + id: 'system', + }, { label: '&Light', id: 'light', @@ -106,10 +110,6 @@ const buildViewMenu = settings => { label: '&Dark', id: 'dark', }, - { - label: '&System', - id: 'system', - }, ].map( buildRadioGroup({ action: 'activateTheme', diff --git a/lib/dialogs/settings/panels/display.jsx b/lib/dialogs/settings/panels/display.jsx index 6926c8d97..02088befd 100644 --- a/lib/dialogs/settings/panels/display.jsx +++ b/lib/dialogs/settings/panels/display.jsx @@ -102,9 +102,9 @@ const DisplayPanel = props => { onChange={actions.activateTheme} renderer={RadioGroup} > + - ); From 644ed533704559309390a9b1cbf811d6bc56e987 Mon Sep 17 00:00:00 2001 From: Jonathan Belcher Date: Tue, 15 Oct 2019 14:53:57 -0400 Subject: [PATCH 4/4] Update system theme logic --- desktop/menus/view-menu.js | 4 ---- lib/app.jsx | 17 ++++++++++++++--- lib/dialogs/settings-group.jsx | 4 +++- lib/dialogs/settings/panels/display.jsx | 4 +++- lib/utils/get-theme.js | 12 ------------ 5 files changed, 20 insertions(+), 21 deletions(-) delete mode 100644 lib/utils/get-theme.js diff --git a/desktop/menus/view-menu.js b/desktop/menus/view-menu.js index d2fc84400..2e34e9338 100644 --- a/desktop/menus/view-menu.js +++ b/desktop/menus/view-menu.js @@ -98,10 +98,6 @@ const buildViewMenu = settings => { { label: 'T&heme', submenu: [ - { - label: '&System', - id: 'system', - }, { label: '&Light', id: 'light', diff --git a/lib/app.jsx b/lib/app.jsx index bffea934e..b51f04b54 100644 --- a/lib/app.jsx +++ b/lib/app.jsx @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import getTheme from './utils/get-theme'; import 'focus-visible/dist/focus-visible.js'; import appState from './flux/app-state'; import { loadTags } from './state/domain/tags'; @@ -310,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: { @@ -405,7 +416,7 @@ export const App = connect( } = this.props; const isMacApp = isElectronMac(); - const themeClass = `theme-${getTheme(settings.theme, isElectron())}`; + 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 index 5aa2dc776..0749c0a1c 100644 --- a/lib/dialogs/settings-group.jsx +++ b/lib/dialogs/settings-group.jsx @@ -27,11 +27,13 @@ export const SettingsGroup = ({ ); + const childElements = React.Children.toArray(children).filter(o => o); + return (
{groupTitle}
- {React.Children.map(children, ({ props: { slug, title } }) => ( + {childElements.map(({ props: { slug, title } }) => (