enable support for dark mode, closes #242

* Defaults to OS's dark mode preference.
vladimiry · Apr 9, 2021 · 8d00585 · 8d00585
1 parent d17267f
commit 8d00585
Show file tree

Hide file tree

Showing 90 changed files with 968 additions and 555 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ Some Linux package types are available for installing from the repositories (`Pa
 - :package: **Batch emails export** to EML files (attachments can optionally be exported in `online / live` mode, not available in `offline` mode since not stored locally). Feature released with [v2.0.0-beta.4](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.4) version, requires [local store](https://github.com/vladimiry/ElectronMail/wiki/FAQ) feature to be enabled.
 - :closed_lock_with_key: **Built-in/prepackaged web clients**. The prepackaged with the app proton web clients assembled from source code, see the respective [official repositories](https://github.com/ProtonMail/). See [79](https://github.com/vladimiry/ElectronMail/issues/79) and [80](https://github.com/vladimiry/ElectronMail/issues/80) issues for details.
 - :gear: **Configuring proxy per account** support. Enabled since [v3.0.0](https://github.com/vladimiry/ElectronMail/releases/tag/v3.0.0) release. See [113](https://github.com/vladimiry/ElectronMail/issues/113) and [120](https://github.com/vladimiry/ElectronMail/issues/120) issues for details.
+- :moon: **Dark mode** support. See details in [#242](https://github.com/vladimiry/ElectronMail/issues/242).
 - :bell: **System tray icon** with a total number of unread messages shown on top of it. Enabling [local store](https://github.com/vladimiry/ElectronMail/wiki/FAQ) improves this feature, see [#30](https://github.com/vladimiry/ElectronMail/issues/30).
 - :gear: **Starting minimized to tray** and **closing to tray** opt-out features.
 - :bell: **Native notifications** for individual accounts clicking on which focuses the app window and selects respective account in the accounts list.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "electron-mail",
   "description": "Unofficial ProtonMail Desktop App",
-  "version": "4.11.1",
+  "version": "4.12.0",
   "author": "Vladimir Yakovlev <desktop-app@protonmail.ch>",
   "license": "MIT",
   "homepage": "https://github.com/vladimiry/ElectronMail",

diff --git a/src/e2e/workflow.ts b/src/e2e/workflow.ts
@@ -376,7 +376,7 @@ function buildWorkflow(t: ExecutionContext<TestContext>) {
 
             if (index === 0) {
                 await t.context.app.client
-                    .$(`.modal-body electron-mail-accounts`)
+                    .$(`.modal-body electron-mail-accounts-list`)
                     .then(async (el) => el.waitForDisplayed());
             }
         },

diff --git a/src/electron-main/api/constants.ts b/src/electron-main/api/constants.ts
@@ -1,10 +1,10 @@
 import {Subject} from "rxjs";
 import {UnionOf} from "@vladimiry/unionize";
 
-import {IPC_MAIN_API_DB_INDEXER_ON_ACTIONS, IpcMainServiceScan} from "src/shared/api/main";
+import {IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS, IpcMainServiceScan} from "src/shared/api/main";
 
 export const IPC_MAIN_API_NOTIFICATION$ = new Subject<IpcMainServiceScan["ApiImplReturns"]["notification"]>();
 
-export const IPC_MAIN_API_DB_INDEXER_NOTIFICATION$ = new Subject<IpcMainServiceScan["ApiImplReturns"]["dbIndexerNotification"]>();
+export const IPC_MAIN_API_DB_INDEXER_REQUEST$ = new Subject<IpcMainServiceScan["ApiImplReturns"]["dbIndexerNotification"]>();
 
-export const IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$ = new Subject<UnionOf<typeof IPC_MAIN_API_DB_INDEXER_ON_ACTIONS>>();
+export const IPC_MAIN_API_DB_INDEXER_RESPONSE$ = new Subject<UnionOf<typeof IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS>>();
diff --git a/src/electron-main/api/endpoints-builders/database/index.ts b/src/electron-main/api/endpoints-builders/database/index.ts
@@ -7,8 +7,8 @@ import {omit} from "remeda";
 import {Context} from "src/electron-main/model";
 import {DB_DATA_CONTAINER_FIELDS, IndexableMail} from "src/shared/model/database";
 import {Database} from "src/electron-main/database";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION$, IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS, IPC_MAIN_API_NOTIFICATION_ACTIONS, IpcMainApiEndpoints} from "src/shared/api/main";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST$, IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS, IPC_MAIN_API_NOTIFICATION_ACTIONS, IpcMainApiEndpoints} from "src/shared/api/main";
 import {buildDbExportEndpoints} from "./export/api";
 import {buildDbIndexingEndpoints} from "./indexing/api";
 import {buildDbSearchEndpoints} from "./search/api";
@@ -80,8 +80,8 @@ export async function buildEndpoints(ctx: Context): Promise<Pick<IpcMainApiEndpo
                     setTimeout(() => {
                         // send mails to indexing process
                         // TODO performance optimization: send mails to indexing process if indexing feature activated
-                        IPC_MAIN_API_DB_INDEXER_NOTIFICATION$.next(
-                            IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS.Index(
+                        IPC_MAIN_API_DB_INDEXER_REQUEST$.next(
+                            IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS.Index(
                                 {
                                     uid: new UUID(4).format(),
                                     ...narrowIndexActionPayload({
@@ -124,8 +124,8 @@ export async function buildEndpoints(ctx: Context): Promise<Pick<IpcMainApiEndpo
                 setTimeout(() => {
                     // removing stale mails form the full text search index
                     // TODO performance optimization: send mails to indexing process if indexing feature activated
-                    IPC_MAIN_API_DB_INDEXER_NOTIFICATION$.next(
-                        IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS.Index(
+                    IPC_MAIN_API_DB_INDEXER_REQUEST$.next(
+                        IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS.Index(
                             {
                                 uid: new UUID(4).format(),
                                 ...narrowIndexActionPayload({

diff --git a/src/electron-main/api/endpoints-builders/database/indexing/api.ts b/src/electron-main/api/endpoints-builders/database/indexing/api.ts
@@ -4,13 +4,13 @@ import {filter, first, startWith, takeUntil} from "rxjs/operators";
 
 import {Context} from "src/electron-main/model";
 import {
-    IPC_MAIN_API_DB_INDEXER_NOTIFICATION$,
-    IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$,
+    IPC_MAIN_API_DB_INDEXER_REQUEST$,
+    IPC_MAIN_API_DB_INDEXER_RESPONSE$,
     IPC_MAIN_API_NOTIFICATION$,
 } from "src/electron-main/api/constants";
 import {
-    IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS,
-    IPC_MAIN_API_DB_INDEXER_ON_ACTIONS,
+    IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS,
+    IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS,
     IPC_MAIN_API_NOTIFICATION_ACTIONS,
     IpcMainApiEndpoints,
 } from "src/shared/api/main";
@@ -29,10 +29,10 @@ export async function buildDbIndexingEndpoints(
 
             // propagating action to custom stream
             setTimeout(() => {
-                IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$.next(action);
+                IPC_MAIN_API_DB_INDEXER_RESPONSE$.next(action);
             });
 
-            IPC_MAIN_API_DB_INDEXER_ON_ACTIONS.match(action, {
+            IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS.match(action, {
                 Bootstrapped() {
                     const indexAccounts$ = defer(
                         async () => {
@@ -87,8 +87,8 @@ export async function buildDbIndexingEndpoints(
 
         // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
         dbIndexerNotification() {
-            return IPC_MAIN_API_DB_INDEXER_NOTIFICATION$.asObservable().pipe(
-                startWith(IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS.Bootstrap({})),
+            return IPC_MAIN_API_DB_INDEXER_REQUEST$.asObservable().pipe(
+                startWith(IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS.Bootstrap({})),
             );
         },
     };

diff --git a/src/electron-main/api/endpoints-builders/database/indexing/service.ts b/src/electron-main/api/endpoints-builders/database/indexing/service.ts
@@ -7,15 +7,15 @@ import {race, throwError, timer} from "rxjs";
 
 import {Config} from "src/shared/model/options";
 import {DbAccountPk, FsDbAccount, INDEXABLE_MAIL_FIELDS, Mail} from "src/shared/model/database";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION$, IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$,} from "src/electron-main/api/constants";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS, IPC_MAIN_API_DB_INDEXER_ON_ACTIONS,} from "src/shared/api/main";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST$, IPC_MAIN_API_DB_INDEXER_RESPONSE$,} from "src/electron-main/api/constants";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS, IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS,} from "src/shared/api/main";
 import {curryFunctionMembers} from "src/shared/util";
 import {hrtimeDuration} from "src/electron-main/util";
 
 const logger = curryFunctionMembers(electronLog, __filename);
 
 export const narrowIndexActionPayload: (
-    payload: StrictOmit<Extract<UnionOf<typeof IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS>, { type: "Index" }>["payload"], "uid">,
+    payload: StrictOmit<Extract<UnionOf<typeof IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS>, { type: "Index" }>["payload"], "uid">,
 ) => typeof payload = ((): typeof narrowIndexActionPayload => {
     type Fn = typeof narrowIndexActionPayload;
     type Mails = ReturnType<Fn>["add"];
@@ -46,8 +46,8 @@ async function indexMails(
     const duration = hrtimeDuration();
     const uid = new UUID(4).format();
     const result$ = race(
-        IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$.pipe(
-            filter(IPC_MAIN_API_DB_INDEXER_ON_ACTIONS.is.IndexingResult),
+        IPC_MAIN_API_DB_INDEXER_RESPONSE$.pipe(
+            filter(IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS.is.IndexingResult),
             filter(({payload}) => payload.uid === uid),
             first(),
         ),
@@ -56,8 +56,8 @@ async function indexMails(
         ),
     );
 
-    IPC_MAIN_API_DB_INDEXER_NOTIFICATION$.next(
-        IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS.Index({
+    IPC_MAIN_API_DB_INDEXER_REQUEST$.next(
+        IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS.Index({
             uid,
             ...narrowIndexActionPayload({
                 key,

diff --git a/src/electron-main/api/endpoints-builders/database/search/api.ts b/src/electron-main/api/endpoints-builders/database/search/api.ts
@@ -4,8 +4,8 @@ import {Observable, from, of, race, throwError, timer} from "rxjs";
 import {concatMap, filter, first, mergeMap, switchMap} from "rxjs/operators";
 
 import {Context} from "src/electron-main/model";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION$, IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$} from "src/electron-main/api/constants";
-import {IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS, IPC_MAIN_API_DB_INDEXER_ON_ACTIONS, IpcMainApiEndpoints} from "src/shared/api/main";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST$, IPC_MAIN_API_DB_INDEXER_RESPONSE$} from "src/electron-main/api/constants";
+import {IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS, IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS, IpcMainApiEndpoints} from "src/shared/api/main";
 import {IndexableMailId} from "src/shared/model/database";
 import {curryFunctionMembers} from "src/shared/util";
 import {searchRootConversationNodes, secondSearchStep} from "src/electron-main/api/endpoints-builders/database/search/service";
@@ -44,8 +44,8 @@ export async function buildDbSearchEndpoints(
                 : null;
             const fullTextSearch$: Observable<Map<IndexableMailId, number> | null> = query
                 ? race(
-                    IPC_MAIN_API_DB_INDEXER_ON_NOTIFICATION$.pipe(
-                        filter(IPC_MAIN_API_DB_INDEXER_ON_ACTIONS.is.SearchResult),
+                    IPC_MAIN_API_DB_INDEXER_RESPONSE$.pipe(
+                        filter(IPC_MAIN_API_DB_INDEXER_RESPONSE_ACTIONS.is.SearchResult),
                         filter(({payload}) => payload.uid === fullTextSearchUid),
                         first(),
                         mergeMap(({payload: {data: {items}}}) => [new Map<IndexableMailId, number>(
@@ -74,8 +74,8 @@ export async function buildDbSearchEndpoints(
             );
 
             if (fullTextSearchUid) {
-                IPC_MAIN_API_DB_INDEXER_NOTIFICATION$.next(
-                    IPC_MAIN_API_DB_INDEXER_NOTIFICATION_ACTIONS.Search({query, uid: fullTextSearchUid}),
+                IPC_MAIN_API_DB_INDEXER_REQUEST$.next(
+                    IPC_MAIN_API_DB_INDEXER_REQUEST_ACTIONS.Search({query, uid: fullTextSearchUid}),
                 );
             }
 

diff --git a/src/electron-main/api/endpoints-builders/general.ts b/src/electron-main/api/endpoints-builders/general.ts
@@ -2,7 +2,7 @@ import ProxyAgent from "proxy-agent";
 import compareVersions from "compare-versions";
 import electronLog from "electron-log";
 import fetch from "node-fetch";
-import {app, dialog, shell} from "electron";
+import {app, dialog, nativeTheme, shell} from "electron";
 import {first, map, startWith} from "rxjs/operators";
 import {from, merge, of, throwError} from "rxjs";
 import {inspect} from "util";
@@ -374,8 +374,7 @@ export async function buildEndpoints(
         // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
         notification() {
             return IPC_MAIN_API_NOTIFICATION$.asObservable().pipe(
-                // TODO replace "startWith" with "defaultIfEmpty" (simply some response needed to avoid timeout error)
-                startWith(IPC_MAIN_API_NOTIFICATION_ACTIONS.Bootstrap({})),
+                startWith(IPC_MAIN_API_NOTIFICATION_ACTIONS.NativeTheme({shouldUseDarkColors: nativeTheme.shouldUseDarkColors})),
             );
         },
 

diff --git a/src/electron-main/api/index.ts b/src/electron-main/api/index.ts
@@ -10,6 +10,7 @@ import {Database} from "src/electron-main/database";
 import {IPC_MAIN_API, IPC_MAIN_API_NOTIFICATION_ACTIONS, IpcMainApiEndpoints, IpcMainServiceScan} from "src/shared/api/main";
 import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
 import {PACKAGE_NAME, PRODUCT_NAME, PROTON_MONACO_EDITOR_DTS_ASSETS_LOCATION} from "src/shared/constants";
+import {applyThemeSource} from "src/electron-main/native-theme";
 import {applyZoomFactor} from "src/electron-main/window/util";
 import {attachFullTextIndexWindow, detachFullTextIndexWindow} from "src/electron-main/window/full-text-search";
 import {buildSettingsAdapter} from "src/electron-main/util";
@@ -186,6 +187,10 @@ export const initApi = async (ctx: Context): Promise<IpcMainApiEndpoints> => {
                 }
             }
 
+            if (updatedConfig.themeSource !== previousConfig.themeSource) {
+                applyThemeSource(updatedConfig.themeSource);
+            }
+
             return updatedConfig;
         },
 

diff --git a/src/electron-main/bootstrap/app-ready.ts b/src/electron-main/bootstrap/app-ready.ts
@@ -6,6 +6,7 @@ import {getDefaultSession, initSession} from "src/electron-main/session";
 import {initApi} from "src/electron-main/api";
 import {initApplicationMenu} from "src/electron-main/menu";
 import {initMainBrowserWindow} from "src/electron-main/window/main";
+import {initNativeThemeNotification} from "src/electron-main/native-theme";
 import {initSpellCheckController} from "src/electron-main/spell-check/controller";
 import {initTray} from "src/electron-main/tray";
 import {initWebContentsCreatingHandlers} from "src/electron-main/web-contents";
@@ -19,13 +20,14 @@ export async function appReadyHandler(ctx: Context): Promise<void> {
 
     const endpoints = await initApi(ctx);
 
-    // "endpoints.readConfig()" call initializes the config.json file
-    // so consequent "ctx.configStore.readExisting()" calls don't fail
-    const {spellCheckLocale, customTrayIconColor, logLevel} = await endpoints.readConfig();
+    // so consequent "ctx.configStore.readExisting()" calls don't fail since "endpoints.readConfig()" call initializes the config
+    const {spellCheckLocale, customTrayIconColor, logLevel, themeSource} = await endpoints.readConfig();
 
     // TODO test "logger.transports.file.level" update
     electronLog.transports.file.level = logLevel;
 
+    initNativeThemeNotification(themeSource);
+
     await (async (): Promise<void> => {
         const spellCheckController = await initSpellCheckController(spellCheckLocale);
         ctx.getSpellCheckController = (): typeof spellCheckController => spellCheckController;

diff --git a/src/electron-main/context.ts b/src/electron-main/context.ts
@@ -10,19 +10,14 @@ import {Fs as StoreFs, Model as StoreModel, Store} from "fs-json-store";
 import {app} from "electron";
 import {distinctUntilChanged, take} from "rxjs/operators";
 
-import {
-    BINARY_NAME,
-    LOCAL_WEBCLIENT_PROTOCOL_PREFIX,
-    RUNTIME_ENV_USER_DATA_DIR,
-    WEB_CHUNK_NAMES,
-    WEB_PROTOCOL_SCHEME
-} from "src/shared/constants";
+import {BINARY_NAME, LOCAL_WEBCLIENT_PROTOCOL_PREFIX, RUNTIME_ENV_USER_DATA_DIR, WEB_PROTOCOL_SCHEME} from "src/shared/constants";
 import {Config, Settings} from "src/shared/model/options";
 import {Context, ContextInitOptions, ContextInitOptionsPaths, ProperLockfileError} from "./model";
 import {Database} from "./database";
 import {ElectronContextLocations} from "src/shared/model/electron";
 import {INITIAL_STORES, configEncryptionPresetValidator, settingsAccountLoginUniquenessValidator} from "./constants";
 import {SessionStorage} from "src/electron-main/session-storage";
+import {WEBPACK_WEB_CHUNK_NAMES} from "src/shared/webpack-conts";
 import {formatFileUrl} from "./util";
 
 function exists(file: string, storeFs: StoreModel.StoreFs): boolean {
@@ -122,10 +117,10 @@ function initLocations(
         trayIcon: icon,
         trayIconFont: appRelativePath("./assets/fonts/tray-icon/roboto-derivative.ttf"),
         browserWindowPage: formatFileUrl(
-            appRelativePath("./web/", WEB_CHUNK_NAMES["browser-window"], "index.html"),
+            appRelativePath("./web/", WEBPACK_WEB_CHUNK_NAMES["browser-window"], "index.html"),
         ),
-        aboutBrowserWindowPage: appRelativePath("./web/", WEB_CHUNK_NAMES.about, "index.html"),
-        searchInPageBrowserViewPage: appRelativePath("./web/", WEB_CHUNK_NAMES["search-in-page-browser-view"], "index.html"),
+        aboutBrowserWindowPage: appRelativePath("./web/", WEBPACK_WEB_CHUNK_NAMES.about, "index.html"),
+        searchInPageBrowserViewPage: appRelativePath("./web/", WEBPACK_WEB_CHUNK_NAMES["search-in-page-browser-view"], "index.html"),
         preload: {
             aboutBrowserWindow: appRelativePath("./electron-preload/about.js"),
             browserWindow: appRelativePath("./electron-preload/browser-window.js"),
@@ -135,16 +130,9 @@ function initLocations(
             primary: formatFileUrl(appRelativePath("./electron-preload/webview/primary.js")),
             calendar: formatFileUrl(appRelativePath("./electron-preload/webview/calendar.js")),
         },
-        vendorsAppCssLinkHref: ((): string => {
-            // TODO electron: get rid of "baseURLForDataURL" workaround, see https://github.com/electron/electron/issues/20700
-            const webRelativeCssFilePath = "browser-window/shared-vendor.css";
-            const file = appRelativePath("web", webRelativeCssFilePath);
-            const stat = storeFs._impl.statSync(file);
-            if (!stat.isFile()) {
-                throw new Error(`Location "${file}" exists but it's not a file`);
-            }
-            return `${WEB_PROTOCOL_SCHEME}://${webRelativeCssFilePath}`;
-        })(),
+        // TODO electron: get rid of "baseURLForDataURL" workaround, see https://github.com/electron/electron/issues/20700
+        vendorsAppCssLinkHrefs: ["shared-vendor-dark", "shared-vendor-light"]
+            .map((value) => `${WEB_PROTOCOL_SCHEME}://browser-window/${value}.css`),
         ...((): NoExtraProps<Pick<ElectronContextLocations, "protocolBundles" | "webClients">> => {
             const {protocolBundles, webClients}:
                 {

diff --git a/src/electron-main/native-theme.ts b/src/electron-main/native-theme.ts
@@ -0,0 +1,19 @@
+import {nativeTheme} from "electron";
+
+import {Config} from "src/shared/model/options";
+import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
+import {IPC_MAIN_API_NOTIFICATION_ACTIONS} from "src/shared/api/main";
+
+export const applyThemeSource = (themeSource: Config["themeSource"]): void => {
+    nativeTheme.themeSource = themeSource;
+};
+
+export const initNativeThemeNotification = (themeSource: Config["themeSource"]): void => {
+    nativeTheme.on("updated", () => {
+        IPC_MAIN_API_NOTIFICATION$.next(
+            IPC_MAIN_API_NOTIFICATION_ACTIONS.NativeTheme({shouldUseDarkColors: nativeTheme.shouldUseDarkColors}),
+        );
+    });
+
+    applyThemeSource(themeSource);
+};