From d81ebdd050bfcb18892b935dc80cb6e51d5ac6e4 Mon Sep 17 00:00:00 2001 From: Nigel Rodriguez Date: Wed, 9 Jan 2019 12:40:21 +0800 Subject: [PATCH] Add setting to follow system dark mode on macOS (#697) Fixes #694 Fixes #510 --- browser.js | 10 +++++--- config.js | 1 + dark-mode.css | 3 ++- index.js | 16 ++++++++++--- menu.js | 18 ++++++++++++++- package-lock.json | 58 +++++++++++++++++++++++------------------------ vibrancy.css | 15 ------------ 7 files changed, 69 insertions(+), 52 deletions(-) diff --git a/browser.js b/browser.js index 421042762..214ce5db4 100644 --- a/browser.js +++ b/browser.js @@ -1,6 +1,6 @@ 'use strict'; const electron = require('electron'); -const {is} = require('electron-util'); +const {api, is} = require('electron-util'); const elementReady = require('element-ready'); const config = require('./config'); @@ -148,8 +148,12 @@ ipc.on('toggle-unread-threads-view', () => { }); function setDarkMode() { - document.documentElement.classList.toggle('dark-mode', config.get('darkMode')); - ipc.send('set-vibrancy'); + if (config.get('followSystemAppearance')) { + document.documentElement.classList.toggle('dark-mode', api.systemPreferences.isDarkMode()); + } else { + document.documentElement.classList.toggle('dark-mode', config.get('darkMode')); + } + setVibrancy(); } function setVibrancy() { diff --git a/config.js b/config.js index cb420d6e3..a08cd80d3 100644 --- a/config.js +++ b/config.js @@ -3,6 +3,7 @@ const Store = require('electron-store'); module.exports = new Store({ defaults: { + followSystemAppearance: false, darkMode: false, vibrancy: false, zoomFactor: 1, diff --git a/dark-mode.css b/dark-mode.css index e6f44a11d..0340762de 100644 --- a/dark-mode.css +++ b/dark-mode.css @@ -719,7 +719,8 @@ html.os-darwin.dark-mode ._673w { } /* Styles for vibrancy in dark mode */ -html.os-darwin.dark-mode body { +html.os-darwin.dark-mode body, +html.os-darwin.dark-mode ._4sp8 { background: rgba(0, 0, 0, 0.26) !important; } diff --git a/index.js b/index.js index 9bdddfbe4..86ad54387 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ const path = require('path'); const fs = require('fs'); const {URL} = require('url'); const electron = require('electron'); -const {is} = require('electron-util'); +const {darkMode, is} = require('electron-util'); const log = require('electron-log'); const {autoUpdater} = require('electron-updater'); const isDev = require('electron-is-dev'); @@ -22,7 +22,7 @@ require('electron-dl')(); require('electron-context-menu')(); const domain = config.get('useWorkChat') ? 'facebook.com' : 'messenger.com'; -const {app, ipcMain, Menu, nativeImage, Notification} = electron; +const {app, ipcMain, Menu, nativeImage, Notification, systemPreferences} = electron; app.setAppUserModelId('com.sindresorhus.caprine'); @@ -205,6 +205,10 @@ function createMainWindow() { setUserLocale(); setUpPrivacyBlocking(); + darkMode.onChange(() => { + win.webContents.send('set-dark-mode'); + }); + if (is.macos) { win.setSheetOffset(40); } @@ -371,7 +375,12 @@ function createMainWindow() { })(); ipcMain.on('set-vibrancy', () => { - mainWindow.setVibrancy(config.get('darkMode') ? 'ultra-dark' : 'sidebar'); + mainWindow.setVibrancy('sidebar'); + if (config.get('followSystemAppearance')) { + systemPreferences.setAppLevelAppearance(systemPreferences.isDarkMode() ? 'dark' : 'light'); + } else { + systemPreferences.setAppLevelAppearance(config.get('darkMode') ? 'dark' : 'light'); + } }); ipcMain.on('mute-notifications-toggled', (event, status) => { @@ -384,6 +393,7 @@ app.on('activate', () => { app.on('before-quit', () => { isQuitting = true; + config.set('lastWindowState', mainWindow.getNormalBounds()); }); diff --git a/menu.js b/menu.js index 59220a543..0cce8fb95 100644 --- a/menu.js +++ b/menu.js @@ -227,10 +227,24 @@ const viewSubmenu = [ { type: 'separator' }, + { + label: 'Follow System Appearance', + type: 'checkbox', + visible: is.macos, + checked: config.get('followSystemAppearance'), + click() { + config.set('followSystemAppearance', !config.get('followSystemAppearance')); + sendAction('set-dark-mode'); + const menuItem = menu.getMenuItemById('darkMode'); + menuItem.enabled = !config.get('followSystemAppearance'); + } + }, { label: 'Dark Mode', + id: 'darkMode', type: 'checkbox', checked: config.get('darkMode'), + enabled: !config.get('followSystemAppearance'), accelerator: 'CommandOrControl+D', click() { config.set('darkMode', !config.get('darkMode')); @@ -517,4 +531,6 @@ const linuxWindowsTemplate = [ const template = is.macos ? macosTemplate : linuxWindowsTemplate; -module.exports = electron.Menu.buildFromTemplate(template); +const menu = electron.Menu.buildFromTemplate(template); + +module.exports = menu; diff --git a/package-lock.json b/package-lock.json index 3b89becab..1fbfb140e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -296,7 +296,7 @@ }, "ansi-escapes": { "version": "3.1.0", - "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==", "dev": true }, @@ -905,7 +905,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -1070,7 +1070,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -1214,7 +1214,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { @@ -1287,7 +1287,7 @@ }, "core-assert": { "version": "0.2.1", - "resolved": "http://registry.npmjs.org/core-assert/-/core-assert-0.2.1.tgz", + "resolved": "https://registry.npmjs.org/core-assert/-/core-assert-0.2.1.tgz", "integrity": "sha1-+F4s+b/tKPdzzIs/pcW2m9wC/j8=", "dev": true, "requires": { @@ -1588,7 +1588,7 @@ "dependencies": { "domelementtype": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=", "dev": true } @@ -1784,7 +1784,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -2258,7 +2258,7 @@ "dependencies": { "doctrine": { "version": "1.5.0", - "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "dev": true, "requires": { @@ -2295,7 +2295,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -2995,7 +2995,7 @@ }, "globby": { "version": "6.1.0", - "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -3008,7 +3008,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -3361,7 +3361,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -3433,7 +3433,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -4158,7 +4158,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -4367,7 +4367,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -4935,7 +4935,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true } @@ -5120,7 +5120,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" }, "p-cancelable": { @@ -5210,7 +5210,7 @@ "dependencies": { "color-convert": { "version": "0.5.3", - "resolved": "http://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=", "dev": true } @@ -5264,7 +5264,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { @@ -5298,7 +5298,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -5779,7 +5779,7 @@ }, "readable-stream": { "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", "dev": true, "requires": { @@ -5975,7 +5975,7 @@ }, "require-uncached": { "version": "1.0.3", - "resolved": "http://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", + "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", "dev": true, "requires": { @@ -6129,7 +6129,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -6262,7 +6262,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -6279,7 +6279,7 @@ }, "slice-ansi": { "version": "0.0.4", - "resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, @@ -6509,7 +6509,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "sshpk": { @@ -6610,7 +6610,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -7647,7 +7647,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -7833,7 +7833,7 @@ }, "globby": { "version": "8.0.1", - "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz", + "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz", "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==", "dev": true, "requires": { diff --git a/vibrancy.css b/vibrancy.css index 3993d4385..bb77a349f 100644 --- a/vibrancy.css +++ b/vibrancy.css @@ -31,16 +31,6 @@ html.vibrancy ._1qt4 { border-top: solid 1px rgba(0, 0, 0, 0.06); } -/* Styles for vibrancy in dark mode */ -html.dark-mode.vibrancy body { - background: rgba(0, 0, 0, 0.26) !important; -} - -/* Main container? */ -html.dark-mode.vibrancy ._4sp8 { - background: transparent !important; -} - /* Main content */ html.dark-mode.vibrancy ._1q5- { background: transparent !important; @@ -61,11 +51,6 @@ html.dark-mode.vibrancy button { background: transparent !important; } -/* Contact list: search input */ -html.dark-mode.vibrancy ._5iwm ._58al { - background: rgba(255, 255, 255, 0.1) !important; -} - /* Message container + right sidebar */ html.vibrancy ._4_j4, html.vibrancy ._4_j5,