diff --git a/src/plugins/clientTheme/README.md b/src/plugins/clientTheme/README.md new file mode 100644 index 00000000..4b40148c --- /dev/null +++ b/src/plugins/clientTheme/README.md @@ -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 diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx index 3e07b15f..d0026c75 100644 --- a/src/plugins/clientTheme/index.tsx +++ b/src/plugins/clientTheme/index.tsx @@ -11,11 +11,12 @@ import { Devs } from "@utils/constants"; import { getTheme, Theme } from "@utils/discord"; import { Margins } from "@utils/margins"; import { classes } from "@utils/misc"; +import { LazyComponent } from "@utils/react"; import definePlugin, { OptionType } from "@utils/types"; -import { findByCodeLazy } from "@webpack"; +import { findByCode } from "@webpack"; 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 = [ "#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D", @@ -24,11 +25,7 @@ const colorPresets = [ ]; function onPickColor(color: number) { - let hexColor = color.toString(16); - - while (hexColor.length < 6) { - hexColor = "0" + hexColor; - } + const hexColor = color.toString(16).padStart(6, "0"); settings.store.color = hexColor; updateColorVars(hexColor); @@ -59,7 +56,8 @@ function ThemeSettings() { {lightnessWarning && Selected color is very light} {lightModeWarning && Light mode isn't supported} - : null} + : null + } ); } @@ -85,7 +83,7 @@ const settings = definePluginSettings({ export default definePlugin({ 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", settings, @@ -113,8 +111,9 @@ export default definePlugin({ } }); +const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g; + async function generateColorOffsets() { - const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g; const styleLinkNodes = document.querySelectorAll('link[rel="stylesheet"]'); const variableLightness = {} as Record; @@ -213,7 +212,7 @@ function hexToHSL(hexCode: string) { } // Minimized math just for lightness, lowers lag when changing colors -function hexToLightness(hexCode) { +function hexToLightness(hexCode: string) { // Hex => RGB normalized to 0-1 const r = parseInt(hexCode.substring(0, 2), 16) / 255; const g = parseInt(hexCode.substring(2, 4), 16) / 255;