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

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

diff --git a/assets/sass/components/_tiles.scss b/assets/sass/components/_tiles.scss
index 71745cf..4e199ae 100644 (file)
--- a/assets/sass/components/_tiles.scss
+++ b/assets/sass/components/_tiles.scss
@@ -79,7 +79,7 @@
                        }\r
 \r
                        &:after {\r
-                               background-color: transparentize(_palette(bg), 0.75);\r
+                               background-color: transparentize(_palette_light(bg), 0.75);\r
                                content: '';\r
                                display: block;\r
                                height: 100%;\r
@@ -88,6 +88,9 @@
                                top: 0;\r
                                width: 100%;\r
                                z-index: 1;\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-color: transparentize(_palette_dark(bg), 0.75);\r
+                               }\r
                        }\r
 \r
                        &:hover {\r
@@ -109,37 +112,55 @@
 \r
                        &:nth-child(6n - 5) {\r
                                &:before {\r
-                                       background-color: _palette(accent1);\r
+                                       background-color: _palette_light(accent1);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent1);\r
+                                       }\r
                                }\r
                        }\r
 \r
                        &:nth-child(6n - 4) {\r
                                &:before {\r
-                                       background-color: _palette(accent2);\r
+                                       background-color: _palette_light(accent2);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent2);\r
+                                       }\r
                                }\r
                        }\r
 \r
                        &:nth-child(6n - 3) {\r
                                &:before {\r
-                                       background-color: _palette(accent3);\r
+                                       background-color: _palette_light(accent3);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent3);\r
+                                       }\r
                                }\r
                        }\r
 \r
                        &:nth-child(6n - 2) {\r
                                &:before {\r
-                                       background-color: _palette(accent4);\r
+                                       background-color: _palette_light(accent4);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent4);\r
+                                       }\r
                                }\r
                        }\r
 \r
                        &:nth-child(6n - 1) {\r
                                &:before {\r
-                                       background-color: _palette(accent5);\r
+                                       background-color: _palette_light(accent5);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent5);\r
+                                       }\r
                                }\r
                        }\r
 \r
                        &:nth-child(6n) {\r
                                &:before {\r
-                                       background-color: _palette(accent6);\r
+                                       background-color: _palette_light(accent6);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(accent6);\r
+                                       }\r
                                }\r
                        }\r
                }\r