From 722271c13e5a1d710e02bf3a001e19d77eba81cf Mon Sep 17 00:00:00 2001
From: Fabian <dev@fabianstamm.de>
Date: Tue, 3 Nov 2020 17:32:10 +0100
Subject: [PATCH] making background colors nicer

---
 index.html             | 10 +++++++---
 package.json           |  2 +-
 src/_maketheme.scss    | 20 ++++++++++++++++++--
 src/dark.scss          |  6 +++++-
 src/light.scss         |  5 +++++
 src/theme/_card.scss   |  2 ++
 src/theme/_global.scss |  4 ++--
 src/theme/_input.scss  |  3 +--
 src/theme/_modal.scss  |  2 +-
 9 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index b7808cd..8841bf9 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
 
     <body class="light-theme">
         <button
-            style="position: fixed; top: 10px; left: 10px; z-index: 100;"
+            style="position: fixed; top: 10px; left: 10px; z-index: 100"
             onclick="switchStyle()"
         >
             Switch
@@ -86,6 +86,10 @@
                 </div>
             </div>
 
+            <div class="margin prev">
+                <div class="card">Card</div>
+            </div>
+
             <div class="margin prev">
                 <button class="btn">Hallo Welt</button>
                 <button class="btn btn-primary">Hallo Welt</button>
@@ -207,7 +211,7 @@
             </div>
 
             <div class="margin prev">
-                <div class="header" style="justify-content: space-between;">
+                <div class="header" style="justify-content: space-between">
                     <span>I1</span>
                     <span>I2</span>
                     <div class="header-icon-button">
@@ -296,7 +300,7 @@
             }
 
             let match = window.matchMedia("prefers-color-scheme: dark");
-            match.addListener(ev => {
+            match.addListener((ev) => {
                 applyStyleSheet(ev.matches);
             });
         </script>
diff --git a/package.json b/package.json
index 648bc54..4a5b3eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@hibas123/theme",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "description": "",
     "main": " ",
     "files": [
diff --git a/src/_maketheme.scss b/src/_maketheme.scss
index 65af3ef..75fd6e9 100644
--- a/src/_maketheme.scss
+++ b/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 {
diff --git a/src/dark.scss b/src/dark.scss
index 031e3c8..8781964 100644
--- a/src/dark.scss
+++ b/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) {
diff --git a/src/light.scss b/src/light.scss
index e745f30..d9ff09a 100644
--- a/src/light.scss
+++ b/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,
diff --git a/src/theme/_card.scss b/src/theme/_card.scss
index e1d3ecd..a0a0e78 100644
--- a/src/theme/_card.scss
+++ b/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);
 }
diff --git a/src/theme/_global.scss b/src/theme/_global.scss
index 78bc10f..6ec5956 100644
--- a/src/theme/_global.scss
+++ b/src/theme/_global.scss
@@ -1,4 +1,4 @@
 .#{$theme} {
-    background: $background;
-    color: $on-background;
+    background: $root-background;
+    color: $on-root-background;
 }
diff --git a/src/theme/_input.scss b/src/theme/_input.scss
index 5748483..2b7c4a0 100644
--- a/src/theme/_input.scss
+++ b/src/theme/_input.scss
@@ -2,8 +2,7 @@
     color: $on-background;
 
     option {
-        background: $background;
-        color: $on-background;
+        @include background-default();
     }
 }
 
diff --git a/src/theme/_modal.scss b/src/theme/_modal.scss
index 3ac03fa..7ca3270 100644
--- a/src/theme/_modal.scss
+++ b/src/theme/_modal.scss
@@ -1,5 +1,5 @@
 .#{$theme} .#{$ns}modal {
-    background: $background;
+    @include background-default();
     @include Elevation(24);
 
     .#{$ns}modal-action {
