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

FIX: #28 bad sidebar color for light album covers

Browse source
This commit is contained in:
Julien Maille 2021-09-23 15:18:48 +02:00
parent 127f604dd6
commit b6621f1cac
1 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
dribbblish-dynamic.js
View file

@ -145,14 +145,15 @@ function setLightness(hex, lightness) {
} }
let nearArtistSpan = null let nearArtistSpan = null
let mainColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text')
let mainColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main')
waitForElement([".main-trackInfo-container"], (queries) => { waitForElement([".main-trackInfo-container"], (queries) => {
nearArtistSpan = document.createElement("div") nearArtistSpan = document.createElement("div")
nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale") nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale")
queries[0].append(nearArtistSpan) queries[0].append(nearArtistSpan)
}); });
let textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text')
let textColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main')
let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-sidebar')
function setRootColor(name, colHex) { function setRootColor(name, colHex) {
let root = document.documentElement let root = document.documentElement
@ -162,18 +163,18 @@ function setRootColor(name, colHex) {
} }
function toggleDark(setDark) { function toggleDark(setDark) {
if (setDark===undefined) setDark = isLight(mainColorBg) if (setDark===undefined) setDark = isLight(textColorBg)
document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1) document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1)
mainColorBg = setDark ? "#0A0A0A" : "#FAFAFA" textColorBg = setDark ? "#0A0A0A" : "#FAFAFA"
setRootColor('main', mainColorBg) setRootColor('main', textColorBg)
setRootColor('player', mainColorBg) setRootColor('player', textColorBg)
setRootColor('card', setDark ? "#040404" : "#ECECEC") setRootColor('card', setDark ? "#040404" : "#ECECEC")
setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D") setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
setRootColor('notification', setDark ? "#303030" : "#DDDDDD") setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
updateColors(mainColor) updateColors(textColor, sidebarColor)
} }
/* Init with current system light/dark mode */ /* Init with current system light/dark mode */
@ -187,39 +188,30 @@ DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
(self) => { toggleDark(); self.isEnabled = !self.isEnabled; } (self) => { toggleDark(); self.isEnabled = !self.isEnabled; }
)); ));
function updateColors(colHex) { function updateColors(textColHex, sideColHex) {
let isLightBg = isLight(mainColorBg) let isLightBg = isLight(textColorBg)
if( isLightBg ) colHex = LightenDarkenColor(colHex, -15) // vibrant color is always too bright for white bg mode if( isLightBg ) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
let darkColHex = LightenDarkenColor(colHex, isLightBg ? 12 : -20) let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
let darkerColHex = LightenDarkenColor(colHex, isLightBg ? 30 : -40) let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
let buttonBgColHex = setLightness(colHex, isLightBg ? 0.90 : 0.14) let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
setRootColor('text', colHex) setRootColor('text', textColHex)
setRootColor('button', darkerColHex) setRootColor('button', darkerColHex)
setRootColor('button-active', darkColHex) setRootColor('button-active', darkColHex)
setRootColor('selected-row', darkerColHex) setRootColor('selected-row', darkerColHex)
setRootColor('tab-active', buttonBgColHex) setRootColor('tab-active', buttonBgColHex)
setRootColor('button-disabled', buttonBgColHex) setRootColor('button-disabled', buttonBgColHex)
setRootColor('sidebar', colHex) setRootColor('sidebar', sideColHex)
} }
let coverListenerInstalled = true let coverListenerInstalled = true
async function songchange() { async function songchange() {
try {
// warning popup
if (Spicetify.PlaybackControl.featureVersion < "1.1.57")
Spicetify.showNotification("Your version of Spotify (" + Spicetify.PlaybackControl.featureVersion + ") is un-supported")
}
catch(err) {
console.log(err.message);
}
let album_uri = Spicetify.Player.data.track.metadata.album_uri let album_uri = Spicetify.Player.data.track.metadata.album_uri
let bgImage = Spicetify.Player.data.track.metadata.image_url let bgImage = Spicetify.Player.data.track.metadata.image_url
if (bgImage === undefined) { if (bgImage === undefined) {
bgImage = "/images/tracklist-row-song-fallback.svg" bgImage = "/images/tracklist-row-song-fallback.svg"
mainColor = "#509bf5" textColor = "#509bf5"
updateColors(mainColor) updateColors(textColor, textColor)
coverListenerInstalled = false coverListenerInstalled = false
} else if (!coverListenerInstalled) { } else if (!coverListenerInstalled) {
hookCoverChange(true) hookCoverChange(true)
@ -258,15 +250,24 @@ Spicetify.Player.addEventListener("songchange", songchange)
function pickCoverColor(img) { function pickCoverColor(img) {
var swatches = new Vibrant(img, 5).swatches() var swatches = new Vibrant(img, 5).swatches()
cols = isLight(mainColorBg) ? ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"] lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]
: ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"] darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]
mainColor = "#509bf5"
for (var col in cols) mainCols = isLight(textColorBg) ? lightCols : darkCols
if (swatches[cols[col]]) { textColor = "#509bf5"
mainColor = swatches[cols[col]].getHex() for (var col in mainCols)
if (swatches[mainCols[col]]) {
textColor = swatches[mainCols[col]].getHex()
break break
} }
updateColors(mainColor)
sidebarColor = "#509bf5"
for (var col in lightCols)
if (swatches[lightCols[col]]) {
sidebarColor = swatches[lightCols[col]].getHex()
break
}
updateColors(textColor, sidebarColor)
} }
function hookCoverChange(pick) { function hookCoverChange(pick) {