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

[theme-danix.xyz.git] / assets / sass / base / _typography.scss

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index 2009f4d..82a5b18 100644 (file)
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -7,7 +7,10 @@
 /* Type */\r
 \r
        body, input, select, textarea {\r
-               color: _palette(fg);\r
+               color: _palette_light(fg);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg);\r
+               }\r
                font-family: _font(family);\r
                font-size: 17pt;\r
                font-weight: _font(weight);\r
@@ -38,16 +41,25 @@
 \r
                &:hover {\r
                        border-bottom-color: transparent;\r
-                       color: _palette(highlight) !important;\r
+                       color: _palette_light(highlight) !important;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               color: _palette_dark(highlight);\r
+                       }\r
                }\r
 \r
                &:active {\r
-                       color: desaturate(darken(_palette(highlight), 15), 5) !important;\r
+                       color: desaturate(darken(_palette_light(highlight), 15), 5) !important;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;\r
+                       }\r
                }\r
        }\r
 \r
        strong, b {\r
-               color: _palette(fg-bold);\r
+               color: _palette_light(fg-bold);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-bold);\r
+               }\r
                font-weight: _font(weight-bold);\r
        }\r
 \r
@@ -60,7 +72,10 @@
        }\r
 \r
        h1, h2, h3, h4, h5, h6 {\r
-               color: _palette(fg-bold);\r
+               color: _palette_light(fg-bold);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-bold);\r
+               }\r
                font-weight: _font(weight-bold);\r
                line-height: 1.65;\r
                margin: 0 0 (_size(element-margin) * 0.5) 0;\r
@@ -122,14 +137,20 @@
        }\r
 \r
        blockquote {\r
-               border-left: solid 4px _palette(border);\r
+               border-left: solid 4px _palette_light(border);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       border-left: solid 4px _palette_dark(border);\r
+               }\r
                font-style: italic;\r
                margin: 0 0 _size(element-margin) 0;\r
                padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);\r
        }\r
 \r
        code {\r
-               background: _palette(border-bg);\r
+               background: _palette_light(border-bg);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       background: _palette_dark(border-bg);\r
+               }\r
                font-family: _font(family-fixed);\r
                font-size: 0.9em;\r
                margin: 0 0.25em;\r
@@ -152,7 +173,10 @@
 \r
        hr {\r
                border: 0;\r
-               border-bottom: solid 1px _palette(border);\r
+               border-bottom: solid 1px _palette_light(border);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       border-bottom: solid 1px _palette_dark(border);\r
+               }\r
                margin: _size(element-margin) 0;\r
 \r
                &.major {\r