Fix Firefox dark mode bug

riggraz · Sep 26, 2020 · b14a13f · b14a13f
1 parent 698890e
commit b14a13f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: "en" }}" a="{{ site.theme_config.appearance | default: "auto" }}">
+<html lang="{{ page.lang | default: "en" }}">
         {%- include head.html -%}
-    <body>
+    <body a="{{ site.theme_config.appearance | default: "auto" }}">
     <main class="page-content" aria-label="Content">
-        <div class="wrapper">
+        <div class="w">
             {{ content }}
         </div>
     </main>

diff --git a/_sass/no-style-please.scss b/_sass/no-style-please.scss
@@ -1,3 +1,4 @@
+// -------------- THEME SWITCHER -------------- //
 @mixin dark-appearance {
   filter: invert(1);
   img {
@@ -7,21 +8,31 @@
   }
 }
 
-html[a="dark"] { @include dark-appearance; }
+body[a="dark"] { @include dark-appearance; }
+
 
 @media (prefers-color-scheme: dark) {
-  html[a="auto"] { @include dark-appearance; }
+  body[a="auto"] { @include dark-appearance; }
 }
+// -------------------------------------------- //
+
+// bg color is also needed in html in order to
+// block body's background propagation
+// see: https://stackoverflow.com/a/61265706
+html, body { background-color: white; }
 
-html {
+html { height: 100%; }
+
+body {
   color: black;
-  background-color: white;
   font-family: monospace;
   font-size: 1.3rem;
   line-height: 1.3;
+  margin: 0;
+  min-height: 100%;
 }
 
-h2, h3, h4, h5, h6 { margin-top: 3rem; }
+h2, h3, h4, h5 { margin-top: 3rem; }
 
 hr { margin: 2rem 0; }
 
@@ -31,10 +42,10 @@ li { margin: 0.4rem 0; }
 
 *:target { background-color: yellow; }
 
-.wrapper {
-  max-width: 60ch;
-  margin: 4rem auto;
-  padding: 0 1rem;
+.w {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
 }
 
 hr {