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/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/>,