From 074ebae3343170c19ca128ed76b0732375ea36bf Mon Sep 17 00:00:00 2001
From: V <vendicated@riseup.net>
Date: Wed, 22 Nov 2023 01:57:00 +0100
Subject: [PATCH] ClientTheme fixes

---
 src/plugins/clientTheme/README.md |  7 +++++++
 src/plugins/clientTheme/index.tsx | 21 ++++++++++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 src/plugins/clientTheme/README.md

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 && <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>}
                 </div>
-                : null}
+                : null
+            }
         </div>
     );
 }
@@ -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<string, number>;
@@ -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;