src/renderer/page/settings/view.jsx

@@ -14,6 +14,8 @@ class SettingsPage extends React.PureComponent {
     this.state = {
       clearingCache: false,
     };
+
+    this.onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
   }
 
   clearCache() {
@@ -62,11 +64,16 @@ class SettingsPage extends React.PureComponent {
 
   onThemeChange(event) {
     const { value } = event.target;
+
+    if (value === 'dark') {
+      this.onAutomaticDarkModeChange(false);
+    }
+
     this.props.setClientSetting(settings.THEME, value);
   }
 
-  onAutomaticDarkModeChange(event) {
-    this.props.setClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED, event.target.checked);
+  onAutomaticDarkModeChange(value) {
+    this.props.setClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED, value);
   }
 
   onInstantPurchaseEnabledChange(enabled) {
@@ -143,6 +150,7 @@ class SettingsPage extends React.PureComponent {
         </main>
       );
     }
+
     return (
       <main className="main--single-column">
         <SubHeader />
@@ -325,8 +333,9 @@ class SettingsPage extends React.PureComponent {
 
             <FormRow
               type="checkbox"
-              onChange={this.onAutomaticDarkModeChange.bind(this)}
-              defaultChecked={automaticDarkModeEnabled}
+              disabled={theme === 'dark'}
+              onChange={(e) => this.onAutomaticDarkModeChange(e.target.checked)}
+              checked={automaticDarkModeEnabled}
               label={__('Automatic dark mode (9pm to 8am)')}
             />
           </div>