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

remove redundant setting of color vars and rename rgb vars back to default spicetify names

Browse source
This commit is contained in:
Send_Nukez 2021-11-11 19:10:13 +01:00
parent d1d15d2425
commit 19aeb86204
2 changed files with 4 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/js/main.js
View file

@ -476,7 +476,7 @@ let sidebarColor = chroma($("html").css("--spice-sidebar")).hex();
function setRootColor(name, color) { function setRootColor(name, color) {
$("html").css(`--spice-${name}`, chroma(color).hex()); $("html").css(`--spice-${name}`, chroma(color).hex());
$("html").css(`--spice-${name}-rgb`, chroma(color).rgb().join(",")); $("html").css(`--spice-rgb-${name}`, chroma(color).rgb().join(","));
} }
function toggleDark(setDark) { function toggleDark(setDark) {

14
src/styles/Colors.scss
View file

@ -17,14 +17,6 @@ $colors: (
misc: #bfbfbf misc: #bfbfbf
); );
// Set initial Vars
:root {
@each $key, $color in $colors {
--spice-#{$key}: #{$color};
--spice-#{$key}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
}
}
// Set Transitions // Set Transitions
@each $key, $color in $colors { @each $key, $color in $colors {
@property --spice-#{$key} { @property --spice-#{$key} {
@ -33,7 +25,7 @@ $colors: (
inherits: true; inherits: true;
} }
@property --spice-#{$key}-rgb { @property --spice-rgb-#{$key} {
syntax: "<number>, <number>, <number>"; syntax: "<number>, <number>, <number>";
initial-value: #{red($color)}, #{green($color)}, #{blue($color)}; initial-value: #{red($color)}, #{green($color)}, #{blue($color)};
inherits: true; inherits: true;
@ -46,7 +38,7 @@ $props-to-transition: ("sidebar", "main", "text", "button");
@each $key in $props-to-transition { @each $key in $props-to-transition {
$props: append($props, --spice-#{$key}, comma); $props: append($props, --spice-#{$key}, comma);
$props: append($props, --spice-#{$key}-rgb, comma); $props: append($props, --spice-rgb-#{$key}, comma);
} }
transition: all var(--song-transition-speed) linear; transition: all var(--song-transition-speed) linear;
@ -58,6 +50,6 @@ $props-to-transition: ("sidebar", "main", "text", "button");
@if $alpha == 1 { @if $alpha == 1 {
@return var(--spice-#{$key}); @return var(--spice-#{$key});
} @else { } @else {
@return rgba(var(--spice-#{$key}-rgb), $alpha); @return rgba(var(--spice-rgb-#{$key}), $alpha);
} }
} }