feat(styles): Add darkreader dark theme option (#2582)

Author: Anemy

package-lock.json

@@ -0,0 +1,11 @@
+import AmpersandModel from 'ampersand-model';
+
+export type CompassPreferencesModel = typeof AmpersandModel;
+
+export = CompassPreferencesModel;
+
+export enum THEMES {
+  DARK = 'DARK',
+  LIGHT = 'LIGHT',
+  OS_THEME = 'OS_THEME'
+};

packages/compass-preferences-model/index.d.ts

@@ -7,6 +7,12 @@ var electronApp = electron.remote ? electron.remote.app : undefined;
 
 var debug = require('debug')('mongodb-compass:models:preferences');
 
+var THEMES = {
+  DARK: 'DARK',
+  LIGHT: 'LIGHT',
+  OS_THEME: 'OS_THEME'
+};
+
 var preferencesProps = {
   /**
    * String identifier for this set of preferences. Default is `General`.
@@ -45,6 +51,15 @@ var preferencesProps = {
     required: true,
     default: false
   },
+  /**
+   * Stores the theme preference for the user.
+   * @type {String}
+   */
+  theme: {
+    type: 'string',
+    required: true,
+    default: THEMES.LIGHT
+  },
   /**
    * Stores a unique anonymous user ID (uuid) for the current user
    * @type {String}
@@ -296,3 +311,4 @@ var Preferences = Model.extend(storageMixin, {
 });
 
 module.exports = Preferences;
+module.exports.THEMES = THEMES;

packages/compass-preferences-model/lib/model.js

@@ -203,6 +203,7 @@
     "compass-preferences-model": "^1.15.0",
     "compass-user-model": "^1.15.0",
     "cross-env": "^7.0.3",
+    "darkreader": "^4.9.40",
     "debug": "4.3.0",
     "debug-menu": "^0.3.0",
     "depcheck": "^1.4.1",

packages/compass/package.json

@@ -34,7 +34,8 @@ var webvitals = require('web-vitals');
 
 var semver = require('semver');
 
-var Preferences = require('compass-preferences-model');
+const Preferences = require('compass-preferences-model');
+const { THEMES } = Preferences;
 var User = require('compass-user-model');
 
 require('./menu-renderer');
@@ -46,6 +47,7 @@ marky.stop('Migrations');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var { Action } = require('@mongodb-js/hadron-plugin-manager');
+const darkreader = require('darkreader');
 
 ipc.once('app:launched', function() {
   console.log('in app:launched');
@@ -65,6 +67,35 @@ window.addEventListener('error', (event) => {
       { message: event.message, stack: '<no stack available>' });
 });
 
+const darkreaderOptions = { brightness: 100, contrast: 90, sepia: 10 };
+function enableDarkTheme() {
+  darkreader.enable(darkreaderOptions);
+}
+
+function disableDarkTheme() {
+  darkreader.disable();
+}
+
+function loadTheme(theme) {
+  // Update main Compass when we've loaded the theme for setting app menus.
+  ipc.call('window:theme-loaded', theme);
+
+  if (theme === THEMES.OS_THEME
+    && electron.remote.nativeTheme.shouldUseDarkColors
+  ) {
+    enableDarkTheme();
+    return;
+  }
+
+  // Update our view based on the provided theme.
+  if (theme === THEMES.DARK) {
+    enableDarkTheme();
+    return;
+  }
+
+  disableDarkTheme();
+}
+
 /**
  * The top-level application singleton that brings everything together!
  */
@@ -356,6 +387,22 @@ app.extend({
         if (err) {
           throw err;
         }
+
+        // Get theme from the preferences and set accordingly.
+        loadTheme(app.preferences.theme);
+        ipc.on('app:darkreader-enable', () => {
+          enableDarkTheme();
+        });
+        ipc.on('app:darkreader-disable', () => {
+          disableDarkTheme();
+        });
+        ipc.on('app:save-theme', (_, theme) => {
+          // Save the new theme on the user's preferences.
+          app.preferences.save({
+            theme
+          });
+        });
+
         Action.pluginActivationCompleted.listen(() => {
           ipc.call('compass:loading:change-status', {
             status: 'activating plugins'

packages/compass/src/app/index.js

@@ -1,6 +1,9 @@
 import EventEmitter from 'events';
-import { BrowserWindow, ipcMain, Menu } from 'electron';
+import { BrowserWindow, ipcMain, Menu, app } from 'electron';
 import { expect } from 'chai';
+import sinon from 'sinon';
+import type processType from 'process';
+
 import type { CompassApplication } from './application';
 import type { CompassMenu as _CompassMenu } from './menu';
 
@@ -99,6 +102,10 @@ describe('CompassMenu', function () {
   });
 
   describe('getTemplate', function () {
+    afterEach(function() {
+      sinon.restore();
+    });
+
     it('should generate a menu template that can be passed to the Electron Menu without errors', function () {
       expect(() => {
         const template = CompassMenu.getTemplate(0);
@@ -151,6 +158,129 @@ describe('CompassMenu', function () {
       });
     });
 
+    it('should generate the about and theme options on darwin', function () {
+      sinon.stub(process, 'platform').value('darwin');
+
+      expect(
+        serializable(
+          // Contains functions, so we can't easily deep equal it without
+          // converting to serializable format
+          CompassMenu.getTemplate(0).find((item) => item.label === app.getName())
+        )
+      ).to.deep.eq({
+        label: app.getName(),
+        submenu: [
+          {
+            label: `About ${app.getName()}`,
+            role: 'about',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: 'Theme',
+            submenu: [{
+              checked: false,
+              label: 'Use OS Theme (Preview)',
+              type: 'checkbox',
+            }, {
+              checked: false,
+              label: 'Dark Theme (Preview)',
+              type: 'checkbox',
+            }, {
+              checked: true,
+              label: 'Light Theme',
+              type: 'checkbox',
+            }]
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: 'Hide',
+            accelerator: 'Command+H',
+            role: 'hide',
+          },
+          {
+            label: 'Hide Others',
+            accelerator: 'Command+Shift+H',
+            role: 'hideOthers',
+          },
+          {
+            label: 'Show All',
+            role: 'unhide',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: 'Quit',
+            accelerator: 'CmdOrCtrl+Q'
+          }
+        ],
+      });
+    });
+
+    it('should generate the about and theme options on non darwin', function () {
+      sinon.stub(process, 'platform').value('linux');
+
+      expect(
+        serializable(
+          // Contains functions, so we can't easily deep equal it without
+          // converting to serializable format
+          CompassMenu.getTemplate(0).find((item) => item.label === '&Help')
+        )
+      ).to.deep.eq({
+        label: '&Help',
+        submenu: [
+          {
+            label: `&Online ${app.getName()} Help`,
+            accelerator: 'F1',
+          },
+          {
+            label: `${app.getName()} &Overview`
+          },
+          {
+            label: '&Privacy Settings'
+          },
+          {
+            label: '&Plugins'
+          },
+          {
+            label: '&License'
+          },
+          {
+            label: '&Open Log File'
+          },
+          {
+            type: 'separator'
+          },
+          {
+            label: 'Theme',
+            submenu: [{
+              checked: false,
+              label: 'Use OS Theme (Preview)',
+              type: 'checkbox',
+            }, {
+              checked: false,
+              label: 'Dark Theme (Preview)',
+              type: 'checkbox',
+            }, {
+              checked: true,
+              label: 'Light Theme',
+              type: 'checkbox',
+            }]
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: `&About ${app.getName()}`,
+          }
+        ]
+      });
+    });
+
     it('should generate a menu template without collection submenu if `showCollection` is `false`', function () {
       expect(
         CompassMenu.getTemplate(0).find((item) => item.label === '&Collection')