Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added 'Use Custom Colors' toggle for all themes. FUCK YEAH CUSTOM COLORS I'M LITERALLY CUMMING FUCK!!

Browse Source
This commit is contained in:
nutty
2026-08-01 06:05:52 +10:00
parent 5d541fe483
commit 8ef8af4288
12 changed files with 190 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/script.js
+3
View File
@@ -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') || '';
now-playing/settings/settings.json
+26
View File
@@ -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",
now-playing/style.css
+2 -2
View File
@@ -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(
now-playing/themes/album-art/script.js
+25 -8
View File
@@ -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 = "";
@@ -90,5 +104,8 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
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}`);
if (!useCustomColors)
progressBar.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
else
progressBar.style.setProperty('--accent-color', color1);
}
now-playing/themes/card/script.js
+9 -1
View File
@@ -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;
}
}
now-playing/themes/classic/script.js
+9 -1
View File
@@ -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;
}
}
now-playing/themes/compact/script.js
+33 -13
View File
@@ -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 = "";
now-playing/themes/compact/style.css
+2 -2
View File
@@ -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;
}
now-playing/themes/simple/script.js
+10 -9
View File
@@ -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;
}
}
now-playing/themes/simple/style.css
+1
View File
@@ -53,6 +53,7 @@
flex-grow: 1;
min-width: 0;
gap: 0.25em;
transition: color 1s ease;
}
#background-transition-layer {
now-playing/themes/standard/script.js
+65 -22
View File
@@ -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;
}
}
}
now-playing/themes/vinyl/script.js
+4 -1
View File
@@ -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.