mirror/Vencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2025-02-24 15:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

ClientTheme, Styles: Partial styles and convert ClientTheme to use Styles API

Browse source
This commit is contained in:
Sqaaakoi 2025-01-20 05:31:16 +13:00
parent f0475e7d1b
commit 0c349117da
No known key found for this signature in database
2 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/api/Styles.ts
View file

@ -25,6 +25,8 @@ export interface Style {
edit?(source: string): string;
}
export type PartialStyle = Partial<Style> & Pick<Style, "name">;
export function requireStyle(name: string) {
const style = styleMap.get(name);
if (!style) throw new Error(`Style "${name}" does not exist`);
@ -75,12 +77,12 @@ export function disableStyle(style: Style) {
* @param style The new style object
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export function setStyle(style: Style) {
if (!styleMap.has(style.name)) styleMap.set(style.name, style);
export function setStyle(style: PartialStyle) {
if (!styleMap.has(style.name)) styleMap.set(style.name, { name: style.name, source: "", enabled: true });
const storedStyle = requireStyle(style.name);
Object.assign(storedStyle, style);
(style.enabled ? enableStyle : disableStyle)(style);
(style.enabled ? enableStyle : disableStyle)(storedStyle);
}
/**

56
src/plugins/clientTheme/index.tsx
View file

@ -7,6 +7,7 @@
import "./clientTheme.css";
import { definePluginSettings } from "@api/Settings";
import { setStyle } from "@api/Styles";
import { Devs } from "@utils/constants";
import { Margins } from "@utils/margins";
import { classes } from "@utils/misc";
@ -124,8 +125,7 @@ export default definePlugin({
},
stop() {
document.getElementById("clientThemeVars")?.remove();
document.getElementById("clientThemeOffsets")?.remove();
["vars", "offsets", "lightModeFixes"].forEach(i => setStyle({ name: `ClientTheme-${i}`, enabled: false }));
}
});
@ -158,10 +158,14 @@ function generateColorOffsets(styles) {
variableMatch = variableRegex.exec(styles);
}
createStyleSheet("clientThemeOffsets", [
`.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
`.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
].join("\n\n"));
setStyle({
name: "ClientTheme-offsets",
source: [
`.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
`.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
].join("\n\n"),
enabled: true
});
}
function generateLightModeFixes(styles) {
@ -187,11 +191,15 @@ function generateLightModeFixes(styles) {
// create css to reassign every var
const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`;
createStyleSheet("clientThemeLightModeFixes", [
reassignBackgrounds,
reassignBackgroundColors,
reassignVariables,
].join("\n\n"));
setStyle({
name: "ClientTheme-lightModeFixes",
source: [
reassignBackgrounds,
reassignBackgroundColors,
reassignVariables,
].join("\n\n"),
enabled: true
});
}
function captureOne(str, regex) {
@ -206,23 +214,15 @@ function mapReject(arr, mapFunc) {
function updateColorVars(color: string) {
const { hue, saturation, lightness } = hexToHSL(color);
let style = document.getElementById("clientThemeVars");
if (!style)
style = createStyleSheet("clientThemeVars");
style.textContent = `:root {
--theme-h: ${hue};
--theme-s: ${saturation}%;
--theme-l: ${lightness}%;
}`;
}
function createStyleSheet(id, content = "") {
const style = document.createElement("style");
style.setAttribute("id", id);
style.textContent = content.split("\n").map(line => line.trim()).join("\n");
document.body.appendChild(style);
return style;
setStyle({
name: "ClientTheme-vars",
source: `:root {
--theme-h: ${hue};
--theme-s: ${saturation}%;
--theme-l: ${lightness}%;
}`,
enabled: true
});
}
// returns all of discord's native styles in a single string