feat: dark theme

v4/README.md

@@ -943,6 +943,17 @@ $base-color: {{ .Param "baseColor" | default "#1d1f38" }};
   baseColor = "#ff8080"
 ```
 
+Switching light/dark theme is supported.
+
+Colors for dark theme with a prefix `dk-` are stored in [`assets/sass/dk-theme.scss`](assets/sass/dk-theme.scss).
+You can customize them via the same way with light (default) colors.
+
+*Note* that the dark theme can be disabled:
+```toml
+[params]
+    darkmode = false
+```
+
 ### CSS and JS modules
 
 This theme supports hot-swappable CSS and JavaScript extensions, which can be specified using the `css_modules`

v4/assets/js/dark-toggle.js

@@ -0,0 +1,35 @@
+const dkToggle = document.getElementById("darkToggleLogo");
+const darkTheme = document.getElementById("darkTheme");
+const PCS = window.matchMedia("(prefers-color-scheme: dark)");
+
+dkToggle.addEventListener("click", () => {
+  if (dkToggle.className === "fa fa-sun") {
+    setTheme("dark");
+  }
+  else {
+    setTheme("light");
+  }
+});
+
+function setTheme(mode) {
+  if (mode === "dark") {
+    darkTheme.disabled = false;
+    dkToggle.className = "fa fa-moon";
+  } else {
+    darkTheme.disabled = true;
+    dkToggle.className = "fa fa-sun";
+  }
+}
+
+const listener = (event) => {
+  if (event.matches) {
+    setTheme("dark");
+  }
+  else {
+    setTheme("light");
+  }
+};
+
+// PCS.addEventListerner("change", listener);
+listener(PCS);
+

v4/assets/sass/_dk-articles.scss

@@ -0,0 +1,148 @@
+article {
+   background-color: $dk-article-background-color;
+    // :before and :after to generate the < pointer
+    &:before {
+       border-right-color: #ddd;
+   }
+
+    &:after {
+       border-right-color: #fff;
+   }
+
+    .content {
+        h1 {
+            a {
+                &:hover {
+                    color: $dk-highlight-color;
+                }
+            }
+        }
+
+        .meta {
+           color: $dk-meta-text-color;
+            border-bottom: 3px double $dk-meta-border-color;
+
+            a {
+                color: inherit;
+                font-style: normal;
+
+                &:hover {
+                    color: $dk-highlight-color;
+                }
+            }
+
+        }
+
+        a {
+            color: $dk-highlight-color;
+       }
+
+        a.more {
+            color: $dk-highlight-color;
+       }
+
+        .archive-list {
+            ul {
+                li {
+                    border-bottom: 1px solid #eee;
+                }
+                a {
+                    color: $dk-highlight-color;
+
+                    span {
+                        color: $dk-meta-text-color;
+                    }
+
+                    &:hover {
+                        color: $dk-base-color;
+                    }
+                }
+            }
+        }
+
+        blockquote {
+            background-color: lighten($dk-article-background-color,8);
+            border-left: 0.5em solid #ededed;
+       }
+
+        #TableOfContents {
+            li {
+                color: $dk-text-color;
+                a {
+                    &:hover {
+                        color: $dk-highlight-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .footer {
+        // background: transparentize($dk-base-color, 0.2);
+        background: transparentize($base-color, 0.2);
+
+        .tags {
+            .links {
+                a:not(:last-child):after {
+                    color: $dk-text-color !important;
+                }
+            }
+        }
+
+        .languages {
+            .links {
+                a:not(:last-child):after {
+                    color: $dk-text-color !important;
+                }
+            }
+        }
+    }
+
+    // Quotes
+    &.quote {
+        background-color: $dk-special-color;
+        &:after {
+            border-right-color: $dk-special-color;
+        }
+        blockquote {
+            color: $dk-text-color;
+       }
+    }
+
+    // Gallery
+    &.gallery {
+        .flexslider {
+           .flex-direction-nav a {
+               &:before {
+                    color: rgba(255, 255, 255, 0.9);
+                    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+                }
+            }
+        }
+    }
+
+    // Link
+    &.link {
+        background-color: $dk-special-color;
+        &:after {
+            border-right-color: $dk-special-color;
+        }
+        &:hover {
+            background-color: $dk-highlight-color;
+            color: #fff;
+            a {
+              color: $dk-bubble-background-color;
+            }
+
+            &:after {
+                border-right-color: $dk-highlight-color;
+            }
+        }
+
+        // @include featuredImage();
+
+        a {
+            color: $dk-text-color;
+       }
+    }
+  }

v4/assets/sass/_dk-bilberry-hugo-theme.scss

@@ -0,0 +1,38 @@
+@import "_dk-no-js";
+.bilberry-hugo-theme {
+    background-color: $dk-page-background-color;
+    color: $dk-text-color;
+    a {
+        color: inherit;
+
+        &:hover {
+            color: $dk-highlight-color;
+        }
+    }
+
+    .highlight {
+        pre {
+            code {
+                background-color: inherit;
+            }
+            .copy-button {
+                background: $dk-page-background-color;
+            }
+        }
+    }
+
+    #back-to-top-button {
+        color: $dk-base-color;
+        background-color: $dk-bubble-color;
+    }
+
+    #back-to-top-button:hover {
+        background-color: $dk-highlight-color;
+    }
+    @import "dk-topnav";
+    @import "dk-header";
+    @import "dk-main";
+    @import "dk-articles";
+    @import "dk-pagination";
+    @import "dk-footer";
+}

v4/assets/sass/_dk-footer.scss

@@ -0,0 +1,49 @@
+footer {
+    border-top: 3px solid $dk-footer-border-color;
+    border-bottom: 3px solid $dk-footer-border-color;
+    background-color: $dk-footer-background-color;
+
+    .container {
+        strong {
+            color: $dk-footer-headline-color;
+        }
+        ul {
+            a {
+                color: $dk-highlight-color;
+                &:hover {
+                    // color: lighten($dk-base-color, 70);
+                    color: lighten($dk-page-background-color, 70);
+                }
+            }
+        }
+
+        .right {
+            .external-profiles {
+                a {
+                    color: $dk-footer-headline-color;
+                    &:hover {
+                        color: $dk-highlight-color;
+                    }
+                }
+           }
+
+            .languages {
+                a {
+                    color: $dk-highlight-color;
+                    &:hover {
+                        color: $dk-text-color;
+                    }
+                    &:not(:last-child):after {
+                        color: $dk-text-color !important;
+                    }
+                }
+            }
+       }
+    }
+}
+
+.credits {
+    .container {
+        color: $dk-bubble-color;
+   }
+}

v4/assets/sass/_dk-header.scss

@@ -0,0 +1,37 @@
+header {
+    background-color: $dk-base-color;
+    color: $dk-header-text-color;
+    .container {
+        &:after {
+           background: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    .logo {
+        background-color: $dk-logo-color;
+        border: 5px $dk-logo-color solid;
+        color: $dk-logo-color;
+       .overlay {
+           background-color: $dk-bubble-hover-color;
+       }
+    }
+
+    .switchbox {
+        .darkToggleBox {
+          background-color: $dk-special-color;
+            button {
+              color: $dk-header-text-color;
+            }
+        }
+        .languages {
+          background-color: $dk-special-color;
+          a {
+            color: $dk-header-text-color;
+            }
+          }
+        }
+
+    .toggler {
+       background: $dk-special-color;
+   }
+}

v4/assets/sass/_dk-main.scss

@@ -0,0 +1,21 @@
+.main {
+    &:before {
+       background: $dk-bubble-color;
+    }
+
+    &:after {
+       background: $dk-bubble-color;
+    }
+
+    .article-wrapper {
+        .bubble {
+           background-color: $dk-bubble-background-color;
+            border: 3px solid $dk-bubble-color;
+           color: $dk-bubble-color;
+            &:hover {
+                background-color: $dk-highlight-color;
+                color: $dk-bubble-background-color;
+            }
+        }
+    }
+}

v4/assets/sass/_dk-no-js.scss

@@ -0,0 +1,47 @@
+.js {
+    .no-js-message {
+        display: none;
+    }
+}
+
+.no-js {
+
+    .no-js-hidden {
+        display: none;
+    }
+
+    .no-js-message {
+        display: block;
+        padding: 2em;
+        background-color: $dk-base-color;
+        color: $dk-header-text-color;
+        font-size: 0.9em;
+        font-style: italic;
+        text-align: center;
+
+        &:first-line {
+            font-weight: bold;
+        }
+    }
+
+    nav {
+        display: block !important;
+    }
+
+    .search,
+    .toggler {
+        display: none !important;
+    }
+
+    pre code {
+        background: inherit;
+        color: inherit;
+    }
+
+    .responsive-video {
+        &.youtube, &.vimeo, &.peertube {
+                height: auto !important;
+                padding: 0 !important;
+            }
+    }
+}