at the end of the day, it was inevitable

frontend/app/styles/demo-ui/_demo.scss

@@ -0,0 +1,96 @@
+// DEMO
+
+@import "elements/theme-options";
+
+// Icons demo
+
+.font-icon-wrapper {
+  text-align: center;
+  border: $gray-200 solid 1px;
+  @include border-radius($border-radius);
+  margin: 0 0 10px;
+  padding: 5px;
+
+  &.font-icon-lg {
+    float: left;
+    padding: 10px;
+    text-align: center;
+    margin-inline-end: 15px;
+    min-width: 64px;
+
+    i {
+      font-size: $h1-font-size;
+    }
+  }
+
+  &:hover {
+    background: $gray-100;
+    color: $primary;
+
+    p {
+      color: $gray-600;
+    }
+  }
+
+  i {
+    font-size: ($font-size-lg * 1.5);
+  }
+
+  p {
+    color: $gray-500;
+    font-size: ($font-size-sm / 1.2);
+    margin: 5px 0 0;
+  }
+}
+
+.btn-icon-vertical {
+  min-width: 100px;
+}
+
+.card.mb-3 {
+  margin-bottom: $grid-gutter-width !important;
+}
+
+// Image BG
+
+.demo-image-bg {
+  height: 350px;
+  margin-bottom: $grid-gutter-width;
+}
+
+// Loaders wrapper
+
+.loader-wrapper {
+  width: 150px;
+  height: 100px;
+  float: left;
+}
+
+// Slick slider
+
+.slider-item {
+  background: $gray-300;
+  @include border-radius($border-radius);
+  color: $gray-600;
+  font-size: 36px;
+  padding: 0;
+  position: relative;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  margin: 0 $layout-spacer-x;
+  transition: all .2s;
+}
+
+.slick-center {
+  .slider-item {
+    background: $gray-500;
+    color: $gray-700;
+  }
+}
+
+// Image Crop
+
+.after-img {
+  max-width: 100%;
+}

frontend/app/styles/demo-ui/elements/_layout-themes.scss

@@ -0,0 +1,30 @@
+// Themes
+
+$themes: ();
+
+$themes: map_merge(
+                (
+                    "default": (
+
+                    ),
+                    "light-blue": (
+
+                    ),
+                ),
+                $themes
+);
+
+@mixin theme-variant($app-container-bg, $app-sidebar-bg, $app-header-bg, $app-header-logo-bg) {
+
+}
+
+@each $theme, $colors in $themes {
+  $color1: nth($colors, 1);
+  $color2: nth($colors, 2);
+  $color3: nth($colors, 3);
+  $color4: nth($colors, 4);
+
+  .theme-#{$theme} {
+    @include theme-variant($color1, $color2, $color3, $color4);
+  }
+}

frontend/app/styles/demo-ui/elements/_theme-options.scss

@@ -0,0 +1,121 @@
+// Theme Options
+
+// Variables
+
+$theme-options-width: 500px;
+
+.ui-theme-settings {
+  position: fixed;
+  z-index: 155;
+  right: -30px;
+  top: 0;
+  height: 100vh;
+  transform: translate($theme-options-width);
+  transition: all .2s;
+  box-shadow: -0.46875rem 0 2.1875rem rgba(darken($primary, 50%), .03),
+  -0.9375rem 0 1.40625rem rgba(darken($primary, 50%), .03),
+  -0.25rem 0 0.53125rem rgba(darken($primary, 50%), .05),
+  -0.125rem 0 0.1875rem rgba(darken($primary, 50%), .03);
+
+  .btn-open-options {
+    @include border-radius(50px);
+    position: absolute;
+    left: -114px;
+    bottom: 80px;
+    padding: 0;
+    height: 54px;
+    line-height: 54px;
+    width: 54px;
+    text-align: center;
+    display: block;
+    box-shadow: $box-shadow-default;
+    margin-top: -27px;
+
+    svg {
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      margin: -0.5em 0 0 -0.5em;
+    }
+  }
+
+  .theme-settings__inner {
+    background: $white;
+    width: $theme-options-width;
+    height: 100vh;
+    padding: 0;
+  }
+
+  &.settings-open {
+    transform: translate(0);
+    right: 0;
+  }
+
+  .theme-settings-swatches {
+    text-align: center;
+
+    .swatch-holder-img {
+      width: 72px;
+      height: auto;
+      @include border-radius(3px);
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .themeoptions-heading {
+    font-size: $font-size-lg;
+    color: $body-color;
+    margin: 0;
+    background: $gray-100;
+    padding: ($layout-spacer-x / 2) $layout-spacer-x;
+    border-bottom: $gray-300 solid 1px;
+    border-top: $gray-300 solid 1px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  .list-group-item {
+    h5 {
+      color: $primary;
+      font-size: $font-size-sm;
+      text-transform: uppercase;
+      margin: 0;
+      text-align: center;
+    }
+  }
+}
+
+.swatch-holder {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin: 5px 5px 0;
+  transition: all .2s;
+  opacity: .7;
+  display: inline-block;
+  @include border-radius(30px);
+
+  &.active {
+    border: $white solid 2px;
+    box-shadow: 0 0 0 5px $primary;
+    opacity: 1;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.swatch-holder-lg {
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+}