SCSS Dark Theme Demo

Simple demonstration of toggling between themes only using scss

by aksh101099

HTML

<div id="app" class="lightTheme">
  <div class="content">
  Hello, Dark Cruel World!
  </div>
  <button onclick="toggleTheme()">
  Toggle Theme
  </button>
</div>

SCSS

$themes: (
  darkTheme: (
    'text-color': white,
    'bg-color': #424242
  ),
  lightTheme: (
    'text-color': black,
    'bg-color': #f5f5f5
  )
);

@mixin theme() {
  @each $theme, $map in $themes {
    $theme-map: $map !global;
    .#{$theme} & {
      @content;
    }
  }
  $theme-map: null !global;
}

@function theme-get($key) {
  @return map-get($theme-map, $key);
}

#app {
  text-align: center;
}

.content {
  padding: 32px;
  transition: 500ms;
  font-size: 18px;
  @include theme() {
    color: theme-get('text-color');
    background-color: theme-get('bg-color');
  }
}

button {
  margin: 16px;
}

JavaScript

function toggleTheme() {
   var element = document.getElementById("app");
   element.classList.toggle("darkTheme");
   element.classList.toggle("lightTheme");
}