From 7c6f10b3c12b696828b13f18a5b84518e44f3294 Mon Sep 17 00:00:00 2001 From: DMZTdhruv Date: Fri, 9 Aug 2024 19:31:08 +0530 Subject: [PATCH 1/2] Fixed css values by using variables --- web/style.css | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/web/style.css b/web/style.css index 6184892..541a6f6 100644 --- a/web/style.css +++ b/web/style.css @@ -217,8 +217,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 +231,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; -- 2.49.1 From ba9dca78445c4ae84d5674a3ebd5f044c8dd53f3 Mon Sep 17 00:00:00 2001 From: DMZTdhruv Date: Fri, 9 Aug 2024 22:10:01 +0530 Subject: [PATCH 2/2] 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 @@
-