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

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

diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss
index e020928..081ac22 100644 (file)
--- a/assets/sass/components/_table.scss
+++ b/assets/sass/components/_table.scss
@@ -17,12 +17,18 @@
 \r
                tbody {\r
                        tr {\r
-                               border: solid 1px _palette(border);\r
+                               border: solid 1px _palette_light(border);\r
                                border-left: 0;\r
                                border-right: 0;\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       border: solid 1px _palette_dark(border);\r
+                               }\r
 \r
                                &:nth-child(2n + 1) {\r
-                                       background-color: _palette(border-bg);\r
+                                       background-color: _palette_light(border-bg);\r
+                                       @media screen and (prefers-color-scheme: dark) {\r
+                                               background-color: _palette_dark(border-bg);\r
+                                       }\r
                                }\r
                        }\r
                }\r
@@ -32,19 +38,28 @@
                }\r
 \r
                th {\r
-                       color: _palette(fg-bold);\r
+                       color: _palette_light(fg-bold);\r
                        font-size: 0.9em;\r
                        font-weight: _font(weight-bold);\r
                        padding: 0 0.75em 0.75em 0.75em;\r
                        text-align: left;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               color: _palette_dark(fg-bold);\r
+                       }\r
                }\r
 \r
                thead {\r
-                       border-bottom: solid 2px _palette(border);\r
+                       border-bottom: solid 2px _palette_light(border);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               border-bottom: solid 2px _palette_dark(border);\r
+                       }\r
                }\r
 \r
                tfoot {\r
-                       border-top: solid 2px _palette(border);\r
+                       border-top: solid 2px _palette_light(border);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               border-top: solid 2px _palette_dark(border);\r
+                       }\r
                }\r
 \r
                &.alt {\r
@@ -53,9 +68,12 @@
                        tbody {\r
                                tr {\r
                                        td {\r
-                                               border: solid 1px _palette(border);\r
+                                               border: solid 1px _palette_light(border);\r
                                                border-left-width: 0;\r
                                                border-top-width: 0;\r
+                                               @media screen and (prefers-color-scheme: dark) {\r
+                                                       border-top: solid 1px _palette_dark(border);\r
+                                               }\r
 \r
                                                &:first-child {\r
                                                        border-left-width: 1px;\r