Add custom `--os-accent-color` css value (#1663)

* Add custom -bd-accent-color css value

* Use global variable for accent color

* Fallback to ""

* Run accent color ipc call in parallel

* Typo

common/constants/ipcevents.js

@@ -12,7 +12,8 @@ export const TOGGLE_DEVTOOLS    = "bd-toggle-devtools";
 export const OPEN_WINDOW        = "bd-open-window";
 export const INSPECT_ELEMENT    = "bd-inspect-element";
 export const MINIMUM_SIZE       = "bd-minimum-size";
-export const WINDOW_SIZE       = "bd-window-size";
+export const WINDOW_SIZE        = "bd-window-size";
 export const DEVTOOLS_WARNING   = "bd-remove-devtools-message";
 export const OPEN_DIALOG        = "bd-open-dialog";
 export const REGISTER_PRELOAD   = "bd-register-preload";
+export const GET_ACCENT_COLOR   = "bd-get-accent-color";

injector/src/modules/ipc.js

@@ -1,4 +1,4 @@
-import {ipcMain as ipc, BrowserWindow, app, dialog} from "electron";
+import {ipcMain as ipc, BrowserWindow, app, dialog, systemPreferences} from "electron";
 
 import * as IPCEvents from "common/constants/ipcevents";
 
@@ -84,6 +84,11 @@ const setWindowSize = (event, width, height) => {
     window.setSize(width, height);
 };
 
+const getAccentColor = () => {
+    // intentionally left blank so that fallback colors will be used
+    return systemPreferences.getAccentColor() || "";
+};
+
 const stopDevtoolsWarning = event => event.sender.removeAllListeners("devtools-opened");
 
 const openDialog = (event, options = {}) => {
@@ -144,6 +149,7 @@ export default class IPCMain {
             ipc.on(IPCEvents.WINDOW_SIZE, setWindowSize);
             ipc.on(IPCEvents.DEVTOOLS_WARNING, stopDevtoolsWarning);
             ipc.on(IPCEvents.REGISTER_PRELOAD, registerPreload);
+            ipc.handle(IPCEvents.GET_ACCENT_COLOR, getAccentColor);
             ipc.handle(IPCEvents.RUN_SCRIPT, runScript);
             ipc.handle(IPCEvents.OPEN_DIALOG, openDialog);
             ipc.handle(IPCEvents.OPEN_WINDOW, createBrowserWindow);

renderer/src/modules/core.js

@@ -15,6 +15,7 @@ import Settings from "./settingsmanager";
 import DataStore from "./datastore";
 import DiscordModules from "./discordmodules";
 
+import IPC from "./ipc";
 import Editor from "./editor";
 import Updater from "./updater";
 
@@ -33,6 +34,8 @@ export default new class Core {
         Config.userData = process.env.DISCORD_USER_DATA;
         Config.dataPath = process.env.BETTERDISCORD_DATA_PATH;
 
+        IPC.getSystemAccentColor().then(value => DOMManager.injectStyle("bd-os-values", `:root {--os-accent-color: ${value};}`));
+
         // Load css early
         Logger.log("Startup", "Injecting BD Styles");
         DOMManager.injectStyle("bd-stylesheet", Styles.toString());

renderer/src/modules/ipc.js

@@ -56,4 +56,8 @@ export default new class IPCRenderer {
     openDialog(options) {
         return ipc.invoke(IPCEvents.OPEN_DIALOG, options);
     }
+
+    getSystemAccentColor() {
+        return ipc.invoke(IPCEvents.GET_ACCENT_COLOR);
+    }
 };