mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-06-10 15:13:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

ClientTheme: Fix for visual refresh (#3313)

Browse source
This commit is contained in:
Cassie 2025-04-04 17:06:42 -06:00 • committed by GitHub
parent 4f11316a8b
commit ab38e59550
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -130,15 +130,16 @@ export default definePlugin({
} }
}); });
const variableRegex = /(--primary-\d{3}-hsl):.*?(\S*)%;/g; const visualRefreshVariableRegex = /(--neutral-\d{1,3}-hsl):.*?(\S*)%;/g;
const oldVariableRegex = /(--primary-\d{3}-hsl):.*?(\S*)%;/g;
const lightVariableRegex = /^--primary-[1-5]\d{2}-hsl/g; const lightVariableRegex = /^--primary-[1-5]\d{2}-hsl/g;
const darkVariableRegex = /^--primary-[5-9]\d{2}-hsl/g; const darkVariableRegex = /^--primary-[5-9]\d{2}-hsl/g;
// generates variables per theme by: // generates variables per theme by:
// - matching regex (so we can limit what variables are included in light/dark theme, otherwise text becomes unreadable) // - matching regex (so we can limit what variables are included in light/dark theme, otherwise text becomes unreadable)
// - offset from specified center (light/dark theme get different offsets because light uses 100 for background-primary, while dark uses 600) // - offset from specified center (light/dark theme get different offsets because light uses 100 for background-primary, while dark uses 600)
function genThemeSpecificOffsets(variableLightness: Record<string, number>, regex: RegExp, centerVariable: string): string { function genThemeSpecificOffsets(variableLightness: Record<string, number>, regex: RegExp | null, centerVariable: string): string {
return Object.entries(variableLightness).filter(([key]) => key.search(regex) > -1) return Object.entries(variableLightness).filter(([key]) => regex == null || key.search(regex) > -1)
.map(([key, lightness]) => { .map(([key, lightness]) => {
const lightnessOffset = lightness - variableLightness[centerVariable]; const lightnessOffset = lightness - variableLightness[centerVariable];
const plusOrMinus = lightnessOffset >= 0 ? "+" : "-"; const plusOrMinus = lightnessOffset >= 0 ? "+" : "-";
@ -147,25 +148,28 @@ function genThemeSpecificOffsets(variableLightness: Record<string, number>, rege
.join("\n"); .join("\n");
} }
function generateColorOffsets(styles) { function generateColorOffsets(styles) {
const variableLightness = {} as Record<string, number>; const oldVariableLightness = {} as Record<string, number>;
const visualRefreshVariableLightness = {} as Record<string, number>;
// Get lightness values of --primary variables // Get lightness values of --primary variables
let variableMatch = variableRegex.exec(styles); for (const [, variable, lightness] of styles.matchAll(oldVariableRegex)) {
while (variableMatch !== null) { oldVariableLightness[variable] = parseFloat(lightness);
const [, variable, lightness] = variableMatch; }
variableLightness[variable] = parseFloat(lightness);
variableMatch = variableRegex.exec(styles); for (const [, variable, lightness] of styles.matchAll(visualRefreshVariableRegex)) {
visualRefreshVariableLightness[variable] = parseFloat(lightness);
} }
createStyleSheet("clientThemeOffsets", [ createStyleSheet("clientThemeOffsets", [
`.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`, `.theme-light {\n ${genThemeSpecificOffsets(oldVariableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
`.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`, `.theme-dark {\n ${genThemeSpecificOffsets(oldVariableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
`.visual-refresh.theme-light {\n ${genThemeSpecificOffsets(visualRefreshVariableLightness, null, "--neutral-2-hsl")} \n}`,
`.visual-refresh.theme-dark {\n ${genThemeSpecificOffsets(visualRefreshVariableLightness, null, "--neutral-69-hsl")} \n}`,
].join("\n\n")); ].join("\n\n"));
} }
function generateLightModeFixes(styles) { function generateLightModeFixes(styles: string) {
const groupLightUsesW500Regex = /\.theme-light[^{]*\{[^}]*var\(--white-500\)[^}]*}/gm; const groupLightUsesW500Regex = /\.theme-light[^{]*\{[^}]*var\(--white-500\)[^}]*}/gm;
// get light capturing groups that mention --white-500 // get light capturing groups that mention --white-500
const relevantStyles = [...styles.matchAll(groupLightUsesW500Regex)].flat(); const relevantStyles = [...styles.matchAll(groupLightUsesW500Regex)].flat();