-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
+ function switchStyle() {
+ applyStyleSheet(isLight);
+ isLight = !isLight;
+ }
+ let match = window.matchMedia("prefers-color-scheme: dark");
+ match.addListener(ev => {
+ applyStyleSheet(ev.matches);
+ });
+
+
diff --git a/package.json b/package.json
index b55e018..14be2eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@hibas123/theme",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "",
"main": " ",
"files": [
@@ -13,10 +13,10 @@
"scripts": {
"build-grid": "sass src/grid.scss:out/grid.css",
"watch-grid": "sass --watch src/grid.scss:out/grid.css",
- "build-clean": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css ",
- "watch-clean": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
- "build-prefix": "sass src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
- "watch-prefix": "sass --watch src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
+ "build-clean": "sass src/build.scss:out/base.css",
+ "watch-clean": "sass --watch src/build.scss:out/base.css",
+ "build-prefix": "sass src/build-pref.scss:out/prefix.css",
+ "watch-prefix": "sass --watch src/build-pref.scss:out/prefix.css",
"build": "npm run build-clean && npm run build-prefix && npm run build-grid",
"prepublishOnly": "npm run build"
},
diff --git a/src/_maketheme.scss b/src/_maketheme.scss
index 0e62159..d89021c 100644
--- a/src/_maketheme.scss
+++ b/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();
}
diff --git a/src/build-pref.scss b/src/build-pref.scss
new file mode 100644
index 0000000..f0fb1d6
--- /dev/null
+++ b/src/build-pref.scss
@@ -0,0 +1,3 @@
+$ns: "ht-";
+
+@import "./build.scss";
diff --git a/src/build.scss b/src/build.scss
new file mode 100644
index 0000000..f19aca3
--- /dev/null
+++ b/src/build.scss
@@ -0,0 +1,5 @@
+@import "./base.scss";
+
+@import "./light.scss";
+
+@import "./dark.scss";
diff --git a/src/dark.scss b/src/dark.scss
index 9768913..031e3c8 100644
--- a/src/dark.scss
+++ b/src/dark.scss
@@ -18,4 +18,6 @@ $disabled-brightness: 1.1;
transition: background $time;
}
+$name: "dark";
+
@import "./_maketheme.scss";
diff --git a/src/light.scss b/src/light.scss
index 914a68d..e745f30 100644
--- a/src/light.scss
+++ b/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";
diff --git a/src/theme/_btn.scss b/src/theme/_btn.scss
index 78f5608..c704b7f 100644
--- a/src/theme/_btn.scss
+++ b/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 {
diff --git a/src/theme/_card.scss b/src/theme/_card.scss
index 676cae3..e1d3ecd 100644
--- a/src/theme/_card.scss
+++ b/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);
}
diff --git a/src/theme/_global.scss b/src/theme/_global.scss
index c797bf3..78bc10f 100644
--- a/src/theme/_global.scss
+++ b/src/theme/_global.scss
@@ -1,5 +1,4 @@
-html,
-body {
+.#{$theme} {
background: $background;
color: $on-background;
-}
\ No newline at end of file
+}
diff --git a/src/theme/_header.scss b/src/theme/_header.scss
index c056231..db88b46 100644
--- a/src/theme/_header.scss
+++ b/src/theme/_header.scss
@@ -1,3 +1,3 @@
-.#{$ns}header {
+.#{$theme} .#{$ns}header {
@include Elevation(3);
}
diff --git a/src/theme/_input.scss b/src/theme/_input.scss
index a8915f5..5748483 100644
--- a/src/theme/_input.scss
+++ b/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;
}
diff --git a/src/theme/_list.scss b/src/theme/_list.scss
index 2bf0190..0f12011 100644
--- a/src/theme/_list.scss
+++ b/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%);
}
diff --git a/src/theme/_modal.scss b/src/theme/_modal.scss
index b1009d3..3ac03fa 100644
--- a/src/theme/_modal.scss
+++ b/src/theme/_modal.scss
@@ -1,4 +1,4 @@
-.#{$ns}modal {
+.#{$theme} .#{$ns}modal {
background: $background;
@include Elevation(24);
diff --git a/src/theme/_table.scss b/src/theme/_table.scss
index ec5522d..da776d1 100644
--- a/src/theme/_table.scss
+++ b/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%);
}
Title
-
-