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

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

diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss
index 212f337..86ad81c 100644 (file)
--- a/assets/sass/components/_icon.scss
+++ b/assets/sass/components/_icon.scss
@@ -33,14 +33,18 @@
 \r
                &.alt {\r
                        &:before {\r
-                               background-color: _palette(fg-bold);\r
+                               background-color: _palette_light(fg-bold);\r
                                border-radius: 100%;\r
-                               color: _palette(bg);\r
+                               color: _palette_light(bg);\r
                                display: inline-block;\r
                                height: 2em;\r
                                line-height: 2em;\r
                                text-align: center;\r
                                width: 2em;\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-color: _palette_dark(fg-bold);\r
+                                       color: _palette_dark(bg);\r
+                               }\r
                        }\r
                }\r
        }\r
@@ -53,13 +57,19 @@
 \r
                        &:hover {\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
                        &:active {\r
                                &:before {\r
-                                       background-color: desaturate(darken(_palette(accent1), 15), 5);\r
+                                       background-color: desaturate(darken(_palette_light(accent1), 15), 5);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: desaturate(darken(_palette_dark(accent1), 15), 5);\r
+                                       }\r
                                }\r
                        }\r
                }\r