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

NEW: smooth color transition

Browse source
This commit is contained in:
Julien Maille 2021-06-03 21:37:39 +02:00
parent b53208cf5d
commit 8539ef806e
1 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
dribbblish-dynamic.js
View file

@ -1,5 +1,6 @@
let current = '1.0' let current = '2.3'
/* css needed for system mode detection */
document.styleSheets[0].insertRule(` document.styleSheets[0].insertRule(`
:root { :root {
--system_is_dark: 1; --system_is_dark: 1;
@ -11,6 +12,33 @@ document.styleSheets[0].insertRule(`
} }
}`) }`)
/* css for color transition */
document.styleSheets[0].insertRule(`
@property --spice-sidebar {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}`)
document.styleSheets[0].insertRule(`
@property --spice-main {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}`)
document.styleSheets[0].insertRule(`
@property --spice-button {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}`)
document.styleSheets[0].insertRule(`
html {
transition: --spice-sidebar 1s, --spice-main 1s, --spice-button 1s;
}`)
function waitForElement(els, func, timeout = 100) { function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el)); const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) { if (queries.every(a => a)) {
@ -239,7 +267,7 @@ waitForElement([".cover-art-image"], (queries) => {
Spicetify.showNotification("Applied system " + (systemDark ? "dark" : "light") + " theme.") Spicetify.showNotification("Applied system " + (systemDark ? "dark" : "light") + " theme.")
})() })()
/* translucid background cover */ /* css for translucid background cover */
document.styleSheets[0].addRule('.main-view-container__scroll-node-child::before', document.styleSheets[0].addRule('.main-view-container__scroll-node-child::before',
` content: ''; ` content: '';
background-image: var(--image_url); background-image: var(--image_url);