~xdavidwu/xdavidwu.link: add darkmode switch without js

3 files changed, 23 insertions(+), 3 deletions(-)

M _layouts/default.html
M _sass/minimal-mistakes/_noscript.scss
M assets/css/main.scss

M _layouts/default.html => _layouts/default.html +6 -0

@@ 17,6 17,12 @@
   <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
     {% include_cached skip-links.html %}
     {% include_cached browser-upgrade.html %}
+
+    <input type="checkbox" id="darkmode">
+    <label for="darkmode">
+      <i class="fa fa-moon"></i>
+    </label>
+
     {% include_cached masthead.html %}
 
     <div class="initial-content">

M _sass/minimal-mistakes/_noscript.scss => _sass/minimal-mistakes/_noscript.scss +13 -2

@@ 9,10 9,21 @@
   }
 }
 
-#follow-button:checked + label + ul.author__urls {
+input#follow-button:checked + label + ul.author__urls {
   display: block;
 }
 
-#follow-button {
+input#follow-button {
   display: none;
 }
+
+input#darkmode {
+  display: none;
+}
+
+label[for="darkmode"] {
+  position: absolute;
+  z-index: 1000;
+  bottom: 1.75em;
+  right: 1em;
+}

M assets/css/main.scss => assets/css/main.scss +4 -1

@@ 16,4 16,7 @@ $comments-provider: {{ site.comments.provider }};
   @import "minimal-mistakes/colors"; // color overrides
 }
 
-
+input#darkmode:checked ~ * {
+  @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+  @import "minimal-mistakes/colors"; // color overrides
+}