added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / layout / _banner.scss

diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss
index 64481d7..1470f92 100644 (file)
--- a/assets/sass/layout/_banner.scss
+++ b/assets/sass/layout/_banner.scss
@@ -28,7 +28,7 @@
                        @include vendor('transition', 'opacity #{_duration(banner)} ease');\r
                        @include vendor('transition-delay', '0.75s');\r
                        @include vendor('pointer-events', 'none');\r
-                       background-color: _palette(bg);\r
+                       background-color: _palette_light(bg);\r
                        content: '';\r
                        display: block;\r
                        height: 100%;\r
@@ -38,6 +38,9 @@
                        top: 0;\r
                        width: 100%;\r
                        z-index: 1;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               background-color: _palette_dark(bg);\r
+                       }\r
                }\r
 \r
                h1 {\r
@@ -104,12 +107,21 @@
                        }\r
                }\r
 \r
-               &.style1 { &:after { background-color: _palette(accent1); } }\r
-               &.style2 { &:after { background-color: _palette(accent2); } }\r
-               &.style3 { &:after { background-color: _palette(accent3); } }\r
-               &.style4 { &:after { background-color: _palette(accent4); } }\r
-               &.style5 { &:after { background-color: _palette(accent5); } }\r
-               &.style6 { &:after { background-color: _palette(accent6); } }\r
+               &.style1 { &:after { background-color: _palette_light(accent1); } }\r
+               &.style2 { &:after { background-color: _palette_light(accent2); } }\r
+               &.style3 { &:after { background-color: _palette_light(accent3); } }\r
+               &.style4 { &:after { background-color: _palette_light(accent4); } }\r
+               &.style5 { &:after { background-color: _palette_light(accent5); } }\r
+               &.style6 { &:after { background-color: _palette_light(accent6); } }\r
+\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       &.style1 { &:after { background-color: _palette_dark(accent1); } }\r
+                       &.style2 { &:after { background-color: _palette_dark(accent2); } }\r
+                       &.style3 { &:after { background-color: _palette_dark(accent3); } }\r
+                       &.style4 { &:after { background-color: _palette_dark(accent4); } }\r
+                       &.style5 { &:after { background-color: _palette_dark(accent5); } }\r
+                       &.style6 { &:after { background-color: _palette_dark(accent6); } }\r
+               }\r
 \r
                body.is-preload & {\r
                        &:after {\r