add os-accent-color variable (following BetterDiscord)

This commit is contained in:
V 2023-09-25 18:53:10 +02:00
parent c6b1b9463c
commit ae6584da7c
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
5 changed files with 30 additions and 11 deletions

@ -48,7 +48,8 @@ window.VencordNative = {
getThemesList: () => DataStore.entries(themeStore).then(entries => getThemesList: () => DataStore.entries(themeStore).then(entries =>
entries.map(([name, css]) => getThemeInfo(css, name.toString())) 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: { native: {

@ -23,7 +23,8 @@ export default {
deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName), deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName),
getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR), getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR),
getThemesList: () => invoke<Array<UserThemeHeader>>(IpcEvents.GET_THEMES_LIST), 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: { updater: {

@ -22,7 +22,7 @@ import "./ipcPlugins";
import { debounce } from "@utils/debounce"; import { debounce } from "@utils/debounce";
import { IpcEvents } from "@utils/IpcEvents"; import { IpcEvents } from "@utils/IpcEvents";
import { Queue } from "@utils/Queue"; 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 { mkdirSync, readFileSync, watch } from "fs";
import { open, readdir, readFile, writeFile } from "fs/promises"; import { open, readdir, readFile, writeFile } from "fs/promises";
import { join, normalize } from "path"; 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_DIR, () => THEMES_DIR);
ipcMain.handle(IpcEvents.GET_THEMES_LIST, () => listThemes()); ipcMain.handle(IpcEvents.GET_THEMES_LIST, () => listThemes());
ipcMain.handle(IpcEvents.GET_THEME_DATA, (_, fileName) => getThemeData(fileName)); 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.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR);
ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings()); ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings());

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

@ -22,12 +22,27 @@ import { addSettingsListener, Settings } from "@api/Settings";
let style: HTMLStyleElement; let style: HTMLStyleElement;
let themesStyle: 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) { export async function toggle(isEnabled: boolean) {
if (!style) { if (!style) {
if (isEnabled) { if (isEnabled) {
style = document.createElement("style"); style = createStyle("vencord-custom-css");
style.id = "vencord-custom-css";
document.documentElement.appendChild(style);
VencordNative.quickCss.addChangeListener(css => { VencordNative.quickCss.addChangeListener(css => {
style.textContent = css; style.textContent = css;
// At the time of writing this, changing textContent resets the disabled state // 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() { 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; const { themeLinks, enabledThemes } = Settings;
@ -66,6 +77,7 @@ async function initThemes() {
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
initSystemValues();
initThemes(); initThemes();
toggle(Settings.useQuickCss); toggle(Settings.useQuickCss);