Dark theme loading screen

app/main.ts

@@ -19,6 +19,7 @@ import {
   dialog,
   ipcMain as ipc,
   Menu,
+  nativeTheme,
   powerSaveBlocker,
   protocol as electronProtocol,
   screen,
@@ -33,8 +34,11 @@ import * as GlobalErrors from './global_errors';
 import { setup as setupCrashReports } from './crashReports';
 import { setup as setupSpellChecker } from './spell_check';
 import { redactAll, addSensitivePath } from '../ts/util/privacy';
+import { missingCaseError } from '../ts/util/missingCaseError';
 import { strictAssert } from '../ts/util/assert';
 import { consoleLogger } from '../ts/util/consoleLogger';
+import type { ThemeSettingType } from '../ts/types/Storage.d';
+import { ThemeType } from '../ts/types/Util';
 
 import './startup_config';
 
@@ -230,6 +234,61 @@ async function getSpellCheckSetting() {
   return slowValue;
 }
 
+type GetThemeSettingOptionsType = Readonly<{
+  ephemeralOnly?: boolean;
+}>;
+
+async function getThemeSetting({
+  ephemeralOnly = false,
+}: GetThemeSettingOptionsType = {}): Promise<ThemeSettingType> {
+  const fastValue = ephemeralConfig.get('theme-setting');
+  if (fastValue !== undefined) {
+    getLogger().info('got fast theme-setting value', fastValue);
+    return fastValue as ThemeSettingType;
+  }
+
+  if (ephemeralOnly) {
+    return 'system';
+  }
+
+  const json = await sql.sqlCall('getItemById', ['theme-setting']);
+
+  // Default to `system` if setting doesn't exist yet
+  const slowValue = json ? json.value : 'system';
+
+  ephemeralConfig.set('theme-setting', slowValue);
+
+  getLogger().info('got slow theme-setting value', slowValue);
+
+  return slowValue;
+}
+
+async function getResolvedThemeSetting(
+  options?: GetThemeSettingOptionsType
+): Promise<ThemeType> {
+  const theme = await getThemeSetting(options);
+  if (theme === 'system') {
+    return nativeTheme.shouldUseDarkColors ? ThemeType.dark : ThemeType.light;
+  }
+  return ThemeType[theme];
+}
+
+async function getBackgroundColor(
+  options?: GetThemeSettingOptionsType
+): Promise<string> {
+  const theme = await getResolvedThemeSetting(options);
+
+  if (theme === 'light') {
+    return '#3a76f0';
+  }
+
+  if (theme === 'dark') {
+    return '#121212';
+  }
+
+  throw missingCaseError(theme);
+}
+
 let systemTrayService: SystemTrayService | undefined;
 const systemTraySettingCache = new SystemTraySettingCache(
   sql,
@@ -479,7 +538,7 @@ async function createWindow() {
         : 'default',
     backgroundColor: isTestEnvironment(getEnvironment())
       ? '#ffffff' // Tests should always be rendered on a white background
-      : '#3a76f0',
+      : await getBackgroundColor(),
     webPreferences: {
       ...defaultWebPrefs,
       nodeIntegration: false,
@@ -599,6 +658,7 @@ async function createWindow() {
 
   const moreKeys = {
     isFullScreen: String(Boolean(mainWindow.isFullScreen())),
+    resolvedTheme: await getResolvedThemeSetting(),
   };
 
   if (getEnvironment() === Environment.Test) {
@@ -996,7 +1056,7 @@ function showScreenShareWindow(sourceName: string) {
 }
 
 let aboutWindow: BrowserWindow | undefined;
-function showAbout() {
+async function showAbout() {
   if (aboutWindow) {
     aboutWindow.show();
     return;
@@ -1008,7 +1068,7 @@ function showAbout() {
     resizable: false,
     title: getLocale().i18n('aboutSignalDesktop'),
     autoHideMenuBar: true,
-    backgroundColor: '#3a76f0',
+    backgroundColor: await getBackgroundColor(),
     show: false,
     webPreferences: {
       ...defaultWebPrefs,
@@ -1038,7 +1098,7 @@ function showAbout() {
 }
 
 let settingsWindow: BrowserWindow | undefined;
-function showSettingsWindow() {
+async function showSettingsWindow() {
   if (settingsWindow) {
     settingsWindow.show();
     return;
@@ -1051,7 +1111,7 @@ function showSettingsWindow() {
     resizable: false,
     title: getLocale().i18n('signalDesktopPreferences'),
     autoHideMenuBar: true,
-    backgroundColor: '#3a76f0',
+    backgroundColor: await getBackgroundColor(),
     show: false,
     webPreferences: {
       ...defaultWebPrefs,
@@ -1121,7 +1181,7 @@ async function showStickerCreator() {
     height: 650,
     title: getLocale().i18n('signalDesktopStickerCreator'),
     autoHideMenuBar: true,
-    backgroundColor: '#3a76f0',
+    backgroundColor: await getBackgroundColor(),
     show: false,
     webPreferences: {
       ...defaultWebPrefs,
@@ -1172,16 +1232,14 @@ async function showDebugLogWindow() {
     return;
   }
 
-  const theme = settingsChannel
-    ? await settingsChannel.getSettingFromMainWindow('themeSetting')
-    : undefined;
+  const theme = await getThemeSetting();
   const options = {
     width: 700,
     height: 500,
     resizable: false,
     title: getLocale().i18n('debugLog'),
     autoHideMenuBar: true,
-    backgroundColor: '#3a76f0',
+    backgroundColor: await getBackgroundColor(),
     show: false,
     webPreferences: {
       ...defaultWebPrefs,
@@ -1235,9 +1293,7 @@ function showPermissionsPopupWindow(forCalling: boolean, forCamera: boolean) {
       return;
     }
 
-    const theme = settingsChannel
-      ? await settingsChannel.getSettingFromMainWindow('themeSetting')
-      : undefined;
+    const theme = await getThemeSetting();
     const size = mainWindow.getSize();
     const options = {
       width: Math.min(400, size[0]),
@@ -1245,7 +1301,7 @@ function showPermissionsPopupWindow(forCalling: boolean, forCamera: boolean) {
       resizable: false,
       title: getLocale().i18n('allowAccess'),
       autoHideMenuBar: true,
-      backgroundColor: '#3a76f0',
+      backgroundColor: await getBackgroundColor(),
       show: false,
       modal: true,
       webPreferences: {
@@ -1509,6 +1565,12 @@ app.on('ready', async () => {
   const timeout = new Promise(resolveFn =>
     setTimeout(resolveFn, 3000, 'timeout')
   );
+
+  // This color is to be used only in loading screen and in this case we should
+  // never wait for the database to be initialized. Thus the theme setting
+  // lookup should be done only in ephemeral config.
+  const backgroundColor = await getBackgroundColor({ ephemeralOnly: true });
+
   // eslint-disable-next-line more/no-then
   Promise.race([sqlInitPromise, timeout]).then(maybeTimeout => {
     if (maybeTimeout !== 'timeout') {
@@ -1525,7 +1587,7 @@ app.on('ready', async () => {
       height: 265,
       resizable: false,
       frame: false,
-      backgroundColor: '#3a76f0',
+      backgroundColor,
       webPreferences: {
         ...defaultWebPrefs,
         nodeIntegration: false,