diff --git a/src/plugins/clientTheme/README.md b/src/plugins/clientTheme/README.md
new file mode 100644
index 000000000..4b40148c5
--- /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 3e07b15fd..d0026c759 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;