3 files changed, 32 insertions(+), 5 deletions(-)

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

@@ 19,11 19,15 @@
     {% include_cached browser-upgrade.html %}
 
     <input type="checkbox" id="darkmode">
+    <input type="checkbox" id="lightmode">
 
     <div>
       <div class="top-flex">
         <label for="darkmode">
-          <i class="fa fa-moon"></i>
+          <i class="fa fa-moon-o"></i>
+        </label>
+        <label for="lightmode">
+          <i class="fa fa-sun-o"></i>
         </label>
 
         {% include_cached masthead.html %}

@@ 17,11 17,11 @@ input#follow-button {
   display: none;
 }
 
-input#darkmode {
+input#darkmode, input#lightmode {
   display: none;
 }
 
-label[for="darkmode"] {
+label[for="darkmode"], label[for="lightmode"] {
   position: absolute;
   z-index: 1000;
   bottom: 1.75em;

@@ 11,12 11,35 @@ $comments-provider: {{ site.comments.provider }};
 
 @import "minimal-mistakes"; // main partials
 
+label[for="darkmode"] {
+  display: none;
+}
+
+label[for="lightmode"] {
+  display: block;
+}
+
 @media (prefers-color-scheme: light) {
+  label[for="darkmode"] {
+    display: block;
+  }
+
+  label[for="lightmode"] {
+    display: none;
+  }
+
   @import "minimal-mistakes/skins/{{ site.minimal_mistakes_light_skin | default: 'default' }}"; // skin
   @import "minimal-mistakes/colors"; // color overrides
 }
 
-input#darkmode:checked ~ * {
-  @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+input#lightmode:checked ~ * {
+  @import "minimal-mistakes/skins/{{ site.minimal_mistakes_light_skin | default: 'default' }}"; // skin
   @import "minimal-mistakes/colors"; // color overrides
 }
+
+@media (prefers-color-scheme: light) {
+  input#darkmode:checked ~ * {
+    @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+    @import "minimal-mistakes/colors"; // color overrides
+  }
+}