feat: set window background to dark

tiddly-gittly · Apr 13, 2022 · 1a71d68 · 1a71d68
1 parent 38026e1
commit 1a71d68
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/src/services/theme/defaultTheme.ts b/src/services/theme/defaultTheme.ts
@@ -15,5 +15,3 @@ export const darkTheme = merge(
     }),
   ),
 ) as Theme;
-// DEBUG: console
-console.warn(`darkTheme`, JSON.stringify(darkTheme, null, '  '));
diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/require-await */
 import { BehaviorSubject } from 'rxjs';
 import { nativeTheme } from 'electron';
 import { injectable } from 'inversify';
@@ -14,7 +15,7 @@ export class ThemeService implements IThemeService {
 
   constructor() {
     void this.init();
-    this.theme$ = new BehaviorSubject<ITheme>({ shouldUseDarkColors: this.shouldUseDarkColors() });
+    this.theme$ = new BehaviorSubject<ITheme>({ shouldUseDarkColors: this.shouldUseDarkColorsSync() });
   }
 
   private updateThemeSubject(newTheme: ITheme): void {
@@ -26,11 +27,15 @@ export class ThemeService implements IThemeService {
     // apply theme
     nativeTheme.themeSource = themeSource;
     nativeTheme.addListener('updated', () => {
-      this.updateThemeSubject({ shouldUseDarkColors: this.shouldUseDarkColors() });
+      this.updateThemeSubject({ shouldUseDarkColors: this.shouldUseDarkColorsSync() });
     });
   }
 
-  private shouldUseDarkColors(): boolean {
+  private shouldUseDarkColorsSync(): boolean {
     return nativeTheme.shouldUseDarkColors;
   }
+
+  public async shouldUseDarkColors(): Promise<boolean> {
+    return this.shouldUseDarkColorsSync();
+  }
 }
diff --git a/src/services/theme/interface.ts b/src/services/theme/interface.ts
@@ -10,6 +10,7 @@ export interface ITheme {
  * Wrap call to electron api, so we won't need remote module in renderer process
  */
 export interface IThemeService {
+  shouldUseDarkColors(): Promise<boolean>;
   theme$: BehaviorSubject<ITheme>;
 }
 export const ThemeServiceIPCDescriptor = {

diff --git a/src/services/windows/index.ts b/src/services/windows/index.ts
@@ -25,6 +25,7 @@ import { isTest } from '@/constants/environment';
 import { MENUBAR_ICON_PATH } from '@/constants/paths';
 import { getLocalHostUrlWithActualIP } from '@services/libs/url';
 import { SETTINGS_FOLDER } from '@/constants/appPaths';
+import { IThemeService } from '@services/theme/interface';
 
 @injectable()
 export class Window implements IWindowService {
@@ -37,6 +38,7 @@ export class Window implements IWindowService {
   @lazyInject(serviceIdentifier.Workspace) private readonly workspaceService!: IWorkspaceService;
   @lazyInject(serviceIdentifier.WorkspaceView) private readonly workspaceViewService!: IWorkspaceViewService;
   @lazyInject(serviceIdentifier.MenuService) private readonly menuService!: IMenuService;
+  @lazyInject(serviceIdentifier.ThemeService) private readonly themeService!: IThemeService;
 
   constructor() {
     void this.registerMenu();
@@ -212,6 +214,7 @@ export class Window implements IWindowService {
         });
       });
     }
+    await this.updateWindowBackground(newWindow);
     // This loading will wait for a while
     await newWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
     await webContentLoadingPromise;
@@ -599,4 +602,10 @@ export class Window implements IWindowService {
       });
     });
   }
+
+  private async updateWindowBackground(newWindow: BrowserWindow): Promise<void> {
+    if (await this.themeService.shouldUseDarkColors()) {
+      newWindow.setBackgroundColor('#000000');
+    }
+  }
 }