Add custom -bd-accent-color css value

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,10 @@ const setWindowSize = (event, width, height) => {
     window.setSize(width, height);
 };
 
+const getAccentColor = () => {
+    return systemPreferences.getAccentColor() || "#000000";
+};
+
 const stopDevtoolsWarning = event => event.sender.removeAllListeners("devtools-opened");
 
 const openDialog = (event, options = {}) => {
@@ -144,6 +148,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/dommanager.js

@@ -1,3 +1,5 @@
+import ipc from "./ipc";
+
 export default class DOMManager {
 
     /** Document/window width */
@@ -69,10 +71,10 @@ export default class DOMManager {
         if (exists) exists.remove();
     }
 
-    static injectStyle(id, css) {
+    static async injectStyle(id, css) {
         id = this.escapeID(id);
         const style = this.getElement(`#${id}`, this.bdStyles) || this.createElement("style", {id});
-        style.textContent = css;
+        style.textContent = await this.insertCSSCustoms(css);
         this.bdStyles.append(style);
     }
 
@@ -98,15 +100,15 @@ export default class DOMManager {
         if (exists) exists.remove();
     }
 
-    static injectTheme(id, css) {
+    static async injectTheme(id, css) {
         id = this.escapeID(id);
         const style = this.getElement(`#${id}`, this.bdThemes) || this.createElement("style", {id});
-        style.textContent = css;
+        style.textContent = await this.insertCSSCustoms(css);
         this.bdThemes.append(style);
     }
 
-    static updateCustomCSS(css) {
-        this.bdCustomCSS.textContent = css;
+    static async updateCustomCSS(css) {
+        this.bdCustomCSS.textContent = await this.insertCSSCustoms(css);
     }
 
     static removeScript(id) {
@@ -126,6 +128,18 @@ export default class DOMManager {
         });
     }
 
+    static async insertCSSCustoms(string) {
+        const customValues = {
+            "-bd-accent-color": `#${await ipc.getSystemAccentColor()}`,
+        };
+
+        for (const [key, value] of Object.entries(customValues)) {
+            string = string.replaceAll(key, value);
+        }
+
+        return string;
+    }
+
     // https://javascript.info/js-animation
     static animate({timing = _ => _, update, duration}) {
         const start = performance.now();

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);
+    }
 };