dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-26 21:41:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

IMP: increase luminance of text

Browse source
This commit is contained in:
Julien Maille 2021-11-15 21:22:18 +01:00
parent 90662cd66d
commit dfc2c79921
1 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/js/main.js
View file

@ -472,7 +472,6 @@ function getImageLightness(img) {
} }
// parse to hex because "--spice-sidebar" is `rgb()` // parse to hex because "--spice-sidebar" is `rgb()`
let textColor = chroma($("html").css("--spice-text")).hex();
let textColorBg = chroma($("html").css("--spice-main")).hex(); let textColorBg = chroma($("html").css("--spice-main")).hex();
let sidebarColor = chroma($("html").css("--spice-sidebar")).hex(); let sidebarColor = chroma($("html").css("--spice-sidebar")).hex();
@ -493,7 +492,7 @@ function toggleDark(setDark) {
setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D"); setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D");
setRootColor("notification", setDark ? "#303030" : "#DDDDDD"); setRootColor("notification", setDark ? "#303030" : "#DDDDDD");
updateColors(textColor, sidebarColor, false); updateColors(sidebarColor, false);
} }
function checkDarkLightMode(colors) { function checkDarkLightMode(colors) {
@ -588,27 +587,27 @@ Dribbblish.config.register({
] ]
}); });
var currentColor;
var currentSideColor; var currentSideColor;
function updateColors(textColHex, sideColHex, checkDarkMode = true) { function updateColors(sideColHex, checkDarkMode = true) {
if (textColHex && sideColHex) { if (sideColHex) {
currentColor = textColHex;
currentSideColor = sideColHex; currentSideColor = sideColHex;
} else { } else {
if (!(currentColor && currentSideColor)) return; // If `updateColors()` is called early these vars are undefined and would break if (!currentSideColor) return; // If `updateColors()` is called early these vars are undefined and would break
textColHex = currentColor;
sideColHex = currentSideColor; sideColHex = currentSideColor;
} }
if (!Dribbblish.config.get("dynamicColors")) { if (!Dribbblish.config.get("dynamicColors")) {
const col = Dribbblish.config.get("colorOverride"); sideColHex = Dribbblish.config.get("colorOverride");
textColHex = col;
sideColHex = col;
} }
let isLightBg = isLight(textColorBg); let isLightBg = isLight(textColorBg);
if (isLightBg) textColHex = chroma(textColHex).darken(0.15).hex(); // vibrant color is always too bright for white bg mode let textColHex = sideColHex;
if (isLightBg && chroma(textColHex).luminance() > 0.2) {
textColHex = chroma(textColHex).luminance(0.2).hex();
} else if (!isLightBg && chroma(textColHex).luminance() < 0.1) {
textColHex = chroma(textColHex).luminance(0.1).hex();
}
let darkColHex = chroma(textColHex) let darkColHex = chroma(textColHex)
.brighten(isLightBg ? 0.12 : -0.2) .brighten(isLightBg ? 0.12 : -0.2)
@ -654,8 +653,7 @@ async function songchange() {
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";
textColor = "#509bf5"; updateColors("#509bf5");
updateColors(textColor, textColor);
} }
if (album_uri !== undefined && !album_uri.includes("spotify:show")) { if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
@ -699,12 +697,12 @@ async function pickCoverColor(img) {
$("html").css("--image-brightness", getImageLightness(img) / 255); $("html").css("--image-brightness", getImageLightness(img) / 255);
if (img.complete) { if (img.complete) {
textColor = sidebarColor = chroma(colorThief.getColor(img)).hex(); sidebarColor = chroma(colorThief.getColor(img)).hex();
} else { } else {
textColor = sidebarColor = "#509bf5"; sidebarColor = "#509bf5";
} }
updateColors(textColor, sidebarColor); updateColors(sidebarColor);
} }
var coverListener; var coverListener;