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

IMP: more color transitions

Browse source
This commit is contained in:
Julien Maille 2021-10-23 23:57:16 +02:00
parent 7ec7a88e98
commit bfa8f8ab68
2 changed files with 36 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
dribbblish-dynamic.js
View file

@ -210,7 +210,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(textColor, sidebarColor)
} }
function checkDarkLightMode() { function checkDarkLightMode() {
@ -285,7 +285,7 @@ var currentColor;
var currentSideColor; var currentSideColor;
var colorFadeInterval = false; var colorFadeInterval = false;
function updateColors(textColHex, sideColHex, animate=false) { function updateColors(textColHex, sideColHex) {
let update = (textColHex, sideColHex) => { let update = (textColHex, sideColHex) => {
currentColor = textColHex; currentColor = textColHex;
currentSideColor = sideColHex; currentSideColor = sideColHex;
@ -307,43 +307,7 @@ function updateColors(textColHex, sideColHex, animate=false) {
clearInterval(colorFadeInterval); // clear any interval that might be running clearInterval(colorFadeInterval); // clear any interval that might be running
if(!animate) { update(textColHex, sideColHex);
update(textColHex, sideColHex);
return;
}
let clamp = (num,min,max) => Math.min(Math.max(num, min), max);
let lerp = (a,b,u) => (1-u) * a + u * b;
let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1);
let interval = 10; // 10 ms between each call
var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed"));
if(duration < 1) duration = 1;
let startC1 = hexToRgb(currentColor);
let startC2 = hexToRgb(currentSideColor);
let endC1 = hexToRgb(textColHex);
let endC2 = hexToRgb(sideColHex);
var start;
colorFadeInterval = setInterval(function(){
if(!start) { start = performance.now() }
let elapsed = performance.now()-start;
let ratio = clamp(elapsed/duration, 0, 1)
let currentC1 = [];
let currentC2 = [];
for(var i = 0; i < 3; i++){
currentC1[i] = lerp(startC1[i], endC1[i], ratio);
currentC2[i] = lerp(startC2[i], endC2[i], ratio);
}
update(rgbToHex(currentC1), rgbToHex(currentC2));
if (elapsed>duration){ clearInterval(colorFadeInterval) }
}, interval);
} }
let nearArtistSpanText = "" let nearArtistSpanText = ""
@ -432,7 +396,7 @@ function pickCoverColor(img) {
sidebarColor = swatches[lightCols[col]].getHex() sidebarColor = swatches[lightCols[col]].getHex()
break break
} }
updateColors(textColor, sidebarColor, true) updateColors(textColor, sidebarColor)
} }
waitForElement([".main-nowPlayingBar-left"], (queries) => { waitForElement([".main-nowPlayingBar-left"], (queries) => {

32
user.css
View file

@ -1351,3 +1351,35 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
.main-tag-container { .main-tag-container {
background-color: var(--spice-text); background-color: var(--spice-text);
} }
/* smooth color transitions */
@property --spice-sidebar {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-main {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-text {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-button {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
html {
transition: --spice-sidebar var(--song-transition-speed),
--spice-main var(--song-transition-speed),
--spice-text var(--song-transition-speed),
--spice-button var(--song-transition-speed);
}