Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -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/themes/album-art/script.js
+26 -9
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 = "";
@@ -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);
}
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.