stub out theme styling

src/scss/box.scss

@@ -17,9 +17,13 @@
     }
 
     .box-content {
-        background: $box-background-color;
         border-radius: $border-radius;
         box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+        background-color: $box-background-color;
+
+        @include themify($themes) {
+            background-color: themed('boxBackgroundColor');
+        }
 
         &.box-content-padded {
             padding: 10px 15px;
@@ -39,6 +43,10 @@
                 height: 1px;
                 width: calc(100% - 10px);
                 border-bottom: 1px solid $box-border-color;
+
+                @include themify($themes) {
+                    border-bottom-color: themed('boxBorderColor');
+                }
             }
 
             &:first-child, &:last-child {
@@ -60,6 +68,10 @@
 
             &:hover, &:focus, &.active {
                 background-color: $box-background-hover-color;
+
+                @include themify($themes) {
+                    background-color: themed('boxBackgroundHoverColor');
+                }
             }
 
             &.pre {

src/scss/variables.scss

@@ -4,7 +4,6 @@ $font-size-base: 14px;
 $font-size-large: 18px;
 $font-size-small: 12px;
 $text-color: #000000;
-$background-color: #efeff4;
 $border-color: #f0f0f0;
 $border-color-dark: #ddd;
 $list-item-hover: #fbfbfb;
@@ -36,3 +35,46 @@ $button-backgound-color: white;
 $button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
 $button-color-danger: darken($brand-danger, 10%);
+
+$themes: (
+    light: (
+        textColor: $text-color,
+        borderColor: $border-color,
+        borderColorDark: $border-color-dark,
+        backgroundColor: $background-color,
+        backgroundColorAlt: $background-color-alt,
+        backgroundColorAlt2: $background-color-alt2,
+        boxBackgroundColor: $box-background-color,
+        boxBackgroundHoverColor: $box-background-hover-color,
+        boxBorderColor: $box-border-color,
+    ),
+    dark: (
+        textColor: #ffffff,
+        borderColor: #000000,
+        borderColorDark: #000000,
+        backgroundColor: #5f5f5f,
+        backgroundColorAlt: #5f5f5f,
+        backgroundColorAlt2: #5f5f5f,
+        boxBackgroundColor: #5f5f5f,
+        boxBackgroundHoverColor: #707070,
+        boxBorderColor: #000000,
+    ),
+);
+
+@mixin themify($themes: $themes) {
+    @each $theme, $map in $themes {
+        html.theme_#{$theme} & {
+            $theme-map: () !global;
+            @each $key, $submap in $map {
+                $value: map-get(map-get($themes, $theme), '#{$key}');
+                $theme-map: map-merge($theme-map, ($key: $value)) !global;
+            }
+            @content;
+            $theme-map: null !global;
+        }
+    }
+}
+
+@function themed($key) {
+    @return map-get($theme-map, $key);
+}

src/scss/vault.scss

@@ -14,12 +14,17 @@
     }
 
     > #groupings {
-        background-color: $background-color-alt;
         width: 22%;
         min-width: 175px;
         max-width: 250px;
+        background-color: $background-color-alt;
         border-right: 1px solid $border-color-dark;
 
+        @include themify($themes) {
+            background-color: themed('backgroundColorAlt');
+            border-right-color: themed('borderColorDark');
+        }
+
         .inner-content {
             padding-bottom: 0;
             padding-right: 5px;
@@ -111,12 +116,17 @@
     }
 
     > #items {
-        background-color: $background-color;
         width: 28%;
         min-width: 200px;
         max-width: 350px;
+        background-color: $background-color;
         border-right: 1px solid $border-color-dark;
         
+        @include themify($themes) {
+            background-color: themed('backgroundColor');
+            border-right-color: themed('borderColorDark');
+        }
+
         .no-items {
             display: flex;
             height: 100%;
@@ -134,9 +144,13 @@
     }
 
     > #details {
-        background-color: $background-color-alt2;
         flex: 1;
         min-width: 0;
+        background-color: $background-color-alt2;
+
+        @include themify($themes) {
+            background-color: themed('backgroundColorAlt2');
+        }
 
         .inner-content {
             min-width: 400px;