ThemeManager Created

Author: gregueiras

browser/main/Main.js

@@ -17,6 +17,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 theme from 'browser/main/lib/ThemeManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -140,13 +141,12 @@ class Main extends React.Component {
   componentDidMount () {
     const { dispatch, config } = this.props
 
-    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+    this.refreshTheme = setInterval(() => {
+      theme.choose(ConfigManager.get().ui)
+    }, 5 * 1000)
 
-    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
-      document.body.setAttribute('data-theme', config.ui.theme)
-    } else {
-      document.body.setAttribute('data-theme', 'default')
-    }
+    theme.choose(config.ui)
+    theme.apply(config.ui.theme)
 
     if (getLocales().indexOf(config.ui.language) !== -1) {
       i18n.setLocale(config.ui.language)

browser/main/lib/ConfigManager.js

@@ -2,6 +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 theme from 'browser/main/lib/ThemeManager'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -30,8 +31,9 @@ export const DEFAULT_CONFIG = {
   ui: {
     language: 'en',
     theme: 'default',
+    defaultTheme: 'default',
     enableScheduleTheme: false,
-    scheduledTheme: 'Monokai',
+    scheduledTheme: 'monokai',
     scheduleStart: 1200,
     scheduleEnd: 360,
     showCopyNotification: true,
@@ -149,19 +151,8 @@ function set (updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  if (newConfig.ui.theme === 'dark') {
-    document.body.setAttribute('data-theme', 'dark')
-  } else if (newConfig.ui.theme === 'white') {
-    document.body.setAttribute('data-theme', 'white')
-  } else if (newConfig.ui.theme === 'solarized-dark') {
-    document.body.setAttribute('data-theme', 'solarized-dark')
-  } else if (newConfig.ui.theme === 'monokai') {
-    document.body.setAttribute('data-theme', 'monokai')
-  } else if (newConfig.ui.theme === 'dracula') {
-    document.body.setAttribute('data-theme', 'dracula')
-  } else {
-    document.body.setAttribute('data-theme', 'default')
-  }
+  theme.choose(newConfig.ui)
+  theme.apply(newConfig.ui.theme)
 
   i18n.setLocale(newConfig.ui.language)
 

browser/main/lib/ThemeManager.js

@@ -0,0 +1,49 @@
+function choose (ui) {
+  console.log(ui.enableScheduleTheme)
+  if (ui.enableScheduleTheme !== 'on') {
+    return
+  }
+
+  const start = parseInt(ui.scheduleStart)
+  const end = parseInt(ui.scheduleEnd)
+
+  const now = new Date()
+  const minutes = now.getHours() * 60 + now.getMinutes()
+
+  console.log(ui.scheduleStart, minutes, ui.scheduleEnd)
+
+  if ((end > start && minutes >= start && minutes <= end) ||
+    (start > end && (minutes >= start || minutes <= end))) {
+    console.log('SC', ui.theme, ui.scheduledTheme)
+    if (ui.theme !== ui.scheduledTheme) {
+      ui.defaultTheme = ui.theme
+      ui.theme = ui.scheduledTheme
+      apply(ui.theme)
+    }
+
+    console.log(ui.defaultTheme, ui.theme)
+  } else {
+    console.log('TH', ui.theme, ui.defaultTheme)
+    if (ui.theme !== ui.defaultTheme) {
+      ui.theme = ui.defaultTheme
+      apply(ui.theme)
+    }
+
+    console.log(ui.theme)
+  }
+}
+
+function apply (theme) {
+  console.log('Apply ', 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')
+  }
+}
+
+export default {
+  choose,
+  apply
+}

browser/main/modals/PreferencesModal/UiTab.js

@@ -68,6 +68,7 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        defaultTheme: this.refs.uiTheme.value,
         enableScheduleTheme: this.refs.enableScheduleTheme.value,
         scheduledTheme: this.refs.uiScheduledTheme.value,
         scheduleStart: this.refs.scheduleStart.value,
@@ -203,8 +204,6 @@ class UiTab extends React.Component {
 
     if (e) {
       this.handleUIChange(e)
-    } else {
-      console.log('HEY')
     }
   }
 
@@ -231,7 +230,7 @@ class UiTab extends React.Component {
               {i18n.__('Interface Theme')}
             </div>
             <div styleName='group-section-control'>
-              <select value={config.ui.theme}
+              <select value={config.ui.defaultTheme}
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >