Switching to different style of theme selection

src/_maketheme.scss

@@ -1,6 +1,7 @@
 @import "./_vals.scss";
 
 $ns: "" !default;
+$name: false !default;
 
 $background: false !default;
 $on-background: false !default;
@@ -11,26 +12,31 @@ $on-button: #000000 !default;
     @error ("background and on-background must be set!");
 }
 
-:root {
+@if $name==false {
+    @error ("name must be set!");
+}
+
+$theme: #{$name}-theme;
+::root {
     --background: #{$background};
     --on-background: #{$on-background};
 }
 
-.background-default {
+.#{$theme} .background-default {
     background: $background;
 }
 
 @each $dp in $elevations {
-    .elv-#{$dp} {
+    .#{$theme} .elv-#{$dp} {
         @include Elevation($dp, false);
     }
 
-    .elv-#{$dp}-imp {
+    .#{$theme} .elv-#{$dp}-imp {
         @include Elevation($dp, true);
     }
 }
 
-.elv-transition {
+.#{$theme} .elv-transition {
     @include ElevationTransition();
 }
 

src/build-pref.scss

@@ -0,0 +1,3 @@
+$ns: "ht-";
+
+@import "./build.scss";

src/build.scss

@@ -0,0 +1,5 @@
+@import "./base.scss";
+
+@import "./light.scss";
+
+@import "./dark.scss";

src/dark.scss

@@ -18,4 +18,6 @@ $disabled-brightness: 1.1;
     transition: background $time;
 }
 
+$name: "dark";
+
 @import "./_maketheme.scss";

src/light.scss

@@ -23,7 +23,7 @@ $disabled-brightness: 0.9;
                     0 1px 3px 0 rgba(0, 0, 0, 0.2)
                 )
             )
-            // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);
+            // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);;
     } @else if $dp==2 {
         @include MakeShadow(
             $imp,
@@ -116,4 +116,6 @@ $disabled-brightness: 0.9;
     transition: box-shadow $time;
 }
 
+$name: "light";
+
 @import "./_maketheme.scss";

src/theme/_btn.scss

@@ -13,11 +13,11 @@
     }
 }
 
-.btn-flat {
+.#{$theme} .#{$ns}btn-flat {
     @include btn-flat();
 }
 
-.#{$ns}btn {
+.#{$theme} .#{$ns}btn {
     @include Elevation(1);
     @include ElevationTransition(0.2s);
     &:focus {
@@ -26,7 +26,7 @@
     @include btn-flat();
 }
 
-.#{$ns}fab {
+.#{$theme} .#{$ns}fab {
     @include Elevation(8);
     @include ElevationTransition(0.2s);
     &:focus {

src/theme/_card.scss

@@ -1,7 +1,7 @@
-.#{$ns}card {
+.#{$theme} .#{$ns}card {
     @include Elevation(3);
 }
 
-.#{$ns}card-elevated {
+.#{$theme} .#{$ns}card-elevated {
     @include Elevation(8);
 }

src/theme/_global.scss

@@ -1,5 +1,4 @@
-html,
-body {
+.#{$theme} {
     background: $background;
     color: $on-background;
-}
+}

src/theme/_header.scss

@@ -1,3 +1,3 @@
-.#{$ns}header {
+.#{$theme} .#{$ns}header {
     @include Elevation(3);
 }

src/theme/_input.scss

@@ -1,4 +1,4 @@
-.#{$ns}inp {
+.#{$theme} .#{$ns}inp {
     color: $on-background;
 
     option {
@@ -7,13 +7,13 @@
     }
 }
 
-.#{$ns}input-group {
+.#{$theme} .#{$ns}input-group {
     input {
         @extend .#{$ns}inp;
     }
 }
 
-.#{$ns}input-checkbox {
+.#{$theme} .#{$ns}input-checkbox {
     span {
         background-color: $button-color;
     }

src/theme/_list.scss

@@ -1,9 +1,9 @@
-.#{$ns}list-clickable {
+.#{$theme} .#{$ns}list-clickable {
     li:hover {
         background: darken-brighten-color($background, 5%);
     }
 }
 
-.#{$ns}list-selected {
+.#{$theme} .#{$ns}list-selected {
     background: darken-brighten-color($background, 10%);
 }

src/theme/_modal.scss

@@ -1,4 +1,4 @@
-.#{$ns}modal {
+.#{$theme} .#{$ns}modal {
     background: $background;
     @include Elevation(24);
 

src/theme/_table.scss

@@ -1,4 +1,4 @@
-.#{$ns}table {
+.#{$theme} .#{$ns}table {
     tr:nth-child(odd):not(:first-child) {
         background: darken-brighten-color($background, 10%);
     }