feat(css): refine dark mode support with auto_dark_mode option (def…

…ault on)
sparanoid · Aug 24, 2019 · 4c936d0 · 4c936d0
1 parent 980c16d
commit 4c936d0
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/_app/_data/curtana.yml b/_app/_data/curtana.yml
@@ -13,3 +13,6 @@ clean_homepage: false
 # Style post link color (if defined) for article list
 # Default:      false
 colorful_list:  false
+
+# Enable dark mode automatically via `prefers-color-scheme: dark`
+auto_dark_mode: false
diff --git a/_app/_includes/themes/curtana/includes/css-variables.html b/_app/_includes/themes/curtana/includes/css-variables.html
@@ -18,6 +18,18 @@
     {% endif %}
   }
 
+  {%- comment -%} Dark mode overrides, that's all we need for dark mode {%- endcomment -%}
+  {% if site.data.curtana.auto_dark_mode %}
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --text-color-l: 95%;
+      --bg-color-l: 14%;
+      --bg-color-s: 2%;
+      --code-color-l: calc(var(--link-color-l) * 1.3);
+    }
+  }
+  {% endif %}
+
   body {
     {% if page.scheme-bg-img %}
       {% assign first = true %}

diff --git a/_app/assets/_scss/_user.scss b/_app/assets/_scss/_user.scss
@@ -27,13 +27,8 @@
 
 // EXAMPLE: amsf.github.io custom appearance
 :root {
-  --code-color-h: calc(var(--link-color-h) + 30);
+  --code-color-h: calc(var(--link-color-h) + 10);
   --code-color-s: calc(var(--link-color-s) * .2 + 40%);
-
-  @media (prefers-color-scheme: dark) {
-    // Code should be lighter in dark mode
-    --code-color-l: calc(var(--link-color-l) * 1.3);
-  }
 }
 
 .content .sub-title {

diff --git a/_app/assets/themes/curtana/_scss/_common.scss b/_app/assets/themes/curtana/_scss/_common.scss
@@ -565,6 +565,7 @@ body:hover .latest {
       margin: 0 0 1.8rem;
       border: none;
       border-bottom: 1px solid var(--text-color);
+      background: inherit;
 
       // Remove border-radius for iOS devices
       border-radius: 0;

diff --git a/_app/assets/themes/curtana/_scss/_variables.scss b/_app/assets/themes/curtana/_scss/_variables.scss
@@ -136,10 +136,4 @@ $breakpoint-xs: 400px !default;
   --code-color-90: hsla(var(--code-color-hsl), .9);
   --code-color-light: hsl(var(--code-color-h), var(--code-color-s), calc(var(--code-color-l) / .9));
   --code-color-dark: hsl(var(--code-color-h), var(--code-color-s), calc(var(--code-color-l) * .9));
-
-  // Dark mode overrides, that's all we need for dark mode
-  @media (prefers-color-scheme: dark) {
-    --text-color-l: 95%;
-    --bg-color-l: 5%;
-  }
 }