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

rename css variables and generate @properties to transition

Browse source
This commit is contained in:
Send_Nukez 2021-11-03 16:43:34 +01:00
parent 23b83c2fdf
commit 77f39351d0
3 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/js/main.js
View file

@ -424,9 +424,9 @@ let textColor = chroma($("html").css("--spice-text")).hex();
let textColorBg = chroma($("html").css("--spice-main")).hex();
let sidebarColor = chroma($("html").css("--spice-sidebar")).hex();
function setRootColor(name, colHex) {
$("html").css(`--spice-${name}`, colHex);
$("html").css(`--spice-rgb-${name}`, chroma(colHex).rgb().join(","));
function setRootColor(name, color) {
$("html").css(`--spice-${name}`, chroma(color).hex());
$("html").css(`--spice-${name}-rgb`, chroma(color).rgb().join(","));
}
function toggleDark(setDark) {

33
src/styles/Colors.scss
View file

@ -17,17 +17,46 @@ $colors: (
misc: #bfbfbf
);
// Set initial Vars
:root {
@each $key, $color in $colors {
--spice-#{$key}: #{$color};
--spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)};
--spice-#{$key}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
}
}
// Set Transitions
@each $key, $color in $colors {
@property --spice-#{$key} {
syntax: "<color>";
initial-value: $color;
inherits: true;
}
@property --spice-#{$key}-rgb {
syntax: "<number>, <number>, <number>";
initial-value: #{red($color)}, #{green($color)}, #{blue($color)};
inherits: true;
}
}
:root {
$props: ();
@each $key, $color in $colors {
$props: append($props, --spice-#{$key}, comma);
$props: append($props, --spice-#{$key}-rgb, comma);
}
transition: all var(--song-transition-speed) linear;
transition-property: $props;
}
// Color Function
@function spiceColor($key, $alpha: 1) {
@if $alpha == 1 {
@return var(--spice-#{$key});
} @else {
@return rgba(var(--spice-rgb-#{$key}), $alpha);
@return rgba(var(--spice-#{$key}-rgb), $alpha);
}
}

30
src/styles/main.scss
View file

@ -49,36 +49,6 @@
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;