feat: dark theme

v4/README.md

@@ -304,6 +304,13 @@ this will only work when the `permanentTopNav` is also set to `true`.
 
 Please note that the top navigation bar is minimized by default on mobile devices.
 
+### Light/Dark Theme Mode
+Switching between light and dark theme mode can be enabled by setting the `enableLightDarkMode` parameter to `true`:
+```toml
+[params]
+  enableLightDarkThemeMode = true
+```
+
 ### Algolia Search
 
 Bilberry theme includes built-in content search via [Algolia SAAS](https://www.algolia.com/).

v4/assets/js/theme.js

@@ -95,4 +95,41 @@ $(document).ready(function () {
         $('html, body').animate({scrollTop:0}, '300');
     });
 
+    // Light dark theme mode switcher
+    const lightDarkToggle = document.getElementById("light-dark-toggle");
+    const lightThemeCss = document.getElementById("light-theme-css");
+    const darkThemeCss = document.getElementById("dark-theme-css");
+    const darkStore = localStorage.getItem("dark-store");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+    // Detect preference in last visit
+    if (darkStore === "dark") {
+        setThemeMode("dark");
+    } else if (darkStore === "light") {
+        setThemeMode("light");
+    } else if (prefersDark.matches) {
+        setThemeMode("dark");
+    }
+
+    lightDarkToggle.addEventListener("click", () => {
+        if (lightDarkToggle.className === "fa fa-moon") {
+            setThemeMode("light");
+        } else {
+            setThemeMode("dark");
+        }
+    });
+
+    function setThemeMode(mode) {
+        if (mode === "dark") {
+            lightThemeCss.disabled = true;
+            darkThemeCss.disabled = false;
+            lightDarkToggle.className = "fa fa-moon";
+            localStorage.setItem("dark-store", mode);
+        } else {
+            lightThemeCss.disabled = false;
+            darkThemeCss.disabled = true;
+            lightDarkToggle.className = "fa fa-sun";
+            localStorage.setItem("dark-store", mode);
+        }
+    }
 });

v4/assets/sass/_articles.scss

@@ -11,7 +11,7 @@ article {
         content: "";
         display: block;
         border: 11px solid transparent;
-        border-right-color: #ddd;
+        border-right-color: $con-line-colorB;
         position: absolute;
         top: 49px;
         left: -22px;
@@ -21,7 +21,7 @@ article {
         content: "";
         display: block;
         border: 10px solid transparent;
-        border-right-color: #fff;
+        border-right-color: #con-line-colorA;
         position: absolute;
         top: 50px;
         left: -20px;
@@ -151,7 +151,7 @@ article {
                 margin-top: 1.25em;
 
                 li {
-                    border-bottom: 1px solid #eee;
+                    border-bottom: 1px solid $footer-border-color;
                     padding-right: 10px;
                 }
 
@@ -170,19 +170,23 @@ article {
 
                     &:hover {
                         left: 10px;
-                        color: $base-color;
+                        color: $text-color;
                         text-decoration: none;
                     }
                 }
             }
         }
+        code {
+            background-color: rgba(150,150,160,0.2);
+            border: none;
+        }
 
         blockquote {
-            background-color: #f6f6f6;
+            background-color: $blockquote-background-color;
             font-family: $headline-font;
             margin: 1.5em 0;
             padding: 2em;
-            border-left: 0.5em solid #ededed;
+            border-left: 0.5em solid rgba(invert($blockquote-background-color),0.2);
             font-size: 1.05em;
 
             cite {
@@ -226,15 +230,15 @@ article {
 
             li {
                 display: inherit;
-                color: $text-color;
+                color: $highlight-color;
 
                 a {
                     color: inherit;
                     text-align: left;
                     padding: 0;
 
                     &:hover {
-                        color: $highlight-color;
+                        color: $text-color;
                         background-color: transparent;
                     }
                 }
@@ -341,7 +345,7 @@ article {
             padding: 5.5%;
             margin: 0;
             text-align: center;
-            color: #fff;
+            color: $header-text-color;
             background: none;
             font-size: 1.2em;
             position: relative;
@@ -442,7 +446,7 @@ article {
         @include featuredImage();
 
         a {
-            color: #fff;
+            color: $header-text-color;
             text-decoration: none;
             display: flex;
             flex-direction: column;
@@ -478,4 +482,5 @@ article {
 #comments-container {
     margin-left: 100px;
     padding-bottom: 1.2em;
+    color: #fff;
 }

v4/assets/sass/_bilberry-hugo-theme.scss

@@ -135,6 +135,15 @@
             list-style: none;
         }
     }
+    .flex-control-paging li a {
+        background: rgba($text-color,0.5);
+    }
+    .flex-control-paging li a:hover {
+        background: rgba($text-color,0.7);
+    }
+    .flex-control-paging li a.flex-active {
+        background: rgba($text-color,0.9);
+    }
 
     .fa-youtube-adblock-proof:before {
         content: "\F167";

v4/assets/sass/_footer.scss

@@ -24,14 +24,23 @@ footer {
             text-transform: uppercase;
             color: $footer-headline-color;
             padding-bottom: 0.75em;
+            display: block;
+        }
+
+        a {
+            strong{
+                &:hover {
+                    color: $highlight-color;
+                }
+            }
         }
 
         ul {
             list-style: none;
             margin-top: 1.25em;
 
             li {
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid $footer-border-color;
                 padding-right: 10px;
             }
 
@@ -45,7 +54,7 @@ footer {
 
                 &:hover {
                     left: 10px;
-                    color: $base-color;
+                    color: $text-color;
                 }
             }
         }
@@ -113,10 +122,6 @@ footer {
                 width: 100%;
                 margin-left: 0;
             }
-
-            strong {
-                display: block;
-            }
         }
     }
 }

v4/assets/sass/_header.scss

@@ -75,27 +75,50 @@ header {
 
     .titles {
         margin-left: 3rem;
+        margin-top: 3em;
+        margin-bottom: 3em;
 
         h3 {
             margin-bottom: 0;
             font-size: 3.25rem;
         }
     }
 
-    .languages {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        background-color: $special-color;
-        padding: 0.5em 1em;
-        display: flex;
-        border-top-right-radius: 4px;
-        border-top-left-radius: 4px;
-
-        a {
+    .selectors {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      display: flex;
+        .light-dark-mode {
+          background-color: $special-color;
+          margin-right: 1em;
+          display: flex;
+          border-top-right-radius: 4px;
+          border-top-left-radius: 4px;
+              button {
+                  margin-top: 0;
+                  margin-bottom: 0;
+                  padding: 0.375em 0.75em;
+                  font-size: 1.125em;
+                  min-width: 2em;
+                  border: transparent;
+                  color: $header-text-color;
+                  &:hover {
+                      color: $highlight-color;
+                  }
+              }
+        }
+        .languages {
+          background-color: $special-color;
+          padding: 0.5em 1em;
+          display: flex;
+          border-top-right-radius: 4px;
+          border-top-left-radius: 4px;
+
+          a {
             text-transform: uppercase;
             font-size: 0.8em;
-            color: $page-background-color;
+            color: $header-text-color;
             letter-spacing: 0.1em;
 
             &.active {
@@ -106,8 +129,12 @@ header {
                 content: " | ";
                 color: inherit;
             }
+            &:hover {
+                color: $highlight-color;
+            }
+          }
         }
-    }
+      }
 
     .toggler {
         position: absolute;
@@ -123,5 +150,8 @@ header {
         &.permanentTopNav {
             display: none;
         }
+        &:hover {
+            color: $highlight-color;
+        }
     }
 }

v4/assets/sass/_main.scss

@@ -10,7 +10,7 @@
         bottom: 50px;
         width: 2px;
         height: 100%;
-        background: rgba(0, 0, 0, 0.05);
+        background: $con-line-colorA;
         z-index: 1;
     }
 
@@ -22,7 +22,7 @@
         bottom: 32px;
         height: 20px;
         width: 20px;
-        background: #ddd;
+        background: $con-line-colorB;
         border-radius: 999px;
         z-index: 10;
     }

v4/assets/sass/_pagination.scss

@@ -13,8 +13,8 @@
         padding: 0.8em 1.4em;
         text-decoration: none;
         font-weight: bold;
-        background-color: #b4b4b4;
-        color: #fff;
+        background-color: $article-background-color;
+        color: $text-color;
 
         &:hover {
             background-color: $highlight-color;

v4/assets/sass/_topnav.scss

@@ -119,12 +119,17 @@ nav {
                     font-size: 0.75em;
                     text-align: right;
                     padding: 0.5em 1em;
-                    background-color: $page-background-color;
+                    border-radius: 0.5em;
+                    background-color: rgba($page-background-color,0.6);
 
                     img {
                         width: 3.5em;
                         position: relative;
-                        top: 0.1em;
+                        // top: 0.1em;
+                        display: inline-block;
+                        vertical-align: middle;
+                        padding: 0.5em;
+                        background: rgba(#fff,0.5);
                     }
                 }
             }
@@ -138,7 +143,7 @@ nav {
 
                     &:hover,
                     &:focus {
-                        background-color: darken($algolia-search-box-background-color, 2);
+                        background-color: darken($algolia-search-box-background-color, 5);
                     }
 
                     .title {
@@ -197,8 +202,8 @@ nav {
         }
 
         .aa-dropdown-menu {
-            background-color: #fff;
-            border: 1px solid rgba($algolia-border-color, 0.6);
+            background-color: $algolia-search-box-background-color;
+            border: 1px solid rgba($algolia-border-color, 0.2);
             min-width: 300px;
             margin-top: 10px;
             box-sizing: border-box;
@@ -210,12 +215,12 @@ nav {
         }
 
         .aa-suggestion + .aa-suggestion {
-            border-top: 1px solid rgba($algolia-border-color, 0.6);
+            border-top: 1px solid rgba($algolia-border-color, 0.2);
         }
 
         .aa-suggestions-category {
-            border-bottom: 1px solid rgba($algolia-border-color, 0.6);
-            border-top: 1px solid rgba($algolia-border-color, 0.6);
+            border-bottom: 1px solid rgba($algolia-border-color, 0.2);
+            border-top: 1px solid rgba($algolia-border-color, 0.2);
             padding: 6px 12px;
         }
     }