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 :)
Fixed css values by using variables
2024-08-09 22:10:01 +05:30 · 2024-08-09 19:31:08 +05:30
4 changed files with 190 additions and 9 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");
+		};
+	});
+}
--- a/web/index.html
+++ b/web/index.html
@@ -28,8 +28,19 @@
 				<h2>infinite lo-fi music in the background</h2>
 				<div class="button-container">
 					<button id="play-btn" class="button">play</button>
+					<button id="theme-btn" class="theme-btn">
+						<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="theme-icon" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6.99998 13.6667C6.1245 13.6667 5.25759 13.4942 4.44876 13.1592C3.63992 12.8242 2.90499 12.3331 2.28593 11.7141C1.03569 10.4638 0.333313 8.76812 0.333313 7.00001C0.333313 5.2319 1.03569 3.53621 2.28593 2.28596C3.53618 1.03572 5.23187 0.333344 6.99998 0.333344C10.6666 0.333344 13.6666 3.00001 13.6666 6.33334C13.6666 7.39421 13.2452 8.41162 12.4951 9.16177C11.7449 9.91192 10.7275 10.3333 9.66665 10.3333H8.46665C8.26665 10.3333 8.13331 10.4667 8.13331 10.6667C8.13331 10.7333 8.19998 10.8 8.19998 10.8667C8.46665 11.2 8.59998 11.6 8.59998 12C8.66665 12.9333 7.93331 13.6667 6.99998 13.6667ZM6.99998 1.66668C5.58549 1.66668 4.22894 2.22858 3.22874 3.22877C2.22855 4.22897 1.66665 5.58552 1.66665 7.00001C1.66665 8.4145 2.22855 9.77105 3.22874 10.7712C4.22894 11.7714 5.58549 12.3333 6.99998 12.3333C7.19998 12.3333 7.33331 12.2 7.33331 12C7.33331 11.8667 7.26665 11.8 7.26665 11.7333C6.99998 11.4 6.86665 11.0667 6.86665 10.6667C6.86665 9.73334 7.59998 9.00001 8.53331 9.00001H9.66665C10.3739 9.00001 11.0522 8.71906 11.5523 8.21896C12.0524 7.71886 12.3333 7.04059 12.3333 6.33334C12.3333 3.73334 9.93331 1.66668 6.99998 1.66668ZM3.33331 5.66668C3.86665 5.66668 4.33331 6.13334 4.33331 6.66668C4.33331 7.20001 3.86665 7.66668 3.33331 7.66668C2.79998 7.66668 2.33331 7.20001 2.33331 6.66668C2.33331 6.13334 2.79998 5.66668 3.33331 5.66668ZM5.33331 3.00001C5.86665 3.00001 6.33331 3.46668 6.33331 4.00001C6.33331 4.53334 5.86665 5.00001 5.33331 5.00001C4.79998 5.00001 4.33331 4.53334 4.33331 4.00001C4.33331 3.46668 4.79998 3.00001 5.33331 3.00001ZM8.66665 3.00001C9.19998 3.00001 9.66665 3.46668 9.66665 4.00001C9.66665 4.53334 9.19998 5.00001 8.66665 5.00001C8.13331 5.00001 7.66665 4.53334 7.66665 4.00001C7.66665 3.46668 8.13331 3.00001 8.66665 3.00001ZM10.6666 5.66668C11.2 5.66668 11.6666 6.13334 11.6666 6.66668C11.6666 7.20001 11.2 7.66668 10.6666 7.66668C10.1333 7.66668 9.66665 7.20001 9.66665 6.66668C9.66665 6.13334 10.1333 5.66668 10.6666 5.66668Z" fill="#4C4F69"/>
+						</svg>
+							
+						Change theme
+					</button>
 				</div>

+				<div class="theme-modal">
+					
+				</div>
+				
 				<div class="status-bar">
 					<p id="listener-count">0 person tuned in</p>
 					<div id="volume-slider-container">
@@ -37,7 +48,6 @@
 						<input id="volume-slider" type="range" min="0" max="100" step="1" />
 					</div>
 				</div>
-
 			</main>

 			<aside role="alert" id="notification">
--- a/web/script.js
+++ b/web/script.js
@@ -285,7 +285,7 @@ meowAudio.onplay = () => {
 	}
 };

-// don't wanna jumpscare ppl
+// don't wanna jumpscare ppl meow
 achievementUnlockedAudio.volume = 0.05;

 window.addEventListener("offline", () => {
--- a/web/style.css
+++ b/web/style.css
@@ -36,6 +36,7 @@ body {
  padding: 2rem;
  margin: 0;
  background-color: var(--base);
+  transition: 0.2s background-color ease;
  overflow: hidden;
 }
@media (min-width: 768px) {
@@ -217,8 +218,8 @@ input[type="range"]::-ms-fill-upper {
  text-align: center;
 }

+
 .button:hover {
-  background-color: var(--surface1);
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(
    45deg,
@@ -231,19 +232,38 @@ input[type="range"]::-ms-fill-upper {

@media (prefers-color-scheme: dark) {
  .button:hover {
-    background-color: #1e1e2e;
    opacity: 1;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(
      45deg,
-      #585b70 0,
-      #585b70 1px,
-      #1e1e2e 0,
-      #1e1e2e 50%
+      var(--surface1) 0,
+      var(--surface1) 1px,
+      var(--base) 0,
+      var(--base) 50%
    );
  }
 }

+.theme-btn {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  font-family: monospace;
+  color: var(--text);
+  background-color: transparent;
+  margin-left: 20px ;
+  border: none;
+  opacity: 0.6;
+}
+
+.theme-btn:hover {
+  opacity: 1;
+}
+
+.theme-icon path {
+  fill: var(--text);
+}
+
 .button.button-active,
 .button:active {
  background: var(--text) !important;
@@ -378,3 +398,47 @@ aside#notification > #notification-title {
    opacity: 0;
  }
 }
+
+.theme-modal {
+  display: none;
+  width: 60vw;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--base);
+  top: 50%;
+  gap: 5px;
+  flex-direction: column;
+  position: fixed;
+  border: 2px solid var(--text);
+}
+
+.theme-modal.active{
+  display: flex;
+}
+
+.theme-modal:hover .theme-item {
+  opacity: 0.5;
+}
+
+.theme-item {
+  color: var(--text);
+  font-size: 16px;
+  padding: 10px 20px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.theme-modal .theme-item:hover{
+  opacity: 1;
+  background-color: white;
+  color: black;
+}
+
+.theme-colors{
+  display: flex;
+  padding: 5px;
+  display: flex;
+  gap: 2px;
+  border-radius: 20px;
+}
Author	SHA1	Message	Date
DMZTdhruv	ba9dca7844	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
DMZTdhruv	7c6f10b3c1	Fixed css values by using variables	2024-08-09 19:31:08 +05:30