jarv.is/assets/sass/abstracts/_themes.scss

@use "sass:map";
@use "sass:string";

@use "../abstracts/functions";

// 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,
  ),
  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,
  ),
);

// Colorful Homepage
$colors-home: (
  boston: (
    light: #fb4d42,
    dark: #ff5146,
  ),
  jamstack: (
    light: #04a699,
    dark: #08bbac,
  ),
  javascript: (
    light: #f48024,
    dark: #e18431,
  ),
  node: (
    light: #6fbc4e,
    dark: #84d95f,
  ),
  golang: (
    light: #00acd7,
    dark: #2ad1fb,
  ),
  react: (
    light: #4fb3cd,
    dark: #6fcbe3,
  ),
  angular: (
    light: #c3002f,
    dark: #f95757,
  ),
  php: (
    light: #8892bf,
    dark: #a4afe3,
  ),
  ruby: (
    light: #d34135,
    dark: #f95a4d,
  ),
  python: (
    light: #fea500,
    dark: #ffbb3c,
  ),
  infosec: (
    light: #00b81a,
    dark: #57f06d,
  ),
  server: (
    light: #0098ec,
    dark: #43b9fb,
  ),
  devops: (
    light: #ff6200,
    dark: #f46c16,
  ),
  frontend: (
    light: #4169e1,
    dark: #8ca9ff,
  ),
  backend: (
    light: #9932cc,
    dark: #d588fb,
  ),
  birthday: (
    light: #e40088,
    dark: #fd40b1,
  ),
  github: (
    light: #8d4eff,
    dark: #a379f0,
  ),
  linkedin: (
    light: #0073b1,
    dark: #3b9dd2,
  ),
  twitter: (
    light: #00acee,
    dark: #3bc9ff,
  ),
  email: (
    light: #de0c0c,
    dark: #ff5050,
  ),
  pgp: (
    light: #757575,
    dark: #959595,
  ),
  sms: (
    light: #6fcc01,
    dark: #8edb34,
  ),
  news-1: (
    light: #ff1b1b,
    dark: #f06060,
  ),
  news-2: (
    light: #f78200,
    dark: #fd992a,
  ),
  news-3: (
    light: #f2b702,
    dark: #ffcc2e,
  ),
  news-4: (
    light: #5ebd3e,
    dark: #78df55,
  ),
  news-5: (
    light: #009cdf,
    dark: #29bfff,
  ),
  news-6: (
    light: #3e49bb,
    dark: #7b87ff,
  ),
  news-7: (
    light: #973999,
    dark: #db60dd,
  ),
);
$color-serverless: #87cef7;

// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;

// 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>';

$icon-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="20" height="20"><g fill="none"><path fill="#292F33" d="M2.651 6.073l26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z"/><path fill="#66757F" d="M29.442 31.23L3.146 4.934l.883-.883 26.296 26.296z"/><path fill="#E1E8ED" d="M33.546 33.483l-.412.412-.671.671a.967.967 0 01-.255.169.988.988 0 01-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 010 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 01-.169-1.159.967.967 0 01.169-.255l.671-.671.412-.412a.999.999 0 011.414 0l2.208 2.208L4.029 4.79z"/><path fill="#F5F8FA" d="M30.325 30.497l2.809 2.809-.671.671a.967.967 0 01-.255.169l-2.767-2.767.884-.882zM3.146 5.084L.273 2.211a.967.967 0 01.169-.255l.671-.671 2.916 2.916-.883.883z"/><path fill="#FFAC33" d="M27.897 10.219l1.542.571.6 2.2a.667.667 0 001.287 0l.6-2.2 1.542-.571a.665.665 0 000-1.25l-1.534-.568-.605-2.415a.667.667 0 00-1.293 0l-.605 2.415-1.534.568a.665.665 0 000 1.25m-16.936 9.628l2.61.966.966 2.61a1.103 1.103 0 002.07 0l.966-2.61 2.609-.966a1.103 1.103 0 000-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 00-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 000 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 001.096 0l.512-1.382 1.382-.512a.584.584 0 000-1.096l-1.382-.512-.512-1.382a.585.585 0 00-1.096 0l-.512 1.382-1.383.512a.585.585 0 000 1.096"/></g></svg>';

// ----------------------------------------

@mixin themed($property, $key) {
  // hack to allow root (body) theming
  $selectors: functions.str-split("#{&}");

  @each $theme, $map in $themes {
    @each $selector in $selectors {
      @at-root body.#{$theme} #{$selector} {
        #{$property}: map.get($map, $key);
      }
    }
  }
}