From 8ef8af42882ef0e0f00e4b807e6424264205544a Mon Sep 17 00:00:00 2001 From: nutty Date: Sat, 1 Aug 2026 06:05:52 +1000 Subject: [PATCH] Added 'Use Custom Colors' toggle for all themes. FUCK YEAH CUSTOM COLORS I'M LITERALLY CUMMING FUCK!! --- now-playing/script.js | 3 + now-playing/settings/settings.json | 26 ++++++++ now-playing/style.css | 4 +- now-playing/themes/album-art/script.js | 35 ++++++++--- now-playing/themes/card/script.js | 10 ++- now-playing/themes/classic/script.js | 10 ++- now-playing/themes/compact/script.js | 46 ++++++++++---- now-playing/themes/compact/style.css | 4 +- now-playing/themes/simple/script.js | 19 +++--- now-playing/themes/simple/style.css | 1 + now-playing/themes/standard/script.js | 87 +++++++++++++++++++------- now-playing/themes/vinyl/script.js | 5 +- 12 files changed, 190 insertions(+), 60 deletions(-) diff --git a/now-playing/script.js b/now-playing/script.js index 0f41617..7b69ee7 100644 --- a/now-playing/script.js +++ b/now-playing/script.js @@ -32,6 +32,9 @@ const fontSize = GetIntParam("fontSize", 20); const maxWidth = GetIntParam("maxWidth", 500); const verticalAlignment = urlParams.get('verticalAlignment') || 'align-to-center'; const textAlignment = urlParams.get('textAlignment') || 'left'; +const useCustomColors = GetBooleanParam("useCustomColors", false); +const color1 = urlParams.get('color1') || '#ffffff'; +const color2 = urlParams.get('color2') || '#1d1d1d'; const includedApplications = urlParams.get('includedApplications') || ''; const excludedApplications = urlParams.get('excludedApplications') || ''; diff --git a/now-playing/settings/settings.json b/now-playing/settings/settings.json index f2a1259..33a3d2e 100644 --- a/now-playing/settings/settings.json +++ b/now-playing/settings/settings.json @@ -124,6 +124,32 @@ "defaultValue": "left", "group": "Appearance" }, + { + "id": "useCustomColors", + "label": "Use Custom Colors", + "description": "", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "color1", + "label": "Primary Color", + "description": "", + "type": "color", + "defaultValue": "#ffffff", + "showIf": "useCustomColors", + "group": "Appearance" + }, + { + "id": "color2", + "label": "Secondary Color", + "description": "", + "type": "color", + "defaultValue": "#1d1d1d", + "showIf": "useCustomColors", + "group": "Appearance" + }, { "id": "includedApplications", "label": "Included Apps", diff --git a/now-playing/style.css b/now-playing/style.css index 36c279c..1d6282c 100644 --- a/now-playing/style.css +++ b/now-playing/style.css @@ -184,11 +184,11 @@ body { } .text-label.is-overflowing .scroll-content { - animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite; + animation: ping-pong-scroll var(--marquee-duration, 8s) ease-in-out infinite; } .text-label.is-overflowing { - animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite; + animation: ping-pong-mask var(--marquee-duration, 8s) ease-in-out infinite; /* Static gradient structure referencing dynamic color variables */ mask-image: linear-gradient( diff --git a/now-playing/themes/album-art/script.js b/now-playing/themes/album-art/script.js index 1f906fb..e5a82e4 100644 --- a/now-playing/themes/album-art/script.js +++ b/now-playing/themes/album-art/script.js @@ -60,14 +60,28 @@ async function ChangeTrack(mediaProps, accentColorPalette) { albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; // Apply a tint - const baseColor = accentColorPalette.DarkMuted; - // Solid from 0% to 30%, then fading to 0% opacity at 100% - textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`; - if (!showAlbumArt) - songInfoContainer.style.background = accentColorPalette.LightVibrant; + if (!useCustomColors) + { + const baseColor = accentColorPalette.DarkMuted; + // Solid from 0% to 30%, then fading to 0% opacity at 100% + textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`; + if (!showAlbumArt) + songInfoContainer.style.background = accentColorPalette.LightVibrant; - // Apply text color - document.body.style.color = accentColorPalette.LightVibrant; + // Apply text color + document.body.style.color = accentColorPalette.LightVibrant; + } + else + { + const baseColor = color2; + // Solid from 0% to 30%, then fading to 0% opacity at 100% + textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`; + if (!showAlbumArt) + songInfoContainer.style.background = color1; + + // Apply text color + document.body.style.color = color1; + } trackLabel.style.opacity = ""; artistLabel.style.opacity = ""; @@ -89,6 +103,9 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { const durationMs = timelineProps.EndTime; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = Math.min(100, Math.max(0, progressPercent)); - progressBar.style.width = `${progressPercent}%`; - progressBar.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`); + progressBar.style.width = `${progressPercent}%`; + if (!useCustomColors) + progressBar.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + else + progressBar.style.setProperty('--accent-color', color1); } \ No newline at end of file diff --git a/now-playing/themes/card/script.js b/now-playing/themes/card/script.js index caa9b35..baf4f4c 100644 --- a/now-playing/themes/card/script.js +++ b/now-playing/themes/card/script.js @@ -98,5 +98,13 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = Math.min(100, Math.max(0, progressPercent)); progressBarFill.style.width = `${progressPercent}%`; - progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + if (!useCustomColors) + { + progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + } + else + { + progressBarFill.style.setProperty('--accent-color', color1); + document.body.style.color = color1; + } } \ No newline at end of file diff --git a/now-playing/themes/classic/script.js b/now-playing/themes/classic/script.js index 0789624..64b7fd6 100644 --- a/now-playing/themes/classic/script.js +++ b/now-playing/themes/classic/script.js @@ -98,5 +98,13 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = Math.min(100, Math.max(0, progressPercent)); progressBarFill.style.width = `${progressPercent}%`; - progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + if (!useCustomColors) + { + progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + } + else + { + progressBarFill.style.setProperty('--accent-color', color1); + document.body.style.color = color1; + } } \ No newline at end of file diff --git a/now-playing/themes/compact/script.js b/now-playing/themes/compact/script.js index 75001a5..a8b736d 100644 --- a/now-playing/themes/compact/script.js +++ b/now-playing/themes/compact/script.js @@ -53,19 +53,39 @@ async function ChangeTrack(mediaProps, accentColorPalette) { // Extract the image source string (use fallback if Windows has no art) // Set the pill color - switch (themeVariant) { - case "compact-inverted": - progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant; - progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; - songLabel.style.color = accentColorPalette.LightVibrant; - songLabelBackground.style.color = accentColorPalette.DarkVibrant; - break; - default: - progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; - progressBar.style.background = accentColorPalette.LightVibrant; - songLabel.style.color = accentColorPalette.DarkVibrant; - songLabelBackground.style.color = accentColorPalette.LightVibrant; - break; + if (!useCustomColors) + { + switch (themeVariant) { + case "compact-inverted": + progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant; + progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; + songLabel.style.color = accentColorPalette.LightVibrant; + songLabelBackground.style.color = accentColorPalette.DarkVibrant; + break; + default: + progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; + progressBar.style.background = accentColorPalette.LightVibrant; + songLabel.style.color = accentColorPalette.DarkVibrant; + songLabelBackground.style.color = accentColorPalette.LightVibrant; + break; + } + } + else + { + switch (themeVariant) { + case "compact-inverted": + progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${color1}, black 60%)`; + progressBar.style.background = color2; + songLabel.style.color = color1; + songLabelBackground.style.color = color2; + break; + default: + progressBarTrack.style.backgroundColor = color2; + progressBar.style.background = color1; + songLabel.style.color = color2; + songLabelBackground.style.color = color1; + break; + } } songLabel.style.opacity = ""; diff --git a/now-playing/themes/compact/style.css b/now-playing/themes/compact/style.css index 15f08ed..9b87c0c 100644 --- a/now-playing/themes/compact/style.css +++ b/now-playing/themes/compact/style.css @@ -92,11 +92,11 @@ /* Marquee scroll animation */ #song-label.is-overflowing .scroll-content, #song-label-background.is-overflowing .scroll-content { - animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite; + animation: ping-pong-scroll var(--marquee-duration, 8s) ease-in-out infinite; } /* Mask animation applied to container */ #song-label.is-overflowing, #song-label-background.is-overflowing { - animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite; + animation: ping-pong-mask var(--marquee-duration, 8s) ease-in-out infinite; } \ No newline at end of file diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js index ad6e24d..5b85975 100644 --- a/now-playing/themes/simple/script.js +++ b/now-playing/themes/simple/script.js @@ -92,15 +92,16 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = Math.min(100, Math.max(0, progressPercent)); progressBarFill.style.width = `${progressPercent}%`; - progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); - switch (themeVariant) { - case "matte": - progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant); - break; - case "matte-dark": - default: - progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); - break; + + if (!useCustomColors) + { + progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + document.body.style.color = accentColorPalette.LightVibrant; + } + else + { + progressBarFill.style.setProperty('--accent-color', color1); + document.body.style.color = color1; } } diff --git a/now-playing/themes/simple/style.css b/now-playing/themes/simple/style.css index 5e0ae26..283f1d7 100644 --- a/now-playing/themes/simple/style.css +++ b/now-playing/themes/simple/style.css @@ -53,6 +53,7 @@ flex-grow: 1; min-width: 0; gap: 0.25em; + transition: color 1s ease; } #background-transition-layer { diff --git a/now-playing/themes/standard/script.js b/now-playing/themes/standard/script.js index fa6006c..7af8949 100644 --- a/now-playing/themes/standard/script.js +++ b/now-playing/themes/standard/script.js @@ -73,26 +73,55 @@ async function ChangeTrack(mediaProps, accentColorPalette) { SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title); SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist); - switch (themeVariant) { - case "matte": - document.body.style.color = accentColorPalette.DarkVibrant; - break; - case "matte-dark": - document.body.style.color = accentColorPalette.LightVibrant; - break; + if (!useCustomColors) + { + switch (themeVariant) { + case "matte": + document.body.style.color = accentColorPalette.DarkVibrant; + break; + case "matte-dark": + document.body.style.color = accentColorPalette.LightVibrant; + break; + } + } + else + { + switch (themeVariant) { + case "matte": + document.body.style.color = color2; + break; + // case "matte-dark": + default: + document.body.style.color = color1; + break; + } } // Extract the image source string (use fallback if Windows has no art) const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; // Set the image - switch (themeVariant) { - case "matte": - songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant; - break; - case "matte-dark": - songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; - break; + if (!useCustomColors) { + switch (themeVariant) { + case "matte": + songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant; + break; + case "matte-dark": + songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; + break; + } + } + else + { + switch (themeVariant) { + case "matte": + songInfoContainer.style.backgroundColor = color1; + break; + // case "matte-dark": + default: + songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${color2}, black 60%)`; + break; + } } backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; @@ -135,13 +164,27 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { progressPercent = Math.min(100, Math.max(0, progressPercent)); progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); - switch (themeVariant) { - case "matte": - progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant); - break; - case "matte-dark": - default: - progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); - break; + if (!useCustomColors) { + switch (themeVariant) { + case "matte": + progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant); + break; + case "matte-dark": + default: + progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); + break; + } + } + else + { + switch (themeVariant) { + case "matte": + progressBarFill.style.setProperty('--accent-color', color2); + break; + // case "matte-dark": + default: + progressBarFill.style.setProperty('--accent-color', color1); + break; + } } } \ No newline at end of file diff --git a/now-playing/themes/vinyl/script.js b/now-playing/themes/vinyl/script.js index 5559960..c4d2d48 100644 --- a/now-playing/themes/vinyl/script.js +++ b/now-playing/themes/vinyl/script.js @@ -66,7 +66,10 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { const durationMs = timelineProps.EndTime; progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = Math.min(100, Math.max(0, progressPercent)); - document.documentElement.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`); + if (!useCustomColors) + document.documentElement.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`); + else + document.documentElement.style.setProperty('--accent-color', color1); // Calculate the offset. // 0% progress = 157.1 offset. 100% progress = 0 offset.