Add setting to follow system dark mode on macOS (#697)

Fixes #694
Fixes #510

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() {

config.js

@@ -3,6 +3,7 @@ const Store = require('electron-store');
 
 module.exports = new Store({
 	defaults: {
+		followSystemAppearance: false,
 		darkMode: false,
 		vibrancy: false,
 		zoomFactor: 1,

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;
 }
 

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());
 });
 

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;