cswimr/Vencord
1
0
Fork 0
forked from CoastalCommitsArchival/github.com-Vendicated-Vencord
Code Pull requests Packages 1 Wiki Activity

ClientTheme fixes

Browse source
This commit is contained in:
V 2023-11-22 01:57:00 +01:00
parent 6face7f8ef
commit 074ebae334
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/plugins/clientTheme/README.md Normal file
View file

@ -0,0 +1,7 @@
# Classic Client Theme
Revival of the old client theme experiment (The one that came before the sucky one that we actually got)
![the ClientTheme theme colour picker](https://user-images.githubusercontent.com/37855219/230238053-e90b7098-373a-459a-bb8c-c24e82f69270.png)
https://github.com/Vendicated/Vencord/assets/45497981/6c1bcb3b-e0c7-4a02-b0b8-c4c5cd954f38

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

@ -11,11 +11,12 @@ import { Devs } from "@utils/constants";
import { getTheme, Theme } from "@utils/discord"; import { getTheme, Theme } from "@utils/discord";
import { Margins } from "@utils/margins"; import { Margins } from "@utils/margins";
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
import { LazyComponent } from "@utils/react";
import definePlugin, { OptionType } from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import { findByCodeLazy } from "@webpack"; import { findByCode } from "@webpack";
import { Button, Forms } from "@webpack/common"; import { Button, Forms } from "@webpack/common";
const ColorPicker = findByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR"); const ColorPicker = LazyComponent(() => findByCode(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR"));
const colorPresets = [ const colorPresets = [
"#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D", "#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D",
@ -24,11 +25,7 @@ const colorPresets = [
]; ];
function onPickColor(color: number) { function onPickColor(color: number) {
let hexColor = color.toString(16); const hexColor = color.toString(16).padStart(6, "0");
while (hexColor.length < 6) {
hexColor = "0" + hexColor;
}
settings.store.color = hexColor; settings.store.color = hexColor;
updateColorVars(hexColor); updateColorVars(hexColor);
@ -59,7 +56,8 @@ function ThemeSettings() {
{lightnessWarning && <Forms.FormText className="client-theme-warning">Selected color is very light</Forms.FormText>} {lightnessWarning && <Forms.FormText className="client-theme-warning">Selected color is very light</Forms.FormText>}
{lightModeWarning && <Forms.FormText className="client-theme-warning">Light mode isn't supported</Forms.FormText>} {lightModeWarning && <Forms.FormText className="client-theme-warning">Light mode isn't supported</Forms.FormText>}
</div> </div>
: null} : null
}
</div> </div>
); );
} }
@ -85,7 +83,7 @@ const settings = definePluginSettings({
export default definePlugin({ export default definePlugin({
name: "ClientTheme", name: "ClientTheme",
authors: [Devs.F53], authors: [Devs.F53, Devs.Nuckyz],
description: "Recreation of the old client theme experiment. Add a color to your Discord client theme", description: "Recreation of the old client theme experiment. Add a color to your Discord client theme",
settings, settings,
@ -113,8 +111,9 @@ export default definePlugin({
} }
}); });
const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g;
async function generateColorOffsets() { async function generateColorOffsets() {
const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g;
const styleLinkNodes = document.querySelectorAll('link[rel="stylesheet"]'); const styleLinkNodes = document.querySelectorAll('link[rel="stylesheet"]');
const variableLightness = {} as Record<string, number>; const variableLightness = {} as Record<string, number>;
@ -213,7 +212,7 @@ function hexToHSL(hexCode: string) {
} }
// Minimized math just for lightness, lowers lag when changing colors // Minimized math just for lightness, lowers lag when changing colors
function hexToLightness(hexCode) { function hexToLightness(hexCode: string) {
// Hex => RGB normalized to 0-1 // Hex => RGB normalized to 0-1
const r = parseInt(hexCode.substring(0, 2), 16) / 255; const r = parseInt(hexCode.substring(0, 2), 16) / 255;
const g = parseInt(hexCode.substring(2, 4), 16) / 255; const g = parseInt(hexCode.substring(2, 4), 16) / 255;