Merge pull request #545 from pulsar-edit/change-window-theme

Change Window Theme with Pulsar Theme

src/application-delegate.js

@@ -27,6 +27,10 @@ module.exports = class ApplicationDelegate {
     return ipcRenderer.send('open', params);
   }
 
+  setWindowTheme(params) {
+    return ipcRenderer.send('setWindowTheme', params);
+  }
+
   pickFolder(callback) {
     const responseChannel = 'atom-pick-folder-response';
     ipcRenderer.on(responseChannel, function(event, path) {

src/atom-environment.js

@@ -145,7 +145,8 @@ class AtomEnvironment {
       config: this.config,
       styleManager: this.styles,
       notificationManager: this.notifications,
-      viewRegistry: this.views
+      viewRegistry: this.views,
+      applicationDelegate: this.applicationDelegate
     });
 
     /** @type {MenuManager} */

src/config-schema.js

@@ -399,6 +399,11 @@ const configSchema = {
         description: 'Add the current tab title to the Pulsar Window title.',
         type: 'boolean',
         default: true
+      },
+      syncWindowThemeWithPulsarTheme: {
+        description: 'When changing the theme within Pulsar also change the theme of the window on the operating system.',
+        type: 'boolean',
+        default: false
       }
     }
   },

src/main-process/atom-application.js

@@ -16,7 +16,8 @@ const {
   dialog,
   ipcMain,
   shell,
-  screen
+  screen,
+  nativeTheme
 } = require('electron');
 const { CompositeDisposable, Disposable } = require('event-kit');
 const crypto = require('crypto');
@@ -803,6 +804,14 @@ module.exports = class AtomApplication extends EventEmitter {
       })
     );
 
+    this.disposable.add(
+      ipcHelpers.on(ipcMain, 'setWindowTheme', (event, options) => {
+        if (options && typeof options === 'string') {
+          nativeTheme.themeSource = options;
+        }
+      })
+    );
+
     // A request from the associated render process to open a set of paths using the standard window location logic.
     // Used for application:reopen-project.
     this.disposable.add(

src/theme-manager.js

@@ -6,6 +6,7 @@ const { Emitter, CompositeDisposable } = require('event-kit');
 const { File } = require('pathwatcher');
 const fs = require('fs-plus');
 const LessCompileCache = require('./less-compile-cache');
+const Color = require('./color');
 
 // Extended: Handles loading and activating available themes.
 //
@@ -16,8 +17,10 @@ module.exports = class ThemeManager {
     config,
     styleManager,
     notificationManager,
-    viewRegistry
+    viewRegistry,
+    applicationDelegate
   }) {
+    this.applicationDelegate = applicationDelegate;
     this.packageManager = packageManager;
     this.config = config;
     this.styleManager = styleManager;
@@ -372,6 +375,20 @@ On linux there are currently problems with watch sizes. See
     return this.styleSheetDisposablesBySourcePath[path];
   }
 
+  refreshWindowTheme() {
+    let bgColor = Color.parse(getComputedStyle(document.documentElement).backgroundColor);
+
+    let luminosity = 0.2126 * bgColor.red + 0.7152 * bgColor.green + 0.0722 * bgColor.blue;
+    // ^^ Luminosity per ITU-R BT.709
+    if (luminosity < 40) {
+      // Considered Dark
+      this.applicationDelegate.setWindowTheme("dark");
+    } else {
+      // Considered Bright
+      this.applicationDelegate.setWindowTheme("light");
+    }
+  }
+
   activateThemes() {
     return new Promise(resolve => {
       // @config.observe runs the callback once, then on subsequent changes.
@@ -396,6 +413,9 @@ On linux there are currently problems with watch sizes. See
             this.refreshLessCache(); // Update cache again now that @getActiveThemes() is populated
             this.loadUserStylesheet();
             this.reloadBaseStylesheets();
+            if (this.config.get("editor.syncWindowThemeWithPulsarTheme")) {
+              this.refreshWindowTheme();
+            }
             this.initialLoadComplete = true;
             this.emitter.emit('did-change-active-themes');
             resolve();