Fix issue2534

browser/main/Main.js

@@ -16,7 +16,7 @@ import { store } from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
-import uiThemes from 'browser/lib/ui-themes'
+import { chooseTheme, applyTheme } from 'browser/main/lib/ThemeManager'
 import { push } from 'connected-react-router'
 
 const path = require('path')
@@ -148,11 +148,12 @@ class Main extends React.Component {
   componentDidMount() {
     const { dispatch, config } = this.props
 
-    if (uiThemes.some(theme => theme.name === config.ui.theme)) {
-      document.body.setAttribute('data-theme', config.ui.theme)
-    } else {
-      document.body.setAttribute('data-theme', 'default')
-    }
+    this.refreshTheme = setInterval(() => {
+      chooseTheme(ConfigManager.get().ui)
+    }, 5 * 1000)
+
+    chooseTheme(config.ui)
+    applyTheme(config.ui.theme)
 
     if (getLocales().indexOf(config.ui.language) !== -1) {
       i18n.setLocale(config.ui.language)
@@ -189,6 +190,7 @@ class Main extends React.Component {
       'menubar:togglemenubar',
       this.toggleMenuBarVisible.bind(this)
     )
+    clearInterval(this.refreshTheme)
   }
 
   toggleMenuBarVisible() {

browser/main/lib/ConfigManager.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
-import uiThemes from 'browser/lib/ui-themes'
+import { chooseTheme, applyTheme } from 'browser/main/lib/ThemeManager'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -47,6 +47,11 @@ export const DEFAULT_CONFIG = {
   ui: {
     language: 'en',
     theme: 'default',
+    defaultTheme: 'default',
+    enableScheduleTheme: false,
+    scheduledTheme: 'monokai',
+    scheduleStart: 1200,
+    scheduleEnd: 360,
     showCopyNotification: true,
     disableDirectWrite: false,
     showScrollBar: true,
@@ -199,11 +204,8 @@ function set(updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
-    document.body.setAttribute('data-theme', newConfig.ui.theme)
-  } else {
-    document.body.setAttribute('data-theme', 'default')
-  }
+  chooseTheme(newConfig.ui)
+  applyTheme(newConfig.ui.theme)
 
   i18n.setLocale(newConfig.ui.language)
 

browser/main/lib/ThemeManager.js

@@ -0,0 +1,51 @@
+const chooseTheme = ui => {
+  if (!ui.enableScheduleTheme) {
+    return
+  }
+
+  const start = parseInt(ui.scheduleStart)
+  const end = parseInt(ui.scheduleEnd)
+
+  const now = new Date()
+  const minutes = now.getHours() * 60 + now.getMinutes()
+
+  const isEndAfterStart = end > start
+  const isBetweenStartAndEnd = minutes >= start && minutes < end
+  const isBetweenEndAndStart = minutes >= start || minutes < end
+
+  if (
+    (isEndAfterStart && isBetweenStartAndEnd) ||
+    (!isEndAfterStart && isBetweenEndAndStart)
+  ) {
+    if (ui.theme !== ui.scheduledTheme) {
+      ui.defaultTheme = ui.theme
+      ui.theme = ui.scheduledTheme
+      applyTheme(ui.theme)
+    }
+  } else {
+    if (ui.theme !== ui.defaultTheme) {
+      ui.theme = ui.defaultTheme
+      applyTheme(ui.theme)
+    }
+  }
+}
+
+const applyTheme = theme => {
+  const supportedThemes = [
+    'dark',
+    'white',
+    'solarized-dark',
+    'monokai',
+    'dracula'
+  ]
+  if (supportedThemes.indexOf(theme) !== -1) {
+    document.body.setAttribute('data-theme', theme)
+  } else {
+    document.body.setAttribute('data-theme', 'default')
+  }
+}
+
+module.exports = {
+  chooseTheme,
+  applyTheme
+}

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,5 +1,109 @@
 @import('./Tab')
 
+.container
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  position relative
+  margin-bottom 2em
+  margin-left 2em
+
+.box-minmax
+  width 608px
+  height 45px
+  display flex
+  justify-content space-between
+  font-size $tab--button-font-size
+  color $ui-text-color
+  span first-child
+  margin-top 18px
+  padding-right 10px
+  padding-left  10px
+  padding-top 8px
+  position relative
+  border $ui-borderColor
+  border-radius 5px
+  background $ui-backgroundColor
+
+div[id^="secondRow"]
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -42px
+  .rs-label
+    margin-left -20px
+
+div[id^="firstRow"]
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -25px
+  .rs-range
+      &::-webkit-slider-thumb
+        margin-top 0px
+        transform rotate(180deg)
+  .rs-label
+    margin-bottom -85px
+    margin-top 85px
+
+
+.rs-range
+  margin-top 29px
+  width 600px
+  -webkit-appearance none
+  &:focus
+    outline black
+  &::-webkit-slider-runnable-track
+    width 100%
+    height 0.1px
+    cursor pointer
+    box-shadow none
+    background $ui-backgroundColor
+    border-radius 0px
+    border 0px solid #010101
+    cursor none
+
+  &::-webkit-slider-thumb
+    box-shadow none
+    border 1px solid $ui-borderColor
+    box-shadow 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height 32px
+    width 32px
+    border-radius 22px
+    background white
+    cursor pointer
+    -webkit-appearance none
+    margin-top -20px
+    border-color $ui-default-button-backgroundColor
+    height 32px
+    border-top-left-radius 10%
+    border-top-right-radius 10%
+
+.rs-label
+  position relative
+  transform-origin center center
+  display block
+  background transparent
+  border-radius none
+  line-height 30px
+  font-weight normal
+  box-sizing border-box
+  border none
+  margin-bottom -5px
+  margin-top -10px
+  clear both
+  float left
+  height 17px
+  margin-left -25px
+  left attr(value)
+  color $ui-text-color
+  font-style normal
+  font-weight normal
+  line-height normal
+  font-size $tab--button-font-size
 .root
   padding 15px
   margin-bottom 30px
@@ -175,6 +279,9 @@ body[data-theme="dark"]
   .group-section-control
     select, .group-section-control-input
       colorDarkControl()
+  .rs-label
+    color $ui-dark-text-color
+
 
 apply-theme(theme)
   body[data-theme={theme}]
@@ -205,6 +312,8 @@ apply-theme(theme)
     .group-section-control
       select, .group-section-control-input
         colorThemedControl(theme)
+    .rs-label
+      color get-theme-var(theme, 'text-color')
 
 for theme in 'solarized-dark' 'dracula'
   apply-theme(theme)

browser/main/modals/PreferencesModal/UiTab.js

@@ -84,6 +84,11 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        defaultTheme: this.refs.uiTheme.value,
+        enableScheduleTheme: this.refs.enableScheduleTheme.checked,
+        scheduledTheme: this.refs.uiScheduledTheme.value,
+        scheduleStart: this.refs.scheduleStart.value,
+        scheduleEnd: this.refs.scheduleEnd.value,
         language: this.refs.uiLanguage.value,
         defaultNote: this.refs.defaultNote.value,
         tagNewNoteWithFilteringTags: this.refs.tagNewNoteWithFilteringTags
@@ -207,6 +212,21 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
+  formatTime(time) {
+    let hour = Math.floor(time / 60)
+    let minute = time % 60
+
+    if (hour < 10) {
+      hour = '0' + hour
+    }
+
+    if (minute < 10) {
+      minute = '0' + minute
+    }
+
+    return `${hour}:${minute}`
+  }
+
   render() {
     const UiAlert = this.state.UiAlert
     const UiAlertElement =
@@ -231,7 +251,7 @@ class UiTab extends React.Component {
             </div>
             <div styleName='group-section-control'>
               <select
-                value={config.ui.theme}
+                value={config.ui.defaultTheme}
                 onChange={e => this.handleUIChange(e)}
                 ref='uiTheme'
               >
@@ -262,6 +282,101 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-header2'>{i18n.__('Theme Schedule')}</div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input
+                onChange={e => this.handleUIChange(e)}
+                checked={config.ui.enableScheduleTheme}
+                ref='enableScheduleTheme'
+                type='checkbox'
+              />
+              &nbsp;
+              {i18n.__('Enable Scheduled Themes')}
+            </label>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Scheduled Theme')}
+            </div>
+            <div styleName='group-section-control'>
+              <select
+                disabled={!config.ui.enableScheduleTheme}
+                value={config.ui.scheduledTheme}
+                onChange={e => this.handleUIChange(e)}
+                ref='uiScheduledTheme'
+              >
+                <optgroup label='Light Themes'>
+                  {uiThemes
+                    .filter(theme => !theme.isDark)
+                    .sort((a, b) => a.label.localeCompare(b.label))
+                    .map(theme => {
+                      return (
+                        <option value={theme.name} key={theme.name}>
+                          {theme.label}
+                        </option>
+                      )
+                    })}
+                </optgroup>
+                <optgroup label='Dark Themes'>
+                  {uiThemes
+                    .filter(theme => theme.isDark)
+                    .sort((a, b) => a.label.localeCompare(b.label))
+                    .map(theme => {
+                      return (
+                        <option value={theme.name} key={theme.name}>
+                          {theme.label}
+                        </option>
+                      )
+                    })}
+                </optgroup>
+              </select>
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='container'>
+              <div id='firstRow'>
+                <span
+                  id='rs-bullet-1'
+                  styleName='rs-label'
+                >{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
+                <input
+                  disabled={!config.ui.enableScheduleTheme}
+                  id='rs-range-line-1'
+                  styleName='rs-range'
+                  type='range'
+                  value={config.ui.scheduleEnd}
+                  min='0'
+                  max='1440'
+                  step='5'
+                  ref='scheduleEnd'
+                  onChange={e => this.handleUIChange(e)}
+                />
+              </div>
+              <div id='secondRow'>
+                <span
+                  id='rs-bullet-2'
+                  styleName='rs-label'
+                >{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
+                <input
+                  disabled={!config.ui.enableScheduleTheme}
+                  id='rs-range-line-2'
+                  styleName='rs-range'
+                  type='range'
+                  value={config.ui.scheduleStart}
+                  min='0'
+                  max='1440'
+                  step='5'
+                  ref='scheduleStart'
+                  onChange={e => this.handleUIChange(e)}
+                />
+              </div>
+              <div styleName='box-minmax'>
+                <span>00:00</span>
+                <span>24:00</span>
+              </div>
+            </div>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Language')}</div>