add os-accent-color variable (following BetterDiscord)

browser/VencordNativeStub.ts

@@ -48,7 +48,8 @@ window.VencordNative = {
         getThemesList: () => DataStore.entries(themeStore).then(entries =>
             entries.map(([name, css]) => getThemeInfo(css, name.toString()))
         ),
-        getThemeData: (fileName: string) => DataStore.get(fileName, themeStore)
+        getThemeData: (fileName: string) => DataStore.get(fileName, themeStore),
+        getSystemValues: async () => ({}),
     },
 
     native: {

src/VencordNative.ts

@@ -23,7 +23,8 @@ export default {
         deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName),
         getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR),
         getThemesList: () => invoke<Array<UserThemeHeader>>(IpcEvents.GET_THEMES_LIST),
-        getThemeData: (fileName: string) => invoke<string | undefined>(IpcEvents.GET_THEME_DATA, fileName)
+        getThemeData: (fileName: string) => invoke<string | undefined>(IpcEvents.GET_THEME_DATA, fileName),
+        getSystemValues: () => invoke<Record<string, string>>(IpcEvents.GET_THEME_SYSTEM_VALUES),
     },
 
     updater: {

src/main/ipcMain.ts

@@ -22,7 +22,7 @@ import "./ipcPlugins";
 import { debounce } from "@utils/debounce";
 import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
-import { BrowserWindow, ipcMain, shell } from "electron";
+import { BrowserWindow, ipcMain, shell, systemPreferences } from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
 import { join, normalize } from "path";
@@ -112,6 +112,10 @@ ipcMain.handle(IpcEvents.SET_QUICK_CSS, (_, css) =>
 ipcMain.handle(IpcEvents.GET_THEMES_DIR, () => THEMES_DIR);
 ipcMain.handle(IpcEvents.GET_THEMES_LIST, () => listThemes());
 ipcMain.handle(IpcEvents.GET_THEME_DATA, (_, fileName) => getThemeData(fileName));
+ipcMain.handle(IpcEvents.GET_THEME_SYSTEM_VALUES, () => ({
+    // win & mac only
+    "os-accent-color": `#${systemPreferences.getAccentColor?.() || ""}`
+}));
 
 ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR);
 ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings());

src/utils/IpcEvents.ts

@@ -26,6 +26,7 @@ export const enum IpcEvents {
     GET_THEMES_DIR = "VencordGetThemesDir",
     GET_THEMES_LIST = "VencordGetThemesList",
     GET_THEME_DATA = "VencordGetThemeData",
+    GET_THEME_SYSTEM_VALUES = "VencordGetThemeSystemValues",
     GET_SETTINGS_DIR = "VencordGetSettingsDir",
     GET_SETTINGS = "VencordGetSettings",
     SET_SETTINGS = "VencordSetSettings",

src/utils/quickCss.ts

@@ -22,12 +22,27 @@ import { addSettingsListener, Settings } from "@api/Settings";
 let style: HTMLStyleElement;
 let themesStyle: HTMLStyleElement;
 
+function createStyle(id: string) {
+    const style = document.createElement("style");
+    style.id = id;
+    document.documentElement.append(style);
+    return style;
+}
+
+async function initSystemValues() {
+    const values = await VencordNative.themes.getSystemValues();
+    const variables = Object.entries(values)
+        .filter(([, v]) => v !== "#")
+        .map(([k, v]) => `--${k}: ${v};`)
+        .join("");
+
+    createStyle("vencord-os-theme-values").textContent = `:root{${variables}}`;
+}
+
 export async function toggle(isEnabled: boolean) {
     if (!style) {
         if (isEnabled) {
-            style = document.createElement("style");
+            style = createStyle("vencord-custom-css");
-            style.id = "vencord-custom-css";
-            document.documentElement.appendChild(style);
             VencordNative.quickCss.addChangeListener(css => {
                 style.textContent = css;
                 // At the time of writing this, changing textContent resets the disabled state
@@ -40,11 +55,7 @@ export async function toggle(isEnabled: boolean) {
 }
 
 async function initThemes() {
-    if (!themesStyle) {
+    themesStyle ??= createStyle("vencord-themes");
-        themesStyle = document.createElement("style");
-        themesStyle.id = "vencord-themes";
-        document.documentElement.appendChild(themesStyle);
-    }
 
     const { themeLinks, enabledThemes } = Settings;
 
@@ -66,6 +77,7 @@ async function initThemes() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    initSystemValues();
     initThemes();
 
     toggle(Settings.useQuickCss);