dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-07 16:52:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial webpack version without components

Browse source
This commit is contained in:
Send_Nukez 2021-10-25 14:49:34 +02:00
parent 299503c426
commit a3c6376ba3
10 changed files with 11203 additions and 2779 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules/

322
color.ini → dist/color.ini vendored
View file

@ -1,162 +1,162 @@
[base] [base]
text = FFFFFF text = FFFFFF
subtext = F0F0F0 subtext = F0F0F0
sidebar-text = FFFFFF sidebar-text = FFFFFF
main = 000000 main = 000000
sidebar = 1ed760 sidebar = 1ed760
player = 000000 player = 000000
card = 000000 card = 000000
shadow = 202020 shadow = 202020
selected-row = 797979 selected-row = 797979
button = 1ed760 button = 1ed760
button-active = 1ed760 button-active = 1ed760
button-disabled = 535353 button-disabled = 535353
tab-active = 166632 tab-active = 166632
notification = 1db954 notification = 1db954
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF
[white] [white]
text = 363636 text = 363636
subtext = 3D3D3D subtext = 3D3D3D
sidebar-text = FFF9F4 sidebar-text = FFF9F4
main = FFF9F4 main = FFF9F4
sidebar = FFA789 sidebar = FFA789
player = FFF9F4 player = FFF9F4
card = FFF9F4 card = FFF9F4
shadow = d3d3d3 shadow = d3d3d3
selected-row = 6D6D6D selected-row = 6D6D6D
button = ff8367 button = ff8367
button-active = ff8367 button-active = ff8367
button-disabled = 535353 button-disabled = 535353
tab-active = ffdace tab-active = ffdace
notification = FFA789 notification = FFA789
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF
[dark] [dark]
text = F0F0F0 text = F0F0F0
subtext = F0F0F0 subtext = F0F0F0
sidebar-text = 0a0e14 sidebar-text = 0a0e14
main = 0a0e14 main = 0a0e14
sidebar = C2D935 sidebar = C2D935
player = 0a0e14 player = 0a0e14
card = 0a0e14 card = 0a0e14
shadow = 202020 shadow = 202020
selected-row = DEDEDE selected-row = DEDEDE
button = C2D935 button = C2D935
button-active = C2D935 button-active = C2D935
button-disabled = 535353 button-disabled = 535353
tab-active = 727d2b tab-active = 727d2b
notification = C2D935 notification = C2D935
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF
[dracula] [dracula]
text = f8f8f2 text = f8f8f2
subtext = f8f8f2 subtext = f8f8f2
sidebar-text = F0F0F0 sidebar-text = F0F0F0
main = 44475a main = 44475a
sidebar = 6272a4 sidebar = 6272a4
player = 44475a player = 44475a
card = 6272a4 card = 6272a4
shadow = 000000 shadow = 000000
selected-row = bd93f9 selected-row = bd93f9
button = ffb86c button = ffb86c
button-active = 8be9fd button-active = 8be9fd
button-disabled = 535353 button-disabled = 535353
tab-active = 6272a4 tab-active = 6272a4
notification = bd93f9 notification = bd93f9
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF
[nord-light] [nord-light]
text = 2e3440 text = 2e3440
subtext = 3b4252 subtext = 3b4252
sidebar-text = ECEFF4 sidebar-text = ECEFF4
main = ECEFF4 main = ECEFF4
sidebar = 5E81AC sidebar = 5E81AC
player = ECEFF4 player = ECEFF4
card = ebcb8b card = ebcb8b
shadow = eceff4 shadow = eceff4
selected-row = 4c566a selected-row = 4c566a
button = 81a1c1 button = 81a1c1
button-active = 81a1c1 button-active = 81a1c1
button-disabled = c0c0c0 button-disabled = c0c0c0
tab-active = ebcb8b tab-active = ebcb8b
notification = a3be8c notification = a3be8c
notification-error = bf616a notification-error = bf616a
misc = BFBFBF misc = BFBFBF
[nord-dark] [nord-dark]
text = ECEFF4 text = ECEFF4
subtext = E5E9F0 subtext = E5E9F0
sidebar-text = 434c5e sidebar-text = 434c5e
main = 2e3440 main = 2e3440
sidebar = 88C0D0 sidebar = 88C0D0
player = 2e3440 player = 2e3440
card = 2e3440 card = 2e3440
shadow = 2E3440 shadow = 2E3440
selected-row = D8DEE9 selected-row = D8DEE9
button = 81A1C1 button = 81A1C1
button-active = 81A1C1 button-active = 81A1C1
button-disabled = 434C5E button-disabled = 434C5E
tab-active = 434C5E tab-active = 434C5E
notification = A3BE8C notification = A3BE8C
notification-error = BF616A notification-error = BF616A
misc = BFBFBF misc = BFBFBF
[purple] [purple]
text = f1eaff text = f1eaff
subtext = f1eaff subtext = f1eaff
sidebar-text = e0d0ff sidebar-text = e0d0ff
main = 0A0E14 main = 0A0E14
sidebar = 6F3C89 sidebar = 6F3C89
player = 0A0E14 player = 0A0E14
card = 0A0E14 card = 0A0E14
shadow = 3a2645 shadow = 3a2645
selected-row = EBDFFF selected-row = EBDFFF
button = c76af6 button = c76af6
button-active = 6F3C89 button-active = 6F3C89
button-disabled = 535353 button-disabled = 535353
tab-active = 58306D tab-active = 58306D
notification = ff9e00 notification = ff9e00
notification-error = f61379 notification-error = f61379
misc = DEDEDE misc = DEDEDE
[samourai] [samourai]
text = ebdbb2 text = ebdbb2
subtext = ebdbb2 subtext = ebdbb2
sidebar-text = 461217 sidebar-text = 461217
main = 461217 main = 461217
sidebar = ebdbb2 sidebar = ebdbb2
player = 461217 player = 461217
card = 461217 card = 461217
shadow = 3a2645 shadow = 3a2645
selected-row = 909090 selected-row = 909090
button = e7a52d button = e7a52d
button-active = e7a52d button-active = e7a52d
button-disabled = 535353 button-disabled = 535353
tab-active = e7a52d tab-active = e7a52d
notification = e7a52d notification = e7a52d
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF
[beach-sunset] [beach-sunset]
text = FFFFFF text = FFFFFF
subtext = F0F0F0 subtext = F0F0F0
sidebar-text = F0F0F0 sidebar-text = F0F0F0
main = 262626 main = 262626
sidebar = bd3e3e sidebar = bd3e3e
player = 262626 player = 262626
card = 262626 card = 262626
shadow = 000000 shadow = 000000
selected-row = d1d6e2 selected-row = d1d6e2
button = f1a84f button = f1a84f
button-active = c98430 button-active = c98430
button-disabled = 535353 button-disabled = 535353
tab-active = f1a84f tab-active = f1a84f
notification = c98430 notification = c98430
notification-error = e22134 notification-error = e22134
misc = BFBFBF misc = BFBFBF

109
dist/dribbblish-dynamic.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1226
dist/user.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

454
dribbblish-dynamic.js
View file

@ -1,454 +0,0 @@
let current = "2.6.0";
/* Config settings */
DribbblishShared.config.register({
area: "Animations & Transitions",
type: "slider",
key: "fadeDuration",
name: "Color Fade Duration",
description: "Select the duration of the color fading transition",
defaultValue: 0.5,
data: {
min: 0,
max: 10,
step: 0.1,
suffix: "s"
},
onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s")
});
// waitForElement because Spicetify is not initialized at startup
waitForElement(["#main"], () => {
DribbblishShared.config.register({
area: { name: "About", order: 999 },
type: "button",
key: "aboutDribbblish",
name: "Info",
description: `
OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
Dribbblish: v${current}
`,
data: "Copy",
onChange: (val) => {
copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description);
Spicetify.showNotification("Copied Versions");
}
});
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function copyToClipboard(text) {
var input = document.createElement("textarea");
input.style.display = "fixed";
input.innerHTML = text;
document.body.appendChild(input);
input.select();
var result = document.execCommand("copy");
document.body.removeChild(input);
return result;
}
/* js */
function getAlbumInfo(uri) {
return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
}
function isLight(hex) {
var [r, g, b] = hexToRgb(hex).map(Number);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 128;
}
function hexToRgb(hex) {
var bigint = parseInt(hex.replace("#", ""), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return [r, g, b];
}
function rgbToHex([r, g, b]) {
const rgb = (r << 16) | (g << 8) | (b << 0);
return "#" + (0x1000000 + rgb).toString(16).slice(1);
}
const LightenDarkenColor = (h, p) =>
"#" +
[1, 3, 5]
.map((s) => parseInt(h.substr(s, 2), 16))
.map((c) => parseInt((c * (100 + p)) / 100))
.map((c) => (c < 255 ? c : 255))
.map((c) => c.toString(16).padStart(2, "0"))
.join("");
function rgbToHsl([r, g, b]) {
(r /= 255), (g /= 255), (b /= 255);
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h,
s,
l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, l];
}
function hslToRgb([h, s, l]) {
var r, g, b;
if (s == 0) {
r = g = b = l; // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r * 255, g * 255, b * 255];
}
function setLightness(hex, lightness) {
hsl = rgbToHsl(hexToRgb(hex));
hsl[2] = lightness;
return rgbToHex(hslToRgb(hsl));
}
function parseComputedStyleColor(col) {
if (col.startsWith("#")) return col;
if (col.startsWith("rgb("))
return rgbToHex(
col
.replace(/rgb|(|)/g, "")
.split(",")
.map((part) => Number(part.trim()))
);
}
// `parseComputedStyleColor()` beacuse "--spice-sidebar" is `rgb()`
let textColor = parseComputedStyleColor(getComputedStyle(document.documentElement).getPropertyValue("--spice-text"));
let textColorBg = parseComputedStyleColor(getComputedStyle(document.documentElement).getPropertyValue("--spice-main"));
let sidebarColor = parseComputedStyleColor(getComputedStyle(document.documentElement).getPropertyValue("--spice-sidebar"));
function setRootColor(name, colHex) {
let root = document.documentElement;
if (root === null) return;
root.style.setProperty("--spice-" + name, colHex);
root.style.setProperty("--spice-rgb-" + name, hexToRgb(colHex).join(","));
}
function toggleDark(setDark) {
if (setDark === undefined) setDark = isLight(textColorBg);
document.documentElement.style.setProperty("--is_light", setDark ? 0 : 1);
textColorBg = setDark ? "#0A0A0A" : "#FAFAFA";
setRootColor("main", textColorBg);
setRootColor("player", textColorBg);
setRootColor("card", setDark ? "#040404" : "#ECECEC");
setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D");
setRootColor("notification", setDark ? "#303030" : "#DDDDDD");
updateColors(textColor, sidebarColor, false);
}
function checkDarkLightMode(colors) {
const theme = DribbblishShared.config.get("theme");
if (theme == 2) {
// Based on Time
const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]);
const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]);
const now = new Date();
const time = 60 * now.getHours() + now.getMinutes();
if (end < start) dark = start <= time || time < end;
else dark = start <= time && time < end;
toggleDark(dark);
} else if (theme == 3) {
// Based on Color
if (colors && colors.length > 0) toggleDark(isLight(colors[0]));
}
}
// Run every Minute to check time and set dark / light mode
setInterval(checkDarkLightMode, 60000);
DribbblishShared.config.register({
area: "Theme",
type: "checkbox",
key: "dynamicColors",
name: "Dynamic",
description: "If the Theme's Color should be extracted from Albumart",
defaultValue: true,
onChange: (val) => updateColors(),
showChildren: (val) => !val,
children: [
{
type: "color",
key: "colorOverride",
name: "Color",
description: "The Color of the Theme",
defaultValue: "#1ed760",
fireInitialChange: false,
onChange: (val) => updateColors()
}
]
});
DribbblishShared.config.register({
area: "Theme",
type: "select",
data: ["Dark", "Light", "Based on Time", "Based on Color"],
key: "theme",
name: "Theme",
description: "Select Dark / Bright mode",
defaultValue: 0,
showChildren: (val) => {
if (val == 2) return ["darkModeOnTime", "darkModeOffTime"];
//if (val == 3) return [""];
return false;
},
onChange: (val) => {
switch (val) {
case 0:
toggleDark(true);
break;
case 1:
toggleDark(false);
break;
case 2:
checkDarkLightMode();
break;
case 3:
checkDarkLightMode();
break;
}
},
children: [
{
type: "time",
key: "darkModeOnTime",
name: "Dark Mode On Time",
description: "Beginning of Dark mode time",
defaultValue: "20:00",
fireInitialChange: false,
onChange: checkDarkLightMode
},
{
type: "time",
key: "darkModeOffTime",
name: "Dark Mode Off Time",
description: "End of Dark mode time",
defaultValue: "06:00",
fireInitialChange: false,
onChange: checkDarkLightMode
}
]
});
var currentColor;
var currentSideColor;
function updateColors(textColHex, sideColHex, checkDarkMode = true) {
if (textColHex && sideColHex) {
currentColor = textColHex;
currentSideColor = sideColHex;
} else {
if (!(currentColor && currentSideColor)) return; // If `updateColors()` is called early these vars are undefined and would break
textColHex = currentColor;
sideColHex = currentSideColor;
}
if (!DribbblishShared.config.get("dynamicColors")) {
const col = DribbblishShared.config.get("colorOverride");
textColHex = col;
sideColHex = col;
}
let isLightBg = isLight(textColorBg);
if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15); // vibrant color is always too bright for white bg mode
let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20);
let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40);
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.9 : 0.14);
setRootColor("text", textColHex);
setRootColor("button", darkerColHex);
setRootColor("button-active", darkColHex);
setRootColor("selected-row", darkerColHex);
setRootColor("tab-active", buttonBgColHex);
setRootColor("button-disabled", buttonBgColHex);
setRootColor("sidebar", sideColHex);
if (checkDarkMode) checkDarkLightMode([textColHex, sideColHex]);
}
let nearArtistSpanText = "";
let coverListenerInstalled = true;
async function songchange() {
try {
// warning popup
if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`);
} catch (err) {
console.error(err);
}
let album_uri = Spicetify.Player.data.track.metadata.album_uri;
let bgImage = Spicetify.Player.data.track.metadata.image_url;
if (bgImage === undefined) {
bgImage = "/images/tracklist-row-song-fallback.svg";
textColor = "#509bf5";
updateColors(textColor, textColor);
coverListenerInstalled = false;
}
if (!coverListenerInstalled) hookCoverChange(true);
if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""));
let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
let recent_date = new Date();
recent_date.setMonth(recent_date.getMonth() - 6);
album_date = album_date.toLocaleString("default", album_date > recent_date ? { year: "numeric", month: "short" } : { year: "numeric" });
album_link = '<a title="' + Spicetify.Player.data.track.metadata.album_title + '" href="' + album_uri + '" data-uri="' + album_uri + '" data-interaction-target="album-name" class="tl-cell__content">' + Spicetify.Player.data.track.metadata.album_title + "</a>";
nearArtistSpanText = album_link + " • " + album_date;
} else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
// podcast
bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
} else if (Spicetify.Player.data.track.metadata.is_local == "true") {
// local file
nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
} else if (Spicetify.Player.data.track.provider == "ad") {
// ad
nearArtistSpanText = "advertisement";
coverListenerInstalled = false;
return;
} else {
// When clicking a song from the homepage, songChange is fired with half empty metadata
// todo: retry only once?
setTimeout(songchange, 200);
}
if (document.querySelector("#main-trackInfo-year") === null) {
waitForElement([".main-trackInfo-container"], (queries) => {
nearArtistSpan = document.createElement("div");
nearArtistSpan.id = "main-trackInfo-year";
nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale");
nearArtistSpan.innerHTML = nearArtistSpanText;
queries[0].append(nearArtistSpan);
});
} else {
nearArtistSpan.innerHTML = nearArtistSpanText;
}
document.documentElement.style.setProperty("--image_url", 'url("' + bgImage + '")');
}
Spicetify.Player.addEventListener("songchange", songchange);
function pickCoverColor(img) {
if (!img.currentSrc.startsWith("spotify:")) return;
var swatches = new Vibrant(img, 5).swatches();
lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"];
darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"];
mainCols = isLight(textColorBg) ? lightCols : darkCols;
textColor = "#509bf5";
for (var col in mainCols)
if (swatches[mainCols[col]]) {
textColor = swatches[mainCols[col]].getHex();
break;
}
sidebarColor = "#509bf5";
for (var col in lightCols)
if (swatches[lightCols[col]]) {
sidebarColor = swatches[lightCols[col]].getHex();
break;
}
updateColors(textColor, sidebarColor);
}
waitForElement([".main-nowPlayingBar-left"], (queries) => {
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.removedNodes.length > 0) coverListenerInstalled = false;
});
});
observer.observe(queries[0], { childList: true });
});
function hookCoverChange(pick) {
waitForElement([".cover-art-image"], (queries) => {
coverListenerInstalled = true;
if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
queries[0].addEventListener("load", function () {
try {
pickCoverColor(queries[0]);
} catch (error) {
console.error(error);
setTimeout(pickCoverColor, 300, queries[0]);
}
});
});
}
hookCoverChange(false);
(function Startup() {
if (!Spicetify.showNotification) {
setTimeout(Startup, 300);
return;
}
// Check latest release
fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
.then((response) => {
return response.json();
})
.then((data) => {
if (data.tag_name > current) {
upd = document.createElement("div");
upd.innerText = `Theme UPD v${data.tag_name} avail.`;
upd.classList.add("ellipsis-one-line", "main-type-finale");
upd.setAttribute("title", `Changes: ${data.name}`);
upd.style.setProperty("color", "var(--spice-button-active)");
document.querySelector(".main-userWidget-box").append(upd);
document.querySelector(".main-userWidget-box").classList.add("update-avail");
new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
}
})
.catch((err) => {
// Do something for an error here
console.error(err);
});
})();
document.documentElement.style.setProperty("--warning_message", " ");

7038
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

15
package.json Normal file
View file

@ -0,0 +1,15 @@
{
"devDependencies": {
"file-loader": "^6.2.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.2.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0"
},
"scripts": {
"build": "webpack --mode=development"
},
"dependencies": {
"node-vibrant": "^3.2.1-alpha.1"
}
}

1843
dribbblish.js → src/js/main.js
View file

File diff suppressed because it is too large Load diff

2945
user.css → src/styles/main.scss
View file

File diff suppressed because it is too large Load diff

29
webpack.config.js Normal file
View file

@ -0,0 +1,29 @@
const path = require("path");
module.exports = {
entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss")],
output: {
path: path.resolve(__dirname, "dist"),
filename: "dribbblish-dynamic.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: []
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: "file-loader",
options: { name: "user.css" }
},
"sass-loader"
]
}
]
}
};