src/ui/constants/settings.js

@@ -20,3 +20,4 @@ export const SUPPORT_OPTION = 'supportOption';
 export const HIDE_BALANCE = 'hideBalance';
 export const HIDE_SPLASH_ANIMATION = 'hideSplashAnimation';
 export const FLOATING_PLAYER = 'floatingPlayer';
+export const DARK_MODE_TIMES = 'darkModeTimes';

src/ui/page/settings/view.jsx

@@ -422,6 +422,34 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     checked={automaticDarkModeEnabled}
                     label={__('Automatic dark mode (9pm to 8am)')}
                   />
+                  <FormField
+                    type="select"
+                    name="automatic_dark_mode_range"
+                    // onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
+                    // checked={automaticDarkModeEnabled}
+                    disabled={!automaticDarkModeEnabled}
+                    label={__('from:')}
+                  >
+                    {['18:00', '19:00', '20:00', '21:00'].map(time => (
+                      <option key={time} value={time}>
+                        {time}
+                      </option>
+                    ))}
+                  </FormField>
+                  <FormField
+                    type="select"
+                    name="automatic_dark_mode_range"
+                    // onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
+                    // checked={automaticDarkModeEnabled}
+                    disabled={!automaticDarkModeEnabled}
+                    label={__('To:')}
+                  >
+                    {['5:00', '6:00', '7:00', '8:00'].map(time => (
+                      <option key={time} value={time}>
+                        {time}
+                      </option>
+                    ))}
+                  </FormField>
                 </fieldset-section>
               </Form>
             </section>

src/ui/redux/actions/settings.js

@@ -4,7 +4,6 @@ import http from 'http';
 // @endif
 import { Lbry, ACTIONS, SETTINGS } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import moment from 'moment';
 import analytics from 'analytics';
 
 const UPDATE_IS_NIGHT_INTERVAL = 10 * 60 * 1000;
@@ -60,16 +59,8 @@ export function doGetThemes() {
 }
 
 export function doUpdateIsNight() {
-  const momentNow = moment();
   return {
     type: ACTIONS.UPDATE_IS_NIGHT,
-    data: {
-      isNight: (() => {
-        const startNightMoment = moment('21:00', 'HH:mm');
-        const endNightMoment = moment('8:00', 'HH:mm');
-        return !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment));
-      })(),
-    },
   };
 }
 

src/ui/redux/reducers/settings.js

@@ -1,6 +1,7 @@
 import * as ACTIONS from 'constants/action_types';
 import LANGUAGES from 'constants/languages';
 import * as SETTINGS from 'constants/settings';
+import moment from 'moment';
 
 function getLocalStorageSetting(setting, fallback) {
   const localStorageVal = localStorage.getItem(`setting_${setting}`);
@@ -32,6 +33,7 @@ const defaultState = {
     [SETTINGS.HIDE_BALANCE]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_BALANCE, false)),
     [SETTINGS.HIDE_SPLASH_ANIMATION]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_SPLASH_ANIMATION, false)),
     [SETTINGS.FLOATING_PLAYER]: Boolean(getLocalStorageSetting(SETTINGS.FLOATING_PLAYER, true)),
+    [SETTINGS.DARK_MODE_TIMES]: getLocalStorageSetting(SETTINGS.DARK_MODE_TIMES, { from: '21:00', to: '8:00' }),
   },
   isNight: false,
   languages: { en: 'English', pl: 'Polish', id: 'Bahasa Indonesia' }, // temporarily hard code these so we can advance i18n testing
@@ -59,10 +61,19 @@ reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
   });
 };
 
-reducers[ACTIONS.UPDATE_IS_NIGHT] = (state, action) =>
-  Object.assign({}, state, {
-    isNight: action.data.isNight,
+reducers[ACTIONS.UPDATE_IS_NIGHT] = state => {
+  const momentNow = moment();
+  const { from, to } = state.settings.clientSettings.darkModeTimes;
+
+  const startNightMoment = moment(from, 'HH:mm');
+  const endNightMoment = moment(to, 'HH:mm');
+
+  const isNight = !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment));
+
+  return Object.assign({}, state, {
+    isNight,
   });
+};
 
 reducers[ACTIONS.DOWNLOAD_LANGUAGE_SUCCEEDED] = (state, action) => {
   const languages = Object.assign({}, state.languages);