Bootstrap v4 dark mode for modals and settings window (#1650)

* Bootstrap v4 dark mode for modals and settings window

* Fix package-lock.json

* Fix package-lock.json again

* Merge'd

* Oops

* Refactor into helper

src/common/communication.ts

@@ -20,6 +20,7 @@ export const EMIT_CONFIGURATION = 'emit-configuration';
 
 export const UPDATE_TEAMS = 'update-teams';
 export const DARK_MODE_CHANGE = 'dark_mode_change';
+export const GET_DARK_MODE = 'get-dark-mode';
 export const USER_ACTIVITY_UPDATE = 'user-activity-update';
 
 export const LOAD_RETRY = 'load_retry';

src/main/preload/modalPreload.js

@@ -6,7 +6,7 @@
 
 import {ipcRenderer} from 'electron';
 
-import {MODAL_CANCEL, MODAL_RESULT, MODAL_INFO, RETRIEVE_MODAL_INFO, MODAL_SEND_IPC_MESSAGE} from 'common/communication';
+import {MODAL_CANCEL, MODAL_RESULT, MODAL_INFO, RETRIEVE_MODAL_INFO, MODAL_SEND_IPC_MESSAGE, GET_DARK_MODE, DARK_MODE_CHANGE} from 'common/communication';
 
 console.log('preloaded for the modal!');
 
@@ -30,6 +30,10 @@ window.addEventListener('message', async (event) => {
         console.log('sending custom ipc message');
         ipcRenderer.send(event.data.data.type, ...event.data.data.args);
         break;
+    case GET_DARK_MODE:
+        console.log('getting dark mode value');
+        window.postMessage({type: DARK_MODE_CHANGE, data: await ipcRenderer.invoke(GET_DARK_MODE)}, window.location.href);
+        break;
     default:
         console.log(`got a message: ${event}`);
         console.log(event);
@@ -41,3 +45,7 @@ window.addEventListener('keydown', (e) => {
         ipcRenderer.send(MODAL_CANCEL);
     }
 });
+
+ipcRenderer.on(DARK_MODE_CHANGE, (event, darkMode) => {
+    window.postMessage({type: DARK_MODE_CHANGE, data: darkMode}, window.location.href);
+});

src/main/views/modalManager.ts

@@ -4,7 +4,9 @@
 import {BrowserWindow, ipcMain} from 'electron';
 import {IpcMainEvent, IpcMainInvokeEvent} from 'electron/main';
 
-import {RETRIEVE_MODAL_INFO, MODAL_CANCEL, MODAL_RESULT, MODAL_OPEN, MODAL_CLOSE} from 'common/communication';
+import {CombinedConfig} from 'types/config';
+
+import {RETRIEVE_MODAL_INFO, MODAL_CANCEL, MODAL_RESULT, MODAL_OPEN, MODAL_CLOSE, EMIT_CONFIGURATION, DARK_MODE_CHANGE} from 'common/communication';
 
 import * as WindowManager from '../windows/windowManager';
 
@@ -107,3 +109,9 @@ export function focusCurrentModal() {
         modalQueue[0].view.webContents.focus();
     }
 }
+
+ipcMain.on(EMIT_CONFIGURATION, (event: IpcMainEvent, config: CombinedConfig) => {
+    modalQueue.forEach((modal) => {
+        modal.view.webContents.send(DARK_MODE_CHANGE, config.darkMode);
+    });
+});

src/main/windows/windowManager.ts

@@ -7,7 +7,7 @@ import log from 'electron-log';
 
 import {CombinedConfig} from 'types/config';
 
-import {MAXIMIZE_CHANGE, HISTORY, GET_LOADING_SCREEN_DATA, REACT_APP_INITIALIZED, LOADING_SCREEN_ANIMATION_FINISHED, FOCUS_THREE_DOT_MENU} from 'common/communication';
+import {MAXIMIZE_CHANGE, HISTORY, GET_LOADING_SCREEN_DATA, REACT_APP_INITIALIZED, LOADING_SCREEN_ANIMATION_FINISHED, FOCUS_THREE_DOT_MENU, GET_DARK_MODE} from 'common/communication';
 import urlUtils from 'common/utils/url';
 
 import {getAdjustedWindowBoundaries} from '../utils';
@@ -35,6 +35,7 @@ const assetsDir = path.resolve(app.getAppPath(), 'assets');
 
 ipcMain.on(HISTORY, handleHistory);
 ipcMain.handle(GET_LOADING_SCREEN_DATA, handleLoadingScreenDataRequest);
+ipcMain.handle(GET_DARK_MODE, handleGetDarkMode);
 ipcMain.on(REACT_APP_INITIALIZED, handleReactAppInitialized);
 ipcMain.on(LOADING_SCREEN_ANIMATION_FINISHED, handleLoadingScreenAnimationFinished);
 
@@ -441,3 +442,7 @@ export function handleHistory(event: IpcMainEvent, offset: number) {
         }
     }
 }
+function handleGetDarkMode() {
+    return status.config?.darkMode;
+}
+

src/renderer/css/lazy/modals-dark.lazy.css

@@ -0,0 +1,5 @@
+@import '~bootstrap-dark/src/bootstrap-dark.css';
+
+body {
+    background-color: transparent;
+}

src/renderer/css/lazy/settings-dark.lazy.css

@@ -0,0 +1,5 @@
+@import '~bootstrap-dark/src/bootstrap-dark.css';
+
+.TeamListItem:hover {
+    background: #242a30;
+}

src/renderer/modals/certificate/certificate.tsx

@@ -7,12 +7,16 @@ import {Certificate} from 'electron/renderer';
 
 import {MODAL_CANCEL, MODAL_RESULT, RETRIEVE_MODAL_INFO} from 'common/communication';
 
-import SelectCertificateModal from './certificateModal';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'renderer/css/modals.css';
 import 'renderer/css/components/CertificateModal.css';
 
+import setupDarkMode from '../darkMode';
+
+import SelectCertificateModal from './certificateModal';
+
+setupDarkMode();
+
 const handleCancel = () => {
     window.postMessage({type: MODAL_CANCEL}, window.location.href);
 };

src/renderer/modals/darkMode.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {DARK_MODE_CHANGE, GET_DARK_MODE} from 'common/communication';
+
+import darkStyles from 'renderer/css/lazy/modals-dark.lazy.css';
+
+export default function addDarkModeListener() {
+    window.addEventListener('message', async (event) => {
+        if (event.data.type === DARK_MODE_CHANGE) {
+            if (event.data.data) {
+                darkStyles.use();
+            } else {
+                darkStyles.unuse();
+            }
+        }
+    });
+    window.postMessage({type: GET_DARK_MODE}, window.location.href);
+}

src/renderer/modals/login/login.tsx

@@ -7,11 +7,15 @@ import {AuthenticationResponseDetails} from 'electron/renderer';
 
 import {MODAL_CANCEL, MODAL_RESULT, RETRIEVE_MODAL_INFO} from 'common/communication';
 
-import LoginModal from './loginModal';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'renderer/css/modals.css';
 
+import setupDarkMode from '../darkMode';
+
+import LoginModal from './loginModal';
+
+setupDarkMode();
+
 const handleLoginCancel = (request: AuthenticationResponseDetails) => {
     window.postMessage({type: MODAL_CANCEL, data: {request}}, window.location.href);
 };

src/renderer/modals/newServer/newServer.tsx

@@ -13,6 +13,10 @@ import {MODAL_CANCEL, MODAL_RESULT} from 'common/communication';
 
 import NewTeamModal from '../../components/NewTeamModal'; //'./addServer.jsx';
 
+import setupDarkMode from '../darkMode';
+
+setupDarkMode();
+
 const onClose = () => {
     window.postMessage({type: MODAL_CANCEL}, window.location.href);
 };

src/renderer/modals/permission/permission.tsx

@@ -6,11 +6,15 @@ import ReactDOM from 'react-dom';
 
 import {MODAL_CANCEL, MODAL_RESULT, RETRIEVE_MODAL_INFO, MODAL_SEND_IPC_MESSAGE} from 'common/communication';
 
-import PermissionModal from './permissionModal';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'renderer/css/modals.css';
 
+import setupDarkMode from '../darkMode';
+
+import PermissionModal from './permissionModal';
+
+setupDarkMode();
+
 const handleDeny = () => {
     window.postMessage({type: MODAL_CANCEL}, window.location.href);
 };

src/renderer/settings.tsx

@@ -9,8 +9,23 @@ import 'renderer/css/settings.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import {DARK_MODE_CHANGE, GET_DARK_MODE} from 'common/communication';
+
+import darkStyles from 'renderer/css/lazy/settings-dark.lazy.css';
+
 import SettingsPage from './components/SettingsPage';
 
+const setDarkMode = (darkMode: boolean) => {
+    if (darkMode) {
+        darkStyles.use();
+    } else {
+        darkStyles.unuse();
+    }
+};
+
+window.ipcRenderer.on(DARK_MODE_CHANGE, (_, darkMode) => setDarkMode(darkMode));
+window.ipcRenderer.invoke(GET_DARK_MODE).then(setDarkMode);
+
 const start = async () => {
     ReactDOM.render(
         <SettingsPage/>,

src/types/external/file-types.d.ts

@@ -3,3 +3,4 @@
 
 declare module '*.mp3';
 declare module '*.svg';
+declare module '*.lazy.css';