From ba9dca78445c4ae84d5674a3ebd5f044c8dd53f3 Mon Sep 17 00:00:00 2001 From: DMZTdhruv Date: Fri, 9 Aug 2024 22:10:01 +0530 Subject: [PATCH] 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 :) --- web/bg.js | 109 ++++++++++++++++++++++++++++++++++++++++++++++++- web/index.html | 12 +++++- web/script.js | 2 +- web/style.css | 45 ++++++++++++++++++++ 4 files changed, 165 insertions(+), 3 deletions(-) diff --git a/web/bg.js b/web/bg.js index 3d0385f..9486e4f 100644 --- 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: + 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: + 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"); + }; + }); +} diff --git a/web/index.html b/web/index.html index add0d6d..c7f00d4 100644 --- a/web/index.html +++ b/web/index.html @@ -28,8 +28,19 @@

infinite lo-fi music in the background

+
+
+ +
+

0 person tuned in

@@ -37,7 +48,6 @@
-