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

[theme-danix.xyz.git] / assets / sass / components / _spotlights.scss

diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss
index 337bc1a..882ebe4 100644 (file)
--- a/assets/sass/components/_spotlights.scss
+++ b/assets/sass/components/_spotlights.scss
@@ -16,7 +16,10 @@
                > section {\r
                        @include vendor('display', 'flex');\r
                        @include vendor('flex-direction', 'row');\r
-                       background-color: desaturate(lighten(_palette(bg-alt), 2), 1);\r
+                       background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);\r
+                       }\r
 \r
                        > .image {\r
                                background-position: center center;\r
@@ -33,7 +36,7 @@
                                }\r
 \r
                                &:before {\r
-                                       background: transparentize(_palette(bg), 0.1);\r
+                                       background: transparentize(_palette_light(bg), 0.1);\r
                                        content: '';\r
                                        display: block;\r
                                        height: 100%;\r
@@ -42,6 +45,9 @@
                                        position: absolute;\r
                                        top: 0;\r
                                        width: 100%;\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background: transparentize(_palette_dark(bg), 0.1);\r
+                                       }\r
                                }\r
                        }\r
 \r
@@ -62,7 +68,10 @@
 \r
                        &:nth-child(2n) {\r
                                @include vendor('flex-direction', 'row-reverse');\r
-                               background-color: desaturate(lighten(_palette(bg-alt), 4), 2);\r
+                               background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);\r
+                               }\r
 \r
                                > .content {\r
                                        @include vendor('align-items', 'flex-end');\r