making background colors nicer

src/_maketheme.scss

@@ -5,6 +5,10 @@ $name: false !default;
 
 $background: false !default;
 $on-background: false !default;
+
+$root-background: false !default;
+$on-root-background: false !default;
+
 $button-color: #cccccc !default;
 $on-button: #000000 !default;
 
@@ -12,19 +16,31 @@ $on-button: #000000 !default;
     @error ("background and on-background must be set!");
 }
 
+@if $root-background==false or $on-root-background==false {
+    @error ("root-background and on-root-background must be set!");
+}
+
 @if $name==false {
     @error ("name must be set!");
 }
 
 $theme: #{$name}-theme;
+
 .#{$theme} {
     --background: #{$background};
     --on-background: #{$on-background};
+
+    --root-background: #{$root-background};
+    --on-root-background: #{$on-root-background};
+}
+
+@mixin background-default {
+    background: $background;
+    color: $on-background;
 }
 
 .#{$theme} .background-default {
-    background: $background;
-    color: $on-background;
+    @include background-default();
 }
 
 @each $dp in $elevations {

src/dark.scss

@@ -1,7 +1,11 @@
 @import "./_vals.scss";
 
-$background: #000000;
+$background: #111111;
 $on-background: white;
+
+$root-background: #000000;
+$on-root-background: white;
+
 $disabled-brightness: 1.1;
 
 @mixin Elevation($dp, $imp: false) {

src/light.scss

@@ -1,5 +1,9 @@
 $background: #f9f9f9;
 $on-background: black;
+
+$root-background: #eee;
+$on-root-background: black;
+
 $disabled-brightness: 0.9;
 
 @mixin MakeShadow($imp, $type) {
@@ -24,6 +28,7 @@ $disabled-brightness: 0.9;
                 )
             )
             // 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,

src/theme/_card.scss

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

src/theme/_global.scss

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

src/theme/_input.scss

@@ -2,8 +2,7 @@
     color: $on-background;
 
     option {
-        background: $background;
-        color: $on-background;
+        @include background-default();
     }
 }
 

src/theme/_modal.scss

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