#151, move SCSS vars to CSS vars, implement dark and light modes by browser preference

README.md

@@ -139,6 +139,10 @@ enableGitInfo = true
 disableKinds = ['taxonomy', 'taxonomyTerm']
   
 [params]
+  # (Optional, default light) Sets color theme: light, dark or auto.
+  # Theme 'auto' switches between dark and light modes based on browser/os preferences
+  BookTheme = 'light'
+
   # (Optional, default true) Controls table of contents visibility on right side of pages.
   # Start and end levels can be controlled with markup.tableOfContents setting.
   # You can also specify this parameter per page in front matter.
@@ -252,11 +256,10 @@ There are a few features implemented as plugable `scss` styles. Usually these ar
 
 | Plugin                            | Description                                                 |
 | --------------------------------- | ----------------------------------------------------------- |
-| `assets/plugins/_dark.scss`       | Switches site to dark mode                                  |
 | `assets/plugins/_numbered.scss`   | Makes headings in markdown numbered, e.g. `1.1`, `1.2`      |
 | `assets/plugins/_scrollbars.scss` | Overrides scrollbar styles to look similar across platforms |
 
-To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root. One exception is `_dark.scss` which contains variables only and should be added to `assets/_variables.scss`.
+To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root.
 
 ### Hugo Internal Templates
 

assets/_defaults.scss

@@ -11,24 +11,6 @@ $font-size-16: 1rem !default;
 
 $border-radius: $padding-4 !default;
 
-// Grayscale
-$white: #ffffff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$color-link: #05b !default;
-$color-visited-link: #8440f1 !default;
-
-$body-background: white !default;
-$body-font-color: $black !default;
 $body-font-weight: normal !default;
 
 $body-min-width: 20rem !default;
@@ -40,11 +22,45 @@ $toc-width: 16rem !default;
 
 $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
 
-// Hint colors
 $hint-colors: (
   info: #6bf,
   warning: #fd6,
-  danger: #f66
+  danger: #f66,
 ) !default;
 
-$icon-filter: none !default;
+// Themes
+@mixin theme-light {
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-500: #adb5bd;
+
+  --color-link: #0055bb;
+  --color-visited-link: #8440f1;
+
+  --body-background: white;
+  --body-font-color: black;
+
+  --icon-filter: none;
+
+  --hint-color-info: #6bf;
+  --hint-color-warning: #fd6;
+  --hint-color-danger: #f66;
+}
+
+@mixin theme-dark {
+  --gray-100: rgba(255, 255, 255, 0.1);
+  --gray-200: rgba(255, 255, 255, 0.2);
+  --gray-500: rgba(255, 255, 255, 0.5);
+
+  --color-link: #84b2ff;
+  --color-visited-link: #b88dff;
+
+  --body-background: #343a40;
+  --body-font-color: #e9ecef;
+
+  --icon-filter: brightness(0) invert(1);
+
+  --hint-color-info: #6bf;
+  --hint-color-warning: #fd6;
+  --hint-color-danger: #f66;
+}

assets/_main.scss

@@ -6,8 +6,8 @@ html {
 
 body {
   min-width: $body-min-width;
-  color: $body-font-color;
+  color: var(--body-font-color);
-  background: $body-background;
+  background: var(--body-background);
 
   letter-spacing: 0.33px;
   font-weight: $body-font-weight;
@@ -31,7 +31,7 @@ h5 {
 
 a {
   text-decoration: none;
-  color: $color-link;
+  color: var(--color-link);
 }
 
 img {
@@ -81,7 +81,7 @@ ul.pagination {
 }
 
 .book-icon {
-  filter: $icon-filter;
+  filter: var(--icon-filter);
 }
 
 .book-brand {
@@ -102,7 +102,7 @@ ul.pagination {
   nav {
     width: $menu-width;
     padding: $padding-16;
-    background: $body-background;
+    background: var(--body-background);
 
     @include fixed;
   }
@@ -113,7 +113,7 @@ ul.pagination {
   }
 
   a.active {
-    color: $color-link;
+    color: var(--color-link);
   }
 
   a.collapsed {
@@ -174,8 +174,8 @@ ul.pagination {
     border: 0;
     border-radius: $border-radius;
 
-    background: $gray-100;
+    background: var(--gray-100);
-    color: $body-font-color;
+    color: var(--body-font-color);
 
     &:required + .book-search-spinner {
       display: block;
@@ -192,7 +192,7 @@ ul.pagination {
     height: $padding-16;
 
     border: $padding-1 solid transparent;
-    border-top-color: $body-font-color;
+    border-top-color: var(--body-font-color);
     border-radius: 50%;
 
     @include spin(1s);
@@ -271,7 +271,7 @@ ul.pagination {
     left: 0;
     padding: $padding-8 0;
 
-    background: $body-background;
+    background: var(--body-background);
     box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
 
     li img {

assets/_markdown.scss

@@ -21,12 +21,13 @@
 
     a.anchor {
       opacity: 0;
-      font-size: .75em;
+      font-size: 0.75em;
       vertical-align: middle;
       text-decoration: none;
     }
 
-    &:hover a.anchor, a.anchor:focus {
+    &:hover a.anchor,
+    a.anchor:focus {
       opacity: initial;
     }
   }
@@ -58,7 +59,7 @@
       text-decoration: underline;
     }
     &:visited {
-      color: $color-visited-link;
+      color: var(--color-visited-link);
     }
   }
 
@@ -68,14 +69,14 @@
 
   code {
     padding: 0 $padding-4;
-    background: $gray-200;
+    background: var(--gray-200);
     border-radius: $border-radius;
     font-size: 0.875em;
   }
 
   pre {
     padding: $padding-16;
-    background: $gray-100;
+    background: var(--gray-100);
     border-radius: $border-radius;
     overflow-x: auto;
 
@@ -89,7 +90,7 @@
     margin: $padding-16 0;
     padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
 
-    border-inline-start: $padding-4 solid $gray-200;
+    border-inline-start: $padding-4 solid var(--gray-200);
     border-radius: $border-radius;
 
     :first-child {
@@ -111,18 +112,18 @@
     tr th,
     tr td {
       padding: $padding-8 $padding-16;
-      border: $padding-1 solid $gray-200;
+      border: $padding-1 solid var(--gray-200);
     }
 
     tr:nth-child(2n) {
-      background: $gray-100;
+      background: var(--gray-100);
     }
   }
 
   hr {
     height: $padding-1;
     border: none;
-    background: $gray-200;
+    background: var(--gray-200);
   }
 
   ul,
@@ -156,7 +157,7 @@
 
   details {
     padding: $padding-16;
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     summary {

assets/_shortcodes.scss

@@ -4,13 +4,13 @@
     margin-top: $padding-16;
     margin-bottom: $padding-16;
 
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     overflow: hidden;
 
     .book-expand-head {
-      background: $gray-100;
+      background: var(--gray-100);
       padding: $padding-8 $padding-16;
       cursor: pointer;
     }
@@ -30,7 +30,7 @@
     margin-top: $padding-16;
     margin-bottom: $padding-16;
 
-    border: $padding-1 solid $gray-200;
+    border: $padding-1 solid var(--gray-200);
     border-radius: $border-radius;
 
     overflow: hidden;
@@ -48,19 +48,19 @@
     .book-tabs-content {
       order: 999; //Move content blocks to the end
       width: 100%;
-      border-top: $padding-1 solid $gray-100;
+      border-top: $padding-1 solid var(--gray-100);
       padding: $padding-16;
       display: none;
     }
 
     input[type="radio"]:checked + label {
-      border-bottom: $padding-1 solid $color-link;
+      border-bottom: $padding-1 solid var(--color-link);
     }
     input[type="radio"]:checked + label + .book-tabs-content {
       display: block;
     }
     input[type="radio"]:focus + label {
-      @include outline
+      @include outline;
     }
   }
 
@@ -80,10 +80,10 @@
   a.book-btn {
     display: inline-block;
     font-size: $font-size-14;
-    color: $color-link;
+    color: var(--color-link);
     line-height: $padding-16 * 2;
     padding: 0 $padding-16;
-    border: $padding-1 solid $color-link;
+    border: $padding-1 solid var(--color-link);
     border-radius: $border-radius;
     cursor: pointer;
 

assets/book.scss

@@ -1,5 +1,6 @@
 @import "defaults";
 @import "variables";
+@import "themes/{{ default "auto" .Site.Params.BookTheme }}";
 
 @import "normalize";
 @import "utils";

assets/plugins/_dark.scss

@@ -1,10 +0,0 @@
-$gray-100: rgba(255, 255, 255, 0.1);
-$gray-200: rgba(255, 255, 255, 0.2);
-
-$body-background: #343a40;
-$body-font-color: #e9ecef;
-
-$color-link: #84b2ff;
-$color-visited-link: #b88dff;
-
-$icon-filter: brightness(0) invert(1);

assets/plugins/_scrollbars.scss

@@ -12,15 +12,15 @@
 }
 
 :hover::-webkit-scrollbar-thumb {
-  background: $gray-500;
+  background: var(--gray-500);
 }
 
 // MS
 body {
-  -ms-overflow-style: -ms-autohiding-scrollbar
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 // Future
 .book-menu nav {
-  scrollbar-color: transparent $gray-500;
+  scrollbar-color: transparent var(--gray-500);
 }

assets/themes/_auto.scss

@@ -0,0 +1,9 @@
+:root {
+  @include theme-light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include theme-dark;
+  }
+}

assets/themes/_dark.scss

@@ -0,0 +1,3 @@
+:root {
+  @include theme-dark;
+}

assets/themes/_light.scss

@@ -0,0 +1,3 @@
+:root {
+  @include theme-light;
+}

exampleSite/config.toml

@@ -49,6 +49,10 @@ enableGitInfo = true
   weight = 20
 
 [params]
+  # (Optional, default light) Sets color theme: light, dark or auto.
+  # Theme 'auto' switches between dark and light modes based on browser/os preferences
+  BookTheme = 'light'
+
   # (Optional, default true) Controls table of contents visibility on right side of pages.
   # Start and end levels can be controlled with markup.tableOfContents setting.
   # You can also specify this parameter per page in front matter.

exampleSite/config.yaml

@@ -45,6 +45,10 @@ menu:
       weight: 20
 
 params:
+  # (Optional, default light) Sets color theme: light, dark or auto.
+  # Theme 'auto' switches between dark and light modes based on browser/os preferences
+  BookTheme: "light"
+
   # (Optional, default true) Controls table of contents visibility on right side of pages.
   # Start and end levels can be controlled with markup.tableOfContents setting.
   # You can also specify this parameter per page in front matter.

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}
+{"Target":"book.min.4194921b4c7ff04cd7c5b17f3ac51f141158e219fa9deb989de5e50f624ca88f.css","MediaType":"text/css","Data":{"Integrity":"sha256-QZSSG0x/8EzXxbF/OsUfFBFY4hn6neuYneXlD2JMqI8="}}