From 898db6050f958a02ae39b7e6621cd955272140ed Mon Sep 17 00:00:00 2001
From: moshenskyDV <moshensky.c1371@yandex.ru>
Date: Sun, 6 Oct 2019 23:13:26 +0300
Subject: [PATCH 1/3] Feat #6 night mode toggler

---
 _includes/footer.html  |  1 +
 _includes/scripts.html | 20 +++++++++++
 _sass/_nightmode.scss  | 81 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+)
 create mode 100644 _sass/_nightmode.scss

diff --git a/_includes/footer.html b/_includes/footer.html
index 301c058..98a9e8c 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,7 @@
 <footer>
   <p>© {{ site.time | date: '%Y' }} elementary, Inc</p>
   <ul>
+    <li><a href="#" id="toggle-night-mode">Toggle night mode</a></li>
     <li><a href="https://elementary.io/press" target="_self">Press</a></li>
     <li><a href="https://elementary.io/brand" target="_self">Brand</a></li>
     <li><a href="https://elementary.io/oem" target="_self">OEMs</a></li>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index 7a784fd..6972829 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -12,5 +12,25 @@
       }
     });
   });
+
+  //Toggle night mode
+  function toggleNightMode() {
+    const mode = localStorage.getItem('mode');
+    if (mode === 'dark') {
+      document.body.classList.add('night-mode');
+    } else {
+      document.body.classList.remove('night-mode');
+    }
+  }
+  toggleNightMode();
+  document.getElementById('toggle-night-mode').addEventListener('click', e => {
+    e.preventDefault();
+    if (localStorage.getItem('mode') !== 'dark') {
+      localStorage.setItem('mode', 'dark');
+    } else {
+      localStorage.removeItem('mode');
+    }
+    toggleNightMode();
+  })
 </script>
 
diff --git a/_sass/_nightmode.scss b/_sass/_nightmode.scss
new file mode 100644
index 0000000..1ec2501
--- /dev/null
+++ b/_sass/_nightmode.scss
@@ -0,0 +1,81 @@
+:root {
+  .night-mode {
+    --bg-color: var(--black-700);
+    --fg-color: var(--silver-300);
+    --accent-color: var(--blueberry-300);
+    --secondary-bg-color: var(--black-500);
+    --secondary-fg-color: var(--silver-300);
+  }
+}
+
+.night-mode {
+  .byline {
+    .avatar {
+      &::before {
+        box-shadow:
+          inset 0 0 0 1px black,
+          inset 0 0 0 2px rgba(255, 255, 255, 0.05),
+          inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
+          inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
+          0 1px 3px 0 rgba(0, 0, 0, 0.24),
+          0 1px 2px 0 rgba(0, 0, 0, 0.48);
+      }
+    }
+  }
+  .featured {
+    .featured-image {
+      background-color: var(--silver-900);
+      border: 1px solid black;
+      box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+        0 1px 3px rgba(0, 0, 0, 0.1),
+        0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+  }
+  .highlight {
+    background-color: var(--solarized-base03);
+    color: var(--solarized-base1);
+
+    .gl {
+      background-color: var(--solarized-base02);
+    }
+
+    .c,
+    .c1,
+    .cm,
+    .sb {
+      color: var(--solarized-base01);
+    }
+
+    .err,
+    .g,
+    .ge,
+    .go,
+    .gp,
+    .gs,
+    .gt,
+    .l,
+    .ld,
+    .n,
+    .na,
+    .nl,
+    .nn,
+    .nx,
+    .p,
+    .py,
+    .sd,
+    .sh,
+    .w {
+      color: var(--solarized-base1);
+    }
+  }
+  figure {
+    &.card {
+      img {
+        background-color: var(--silver-900);
+      }
+    }
+  }
+}

From 10e67b3a23f38f3a4bf195942adbcc4ffb7dd1a2 Mon Sep 17 00:00:00 2001
From: moshenskyDV <moshensky.c1371@yandex.ru>
Date: Mon, 7 Oct 2019 21:23:38 +0300
Subject: [PATCH 2/3] Fix #6 night mode mixins, js check

---
 _includes/footer.html  |  2 +-
 _includes/scripts.html |  7 +++--
 _sass/_byline.scss     |  8 +----
 _sass/_code.scss       | 36 +---------------------
 _sass/_colors.scss     |  6 +---
 _sass/_featured.scss   |  9 +-----
 _sass/_figures.scss    |  2 +-
 _sass/_mixins.scss     | 70 ++++++++++++++++++++++++++++++++++++++++++
 _sass/_nightmode.scss  | 61 +++---------------------------------
 css/main.scss          |  6 ++++
 10 files changed, 92 insertions(+), 115 deletions(-)
 create mode 100644 _sass/_mixins.scss

diff --git a/_includes/footer.html b/_includes/footer.html
index 98a9e8c..db8c892 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,7 +1,7 @@
 <footer>
   <p>© {{ site.time | date: '%Y' }} elementary, Inc</p>
   <ul>
-    <li><a href="#" id="toggle-night-mode">Toggle night mode</a></li>
+    <li><a href="#" id="toggle-night-mode" class="hidden">Toggle night mode</a></li>
     <li><a href="https://elementary.io/press" target="_self">Press</a></li>
     <li><a href="https://elementary.io/brand" target="_self">Brand</a></li>
     <li><a href="https://elementary.io/oem" target="_self">OEMs</a></li>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index 6972829..9c074b1 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -13,7 +13,7 @@
     });
   });
 
-  //Toggle night mode
+  // Toggle night mode
   function toggleNightMode() {
     const mode = localStorage.getItem('mode');
     if (mode === 'dark') {
@@ -23,7 +23,10 @@
     }
   }
   toggleNightMode();
-  document.getElementById('toggle-night-mode').addEventListener('click', e => {
+  const trigger = document.getElementById('toggle-night-mode');
+  // Show toggle trigger if JS enabled
+  trigger.classList.remove('hidden');
+  trigger.addEventListener('click', e => {
     e.preventDefault();
     if (localStorage.getItem('mode') !== 'dark') {
       localStorage.setItem('mode', 'dark');
diff --git a/_sass/_byline.scss b/_sass/_byline.scss
index ac0b64c..4fe0369 100644
--- a/_sass/_byline.scss
+++ b/_sass/_byline.scss
@@ -33,13 +33,7 @@
       width: 100%;
 
       @media (prefers-color-scheme: dark) {
-        box-shadow:
-          inset 0 0 0 1px black,
-          inset 0 0 0 2px rgba(255, 255, 255, 0.05),
-          inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
-          inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
-          0 1px 3px 0 rgba(0, 0, 0, 0.24),
-          0 1px 2px 0 rgba(0, 0, 0, 0.48);
+        @include dark-avatar-shadow;
       }
     }
   }
diff --git a/_sass/_code.scss b/_sass/_code.scss
index 4bb3757..0353d7a 100644
--- a/_sass/_code.scss
+++ b/_sass/_code.scss
@@ -157,40 +157,6 @@ code {
 
 @media (prefers-color-scheme: dark) {
   .highlight {
-    background-color: var(--solarized-base03);
-    color: var(--solarized-base1);
-
-    .gl {
-      background-color: var(--solarized-base02);
-    }
-
-    .c,
-    .c1,
-    .cm,
-    .sb {
-      color: var(--solarized-base01);
-    }
-
-    .err,
-    .g,
-    .ge,
-    .go,
-    .gp,
-    .gs,
-    .gt,
-    .l,
-    .ld,
-    .n,
-    .na,
-    .nl,
-    .nn,
-    .nx,
-    .p,
-    .py,
-    .sd,
-    .sh,
-    .w {
-      color: var(--solarized-base1);
-    }
+    @include dark-highlight;
   }
 }
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
index 99b8af3..cb5f2e1 100644
--- a/_sass/_colors.scss
+++ b/_sass/_colors.scss
@@ -83,11 +83,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: var(--black-700);
-    --fg-color: var(--silver-300);
-    --accent-color: var(--blueberry-300);
-    --secondary-bg-color: var(--black-500);
-    --secondary-fg-color: var(--silver-300);
+    @include dark-root;
   }
 }
 
diff --git a/_sass/_featured.scss b/_sass/_featured.scss
index a190d58..1567fc4 100644
--- a/_sass/_featured.scss
+++ b/_sass/_featured.scss
@@ -90,14 +90,7 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--silver-900);
-      border: 1px solid black;
-      box-shadow:
-        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
-        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
-        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
-        0 1px 3px rgba(0, 0, 0, 0.1),
-        0 1px 2px rgba(0, 0, 0, 0.2);
+      @include dark-image;
     }
 
     img {
diff --git a/_sass/_figures.scss b/_sass/_figures.scss
index 64e7eb1..5a3e14a 100644
--- a/_sass/_figures.scss
+++ b/_sass/_figures.scss
@@ -132,7 +132,7 @@ figure {
         0 3px 3px rgba(0, 0, 0, 0.22);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--silver-900);
+        @include dark-figure;
       }
     }
   }
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
new file mode 100644
index 0000000..74f6967
--- /dev/null
+++ b/_sass/_mixins.scss
@@ -0,0 +1,70 @@
+@mixin dark-root {
+  --bg-color: var(--black-700);
+  --fg-color: var(--silver-300);
+  --accent-color: var(--blueberry-300);
+  --secondary-bg-color: var(--black-500);
+  --secondary-fg-color: var(--silver-300);
+}
+
+@mixin dark-avatar-shadow {
+  box-shadow:
+    inset 0 0 0 1px black,
+    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
+    inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
+    inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
+    0 1px 3px 0 rgba(0, 0, 0, 0.24),
+    0 1px 2px 0 rgba(0, 0, 0, 0.48);
+}
+
+@mixin dark-image {
+  background-color: var(--silver-900);
+    border: 1px solid black;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+      0 1px 3px rgba(0, 0, 0, 0.1),
+      0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin dark-highlight {
+  background-color: var(--solarized-base03);
+  color: var(--solarized-base1);
+
+  .gl {
+    background-color: var(--solarized-base02);
+  }
+
+  .c,
+  .c1,
+  .cm,
+  .sb {
+    color: var(--solarized-base01);
+  }
+
+  .err,
+  .g,
+  .ge,
+  .go,
+  .gp,
+  .gs,
+  .gt,
+  .l,
+  .ld,
+  .n,
+  .na,
+  .nl,
+  .nn,
+  .nx,
+  .p,
+  .py,
+  .sd,
+  .sh,
+  .w {
+    color: var(--solarized-base1);
+  }
+}
+
+@mixin dark-figure {
+  background-color: var(--silver-900);
+}
diff --git a/_sass/_nightmode.scss b/_sass/_nightmode.scss
index 1ec2501..1c7147e 100644
--- a/_sass/_nightmode.scss
+++ b/_sass/_nightmode.scss
@@ -1,10 +1,6 @@
 :root {
   .night-mode {
-    --bg-color: var(--black-700);
-    --fg-color: var(--silver-300);
-    --accent-color: var(--blueberry-300);
-    --secondary-bg-color: var(--black-500);
-    --secondary-fg-color: var(--silver-300);
+    @include dark-root;
   }
 }
 
@@ -12,69 +8,22 @@
   .byline {
     .avatar {
       &::before {
-        box-shadow:
-          inset 0 0 0 1px black,
-          inset 0 0 0 2px rgba(255, 255, 255, 0.05),
-          inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
-          inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
-          0 1px 3px 0 rgba(0, 0, 0, 0.24),
-          0 1px 2px 0 rgba(0, 0, 0, 0.48);
+        @include dark-avatar-shadow;
       }
     }
   }
   .featured {
     .featured-image {
-      background-color: var(--silver-900);
-      border: 1px solid black;
-      box-shadow:
-        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
-        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
-        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
-        0 1px 3px rgba(0, 0, 0, 0.1),
-        0 1px 2px rgba(0, 0, 0, 0.2);
+      @include dark-image;
     }
   }
   .highlight {
-    background-color: var(--solarized-base03);
-    color: var(--solarized-base1);
-
-    .gl {
-      background-color: var(--solarized-base02);
-    }
-
-    .c,
-    .c1,
-    .cm,
-    .sb {
-      color: var(--solarized-base01);
-    }
-
-    .err,
-    .g,
-    .ge,
-    .go,
-    .gp,
-    .gs,
-    .gt,
-    .l,
-    .ld,
-    .n,
-    .na,
-    .nl,
-    .nn,
-    .nx,
-    .p,
-    .py,
-    .sd,
-    .sh,
-    .w {
-      color: var(--solarized-base1);
-    }
+    @include dark-highlight;
   }
   figure {
     &.card {
       img {
-        background-color: var(--silver-900);
+        @include dark-figure;
       }
     }
   }
diff --git a/css/main.scss b/css/main.scss
index 4059e11..568e743 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -4,9 +4,11 @@
 @charset "utf-8";
 
 // Global
+@import "mixins";
 @import "colors";
 @import "layout";
 @import "typography";
+@import "nightmode";
 
 // Components
 @import "byline";
@@ -113,3 +115,7 @@ nav.pagination {
   text-decoration: none;
 }
 
+.hidden {
+  display: none;
+}
+

From b414cee8e9819af56088db2266c25f1b0d472a9b Mon Sep 17 00:00:00 2001
From: moshenskyDV <moshensky.c1371@yandex.ru>
Date: Tue, 8 Oct 2019 22:05:22 +0300
Subject: [PATCH 3/3] Fix #6 update respectfully to default dark mode

---
 _includes/scripts.html | 36 ++++++++++--------
 _sass/_byline.scss     |  8 +---
 _sass/_code.scss       | 34 +----------------
 _sass/_colors.scss     |  6 +--
 _sass/_featured.scss   |  9 +----
 _sass/_figures.scss    |  2 +-
 _sass/_mixins.scss     | 85 ++++++++++++++++++++++++++++++++++++++----
 _sass/_nightmode.scss  | 32 +++++++++++++++-
 8 files changed, 135 insertions(+), 77 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 9c074b1..586ec22 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -14,26 +14,32 @@
   });
 
   // Toggle night mode
-  function toggleNightMode() {
-    const mode = localStorage.getItem('mode');
-    if (mode === 'dark') {
-      document.body.classList.add('night-mode');
-    } else {
-      document.body.classList.remove('night-mode');
-    }
-  }
-  toggleNightMode();
-  const trigger = document.getElementById('toggle-night-mode');
   // Show toggle trigger if JS enabled
+  const trigger = document.getElementById('toggle-night-mode');
   trigger.classList.remove('hidden');
+  if (localStorage.getItem('mode') === 'dark') {
+    document.body.classList.add('dark-mode');
+  } else if (localStorage.getItem('mode') === 'light') {
+    document.body.classList.add('light-mode');
+  }
   trigger.addEventListener('click', e => {
     e.preventDefault();
-    if (localStorage.getItem('mode') !== 'dark') {
-      localStorage.setItem('mode', 'dark');
-    } else {
-      localStorage.removeItem('mode');
+    switch (localStorage.getItem('mode')) {
+      case 'dark':
+        localStorage.setItem('mode', 'light');
+        document.body.classList.remove('dark-mode');
+        document.body.classList.add('light-mode');
+        break;
+      case 'light':
+        localStorage.setItem('mode', 'dark');
+        document.body.classList.remove('light-mode');
+        document.body.classList.add('dark-mode');
+        break;
+      default:
+        const targetMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'light' : 'dark';
+        localStorage.setItem('mode', targetMode);
+        document.body.classList.add(`${targetMode}-mode`);
     }
-    toggleNightMode();
   })
 </script>
 
diff --git a/_sass/_byline.scss b/_sass/_byline.scss
index 4fe0369..1d00106 100644
--- a/_sass/_byline.scss
+++ b/_sass/_byline.scss
@@ -21,16 +21,10 @@
     &::before {
       content: "";
       border-radius: 50%;
-      box-shadow:
-        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
-        inset 0 0 0 2px rgba(255, 255, 255, 0.1),
-        inset 0 2px 0 0 rgba(255, 255, 255, 0.45),
-        inset 0 -2px 0 0 rgba(255, 255, 255, 0.15),
-        0 1px 3px 0 rgba(0, 0, 0, 0.12),
-        0 1px 2px 0 rgba(0, 0, 0, 0.24);
       height: 100%;
       position: absolute;
       width: 100%;
+      @include light-avatar-shadow;
 
       @media (prefers-color-scheme: dark) {
         @include dark-avatar-shadow;
diff --git a/_sass/_code.scss b/_sass/_code.scss
index 0353d7a..a0a6979 100644
--- a/_sass/_code.scss
+++ b/_sass/_code.scss
@@ -45,44 +45,14 @@ code {
   margin: auto;
   overflow: auto;
   text-align: left;
-  background-color: var(--solarized-base3);
-  color: var(--solarized-base01);
+
+  @include light-highlight;
 
   .gl {
-    background-color: var(--solarized-base2);
     padding: 0 0.5em;
     text-align: right;
   }
 
-  .c,
-  .c1,
-  .cm,
-  .sb {
-    color: var(--solarized-base1);
-  }
-
-  .err,
-  .g,
-  .ge,
-  .go,
-  .gp,
-  .gs,
-  .gt,
-  .l,
-  .ld,
-  .n,
-  .na,
-  .nl,
-  .nn,
-  .nx,
-  .p,
-  .py,
-  .sd,
-  .sh,
-  .w {
-    color: var(--solarized-base01);
-  }
-
   .gd,
   .il,
   .m,
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
index cb5f2e1..8103490 100644
--- a/_sass/_colors.scss
+++ b/_sass/_colors.scss
@@ -72,13 +72,9 @@
   --solarized-red: #dc322f;
   --solarized-yellow: #b58900;
 
-  --bg-color: white;
-  --fg-color: var(--black-500);
-  --accent-color: var(--blueberry-700);
   --header-bg-color: var(--blueberry-300);
   --header-fg-color: var(--silver-100);
-  --secondary-bg-color: #f5f5f5; // Instead of making up a Silver 200
-  --secondary-fg-color: var(--black-300);
+  @include light-root;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/_sass/_featured.scss b/_sass/_featured.scss
index 1567fc4..62d23de 100644
--- a/_sass/_featured.scss
+++ b/_sass/_featured.scss
@@ -60,18 +60,11 @@
   }
 
   .featured-image {
-    background-color: var(--silver-100);
+    @include light-image;
     background-origin: border-box;
     background-position: 50%;
     background-size: cover;
-    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 0.25rem;
-    box-shadow:
-      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
-      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
-      0 1px 3px rgba(0, 0, 0, 0.05),
-      0 1px 2px rgba(0, 0, 0, 0.1);
     display: inline-block;
     height: 320px;
     margin-bottom: 1rem;
diff --git a/_sass/_figures.scss b/_sass/_figures.scss
index 5a3e14a..9df83f8 100644
--- a/_sass/_figures.scss
+++ b/_sass/_figures.scss
@@ -126,10 +126,10 @@ figure {
 
   &.card {
     img {
-      background-color: var(--silver-100);
       box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.05),
         0 3px 3px rgba(0, 0, 0, 0.22);
+      @include light-figure;
 
       @media (prefers-color-scheme: dark) {
         @include dark-figure;
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
index 74f6967..9c9b458 100644
--- a/_sass/_mixins.scss
+++ b/_sass/_mixins.scss
@@ -6,6 +6,14 @@
   --secondary-fg-color: var(--silver-300);
 }
 
+@mixin light-root {
+  --bg-color: white;
+  --fg-color: var(--black-500);
+  --accent-color: var(--blueberry-700);
+  --secondary-bg-color: #f5f5f5;
+  --secondary-fg-color: var(--black-300);
+}
+
 @mixin dark-avatar-shadow {
   box-shadow:
     inset 0 0 0 1px black,
@@ -16,15 +24,36 @@
     0 1px 2px 0 rgba(0, 0, 0, 0.48);
 }
 
+@mixin light-avatar-shadow {
+  box-shadow:
+    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
+    inset 0 2px 0 0 rgba(255, 255, 255, 0.45),
+    inset 0 -2px 0 0 rgba(255, 255, 255, 0.15),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 1px 2px 0 rgba(0, 0, 0, 0.24);
+}
+
 @mixin dark-image {
   background-color: var(--silver-900);
-    border: 1px solid black;
-    box-shadow:
-      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
-      inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
-      0 1px 3px rgba(0, 0, 0, 0.1),
-      0 1px 2px rgba(0, 0, 0, 0.2);
+  border: 1px solid black;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin light-image {
+  background-color: var(--silver-100);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
+    0 1px 3px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 @mixin dark-highlight {
@@ -65,6 +94,48 @@
   }
 }
 
+@mixin light-highlight {
+  background-color: var(--solarized-base3);
+  color: var(--solarized-base01);
+
+  .gl {
+    background-color: var(--solarized-base2);
+  }
+
+  .c,
+  .c1,
+  .cm,
+  .sb {
+    color: var(--solarized-base1);
+  }
+
+  .err,
+  .g,
+  .ge,
+  .go,
+  .gp,
+  .gs,
+  .gt,
+  .l,
+  .ld,
+  .n,
+  .na,
+  .nl,
+  .nn,
+  .nx,
+  .p,
+  .py,
+  .sd,
+  .sh,
+  .w {
+    color: var(--solarized-base01);
+  }
+}
+
 @mixin dark-figure {
   background-color: var(--silver-900);
 }
+
+@mixin light-figure {
+  background-color: var(--silver-100);
+}
diff --git a/_sass/_nightmode.scss b/_sass/_nightmode.scss
index 1c7147e..0dd3bcd 100644
--- a/_sass/_nightmode.scss
+++ b/_sass/_nightmode.scss
@@ -1,10 +1,13 @@
 :root {
-  .night-mode {
+  .dark-mode {
     @include dark-root;
   }
+  .light-mode {
+    @include light-root;
+  }
 }
 
-.night-mode {
+.dark-mode {
   .byline {
     .avatar {
       &::before {
@@ -28,3 +31,28 @@
     }
   }
 }
+
+.light-mode {
+  .byline {
+    .avatar {
+      &::before {
+        @include light-avatar-shadow;
+      }
+    }
+  }
+  .featured {
+    .featured-image {
+      @include light-image;
+    }
+  }
+  .highlight {
+    @include light-highlight;
+  }
+  figure {
+    &.card {
+      img {
+        @include light-figure;
+      }
+    }
+  }
+}