mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 14:36:22 -04:00
82 lines
3.6 KiB
SCSS
82 lines
3.6 KiB
SCSS
@use "sass:map";
|
|
@use "sass:list";
|
|
@use "sass:meta";
|
|
|
|
@use "settings";
|
|
@use "functions" as *;
|
|
|
|
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
|
|
// ex. @include themes.themed($color: "text", $background-color: "background-inner");
|
|
@mixin themed($colors...) {
|
|
$selectors: "#{&}";
|
|
|
|
// keep track of each property we're theming
|
|
$properties: ();
|
|
@each $property, $color in meta.keywords($colors) {
|
|
$properties: list.append($properties, $property);
|
|
}
|
|
|
|
// list themed properties under CSS transitions for fancy fading
|
|
transition-property: list.join($properties, (), $separator: comma);
|
|
transition-duration: #{settings.$theme-transition-duration};
|
|
transition-timing-function: linear;
|
|
|
|
// add corresponding body.light and body.dark root selectors
|
|
@each $theme, $map in $themes {
|
|
@at-root body.#{$theme} {
|
|
// support root body element
|
|
@if $selectors == "body" {
|
|
@each $property, $color in meta.keywords($colors) {
|
|
#{$property}: map.get($map, $color);
|
|
}
|
|
} @else {
|
|
#{$selectors} {
|
|
@each $property, $color in meta.keywords($colors) {
|
|
#{$property}: map.get($map, $color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------
|
|
|
|
// Dark & Light Themes
|
|
$themes: (
|
|
light: (
|
|
background-inner: #ffffff,
|
|
background-outer: #fcfcfc,
|
|
text: #202020,
|
|
medium-dark: #515151,
|
|
medium: #5e5e5e,
|
|
medium-light: #757575,
|
|
light: #d2d2d2,
|
|
kinda-light: #e3e3e3,
|
|
super-light: #f4f4f4,
|
|
super-duper-light: #fbfbfb,
|
|
links: #0e6dc2,
|
|
success: #0b890f,
|
|
error: #ff1b1b,
|
|
),
|
|
dark: (
|
|
background-inner: #1e1e1e,
|
|
background-outer: #252525,
|
|
text: #f1f1f1,
|
|
medium-dark: #d7d7d7,
|
|
medium: #b1b1b1,
|
|
medium-light: #959595,
|
|
light: #646464,
|
|
kinda-light: #535353,
|
|
super-light: #272727,
|
|
super-duper-light: #1f1f1f,
|
|
links: #88c7ff,
|
|
success: #78df55,
|
|
error: #ff5151,
|
|
),
|
|
);
|
|
|
|
// Icons (modified twemojis)
|
|
$icon-bulb-on: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
|
|
$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
|