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

refactor

Browse source
This commit is contained in:
Julien Maille 2021-10-24 09:27:05 +02:00
parent bfa8f8ab68
commit d34c221be5
2 changed files with 43 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
dribbblish-dynamic.js
View file

@ -286,28 +286,19 @@ var currentSideColor;
var colorFadeInterval = false; var colorFadeInterval = false;
function updateColors(textColHex, sideColHex) { function updateColors(textColHex, sideColHex) {
let update = (textColHex, sideColHex) => { let isLightBg = isLight(textColorBg)
currentColor = textColHex; if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
currentSideColor = sideColHex;
let isLightBg = isLight(textColorBg) let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) setRootColor('text', textColHex)
let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) setRootColor('button', darkerColHex)
let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) setRootColor('button-active', darkColHex)
setRootColor('text', textColHex) setRootColor('selected-row', darkerColHex)
setRootColor('button', darkerColHex) setRootColor('tab-active', buttonBgColHex)
setRootColor('button-active', darkColHex) setRootColor('button-disabled', buttonBgColHex)
setRootColor('selected-row', darkerColHex) setRootColor('sidebar', sideColHex)
setRootColor('tab-active', buttonBgColHex)
setRootColor('button-disabled', buttonBgColHex)
setRootColor('sidebar', sideColHex)
};
clearInterval(colorFadeInterval); // clear any interval that might be running
update(textColHex, sideColHex);
} }
let nearArtistSpanText = "" let nearArtistSpanText = ""

63
user.css
View file

@ -39,6 +39,37 @@
font-weight: 500; 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 { 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; --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; --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;
@ -1351,35 +1382,3 @@ 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);
}