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

Merge pull request #78 from JulienMaille/color-transition

Browse source 
IMP: more color transitions
This commit is contained in:
Julien 2021-10-24 19:35:35 +02:00 committed by GitHub
commit 75ba4e0da7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
dribbblish-dynamic.js
View file

@ -210,7 +210,7 @@ function toggleDark(setDark) {
setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
updateColors(textColor, sidebarColor, false)
updateColors(textColor, sidebarColor)
}
function checkDarkLightMode() {
@ -285,65 +285,20 @@ var currentColor;
var currentSideColor;
var colorFadeInterval = false;
function updateColors(textColHex, sideColHex, animate=false) {
let update = (textColHex, sideColHex) => {
currentColor = textColHex;
currentSideColor = sideColHex;
function updateColors(textColHex, sideColHex) {
let isLightBg = isLight(textColorBg)
if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
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.90 : 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)
};
clearInterval(colorFadeInterval); // clear any interval that might be running
if(!animate) {
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 darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 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)
}
let nearArtistSpanText = ""
@ -432,7 +387,7 @@ function pickCoverColor(img) {
sidebarColor = swatches[lightCols[col]].getHex()
break
}
updateColors(textColor, sidebarColor, true)
updateColors(textColor, sidebarColor)
}
waitForElement([".main-nowPlayingBar-left"], (queries) => {

31
user.css
View file

@ -39,6 +39,37 @@
font-weight: 500;
}
/* 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;
}
:root {
transition: all var(--song-transition-speed) linear;
transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
}
body {
--glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
--info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;