Beta theme feature

Hello I tried to add the theme feature, this is just a beta version, I will later add the search option, and more themes, just wanted to see if my code is ok with you :)
2024-08-09 22:10:01 +05:30
parent 7c6f10b3c1
commit ba9dca7844
4 changed files with 165 additions and 3 deletions
--- a/web/bg.js
+++ b/web/bg.js
@@ -1,7 +1,61 @@
 const DOT_COLOR_LIGHT_MODE = "#dce0e8";
-const DOT_COLOR_DARK_MODE = "#45475a";
+let DOT_COLOR_DARK_MODE = "#45475a";
 const DOT_RADIUS = 1 * devicePixelRatio;

+// theme variables
+const rootStyles = document.documentElement.style;
+console.log(rootStyles);
+
+const changeThemeBtn = document.getElementById("theme-btn");
+const themeModal = document.querySelector(".theme-modal");
+const themes = {
+	darkMode: [
+		{
+			name: "Gotham Theme",
+			background: "#0C1014",
+			textColor: "#98D1CE",
+			highlight: "#1B2B34",
+			baseColor: "#343D46",
+		},
+		{
+			name: "Solarized Dark",
+			background: "#002B36",
+			textColor: "#839496",
+			highlight: "#073642",
+			baseColor: "#586e75",
+		},
+		{
+			name: "Dracula",
+			background: "#282A36",
+			textColor: "#F8F8F2",
+			highlight: "#44475A",
+			baseColor: "#6272A4",
+		},
+		{
+			name: "Material Dark",
+			background: "#263238",
+			textColor: "#FFFFFF",
+			highlight: "#37474F",
+			baseColor: "#80CBC4",
+		},
+		{
+			name: "Monokai",
+			background: "#272822",
+			textColor: "#F8F8F2",
+			highlight: "#49483E",
+			baseColor: "#A6E22E",
+		},
+		{
+			name: "Gruvbox Dark",
+			background: "#282828",
+			textColor: "#ebdbb2",
+			highlight: "#3c3836",
+			baseColor: "#b16286",
+		},
+	],
+	lightThemes: [],
+};
+
 const canvas = document.getElementById("bg");
 const ctx = canvas.getContext("2d");

@@ -67,3 +121,56 @@ if (window.matchMedia) {

 resizeCanvas(window.innerWidth, window.innerHeight);
 drawPattern();
+
+changeThemeBtn.onmousedown = () => {
+	themeModal.classList.add("active");
+	displayThemes();
+};
+
+function displayThemes() {
+	themeModal.innerHTML = "";
+	// biome-ignore lint/complexity/noForEach: <biome wanted me to use for..of loop but foreach is better for readablity ig.>
+	themes.darkMode.forEach((theme) => {
+		const themeItem = document.createElement("div");
+		themeItem.className = "theme-item";
+
+		const themeName = document.createElement("div");
+		themeName.className = "theme-name";
+		themeName.innerText = theme.name;
+
+		const themePreview = document.createElement("div");
+		themePreview.className = "theme-preview";
+		themePreview.style.background = theme.name;
+
+		const themeColors = document.createElement("div");
+		themeColors.className = "theme-colors";
+		themeColors.style.background = theme.background;
+
+		const colors = ["textColor", "highlight", "baseColor"];
+		// biome-ignore lint/complexity/noForEach: <biome wanted me to use for..of loop but foreach is better for readablity ig.>
+		colors.forEach((color) => {
+			const colorDiv = document.createElement("div");
+			colorDiv.style.background = theme[color];
+			colorDiv.style.width = "20px";
+			colorDiv.style.height = "20px";
+			colorDiv.style.borderRadius = "50%";
+			colorDiv.title = color;
+			themeColors.appendChild(colorDiv);
+		});
+
+		themeItem.appendChild(themeName);
+		themeItem.appendChild(themePreview);
+		themeItem.appendChild(themeColors);
+		themeModal.appendChild(themeItem);
+
+		themeItem.onmouseover = () => {
+			rootStyles.setProperty("--text", theme.textColor);
+			rootStyles.setProperty("--surface0", theme.highlight);
+			rootStyles.setProperty("--base", theme.background);
+			DOT_COLOR_DARK_MODE = theme.highlight;
+		};
+		themeItem.onmousedown = () => {
+			themeModal.classList.remove("active");
+		};
+	});
+}