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; edit?(source: string): string;
} }
export type PartialStyle = Partial<Style> & Pick<Style, "name">;
export function requireStyle(name: string) { export function requireStyle(name: string) {
const style = styleMap.get(name); const style = styleMap.get(name);
if (!style) throw new Error(`Style "${name}" does not exist`); 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 * @param style The new style object
* @see {@link enableStyle} for info on getting the name of an imported style * @see {@link enableStyle} for info on getting the name of an imported style
*/ */
export function setStyle(style: Style) { export function setStyle(style: PartialStyle) {
if (!styleMap.has(style.name)) styleMap.set(style.name, style); if (!styleMap.has(style.name)) styleMap.set(style.name, { name: style.name, source: "", enabled: true });
const storedStyle = requireStyle(style.name); const storedStyle = requireStyle(style.name);
Object.assign(storedStyle, style); 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 "./clientTheme.css";
import { definePluginSettings } from "@api/Settings"; import { definePluginSettings } from "@api/Settings";
import { setStyle } from "@api/Styles";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import { Margins } from "@utils/margins"; import { Margins } from "@utils/margins";
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
@ -124,8 +125,7 @@ export default definePlugin({
}, },
stop() { stop() {
document.getElementById("clientThemeVars")?.remove(); ["vars", "offsets", "lightModeFixes"].forEach(i => setStyle({ name: `ClientTheme-${i}`, enabled: false }));
document.getElementById("clientThemeOffsets")?.remove();
} }
}); });
@ -158,10 +158,14 @@ function generateColorOffsets(styles) {
variableMatch = variableRegex.exec(styles); variableMatch = variableRegex.exec(styles);
} }
createStyleSheet("clientThemeOffsets", [ setStyle({
`.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`, name: "ClientTheme-offsets",
`.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`, source: [
].join("\n\n")); `.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) { function generateLightModeFixes(styles) {
@ -187,11 +191,15 @@ function generateLightModeFixes(styles) {
// create css to reassign every var // create css to reassign every var
const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`; const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`;
createStyleSheet("clientThemeLightModeFixes", [ setStyle({
reassignBackgrounds, name: "ClientTheme-lightModeFixes",
reassignBackgroundColors, source: [
reassignVariables, reassignBackgrounds,
].join("\n\n")); reassignBackgroundColors,
reassignVariables,
].join("\n\n"),
enabled: true
});
} }
function captureOne(str, regex) { function captureOne(str, regex) {
@ -206,23 +214,15 @@ function mapReject(arr, mapFunc) {
function updateColorVars(color: string) { function updateColorVars(color: string) {
const { hue, saturation, lightness } = hexToHSL(color); const { hue, saturation, lightness } = hexToHSL(color);
let style = document.getElementById("clientThemeVars"); setStyle({
if (!style) name: "ClientTheme-vars",
style = createStyleSheet("clientThemeVars"); source: `:root {
--theme-h: ${hue};
style.textContent = `:root { --theme-s: ${saturation}%;
--theme-h: ${hue}; --theme-l: ${lightness}%;
--theme-s: ${saturation}%; }`,
--theme-l: ${lightness}%; enabled: true
}`; });
}
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;
} }
// returns all of discord's native styles in a single string // returns all of discord's native styles in a single string