Replace dark theme with Nord, introduce more color themes as scss plugin, experimental for now

README.md

@@ -129,7 +129,7 @@ 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
+  # Theme 'auto' switches between dark and light modes based on browser/os preferences. With plugins/themes added there are more themes.
   BookTheme = 'light'
 
   # (Optional, default true) Controls table of contents visibility on right side of pages.
@@ -265,6 +265,7 @@ There are a few features implemented as pluggable `scss` styles. Usually these a
 | --------------------------------- | ----------------------------------------------------------- |
 | `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 |
+| `assets/plugins/_themes.scss`     | Experimental: Extra color themes                            |
 
 To enable plugins, add `@import "plugins/{name}";` to `assets/_custom.scss` in your website root.
 

assets/_custom.scss

@@ -3,6 +3,7 @@
   It could be plugins:
     @import "plugins/numbered";
     @import "plugins/scrollbars";
+    @import "plugins/themes";
   Or custom styles:
     body { background: white; }
   Or even theme mixins:

assets/_defaults.scss

@@ -25,8 +25,14 @@ $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
   --border-radius: 0.25rem;
 }
 
+// Convenience mixing to declare a color and a transparent tint
+@mixin accent($name, $color, $tint: 0.1) {
+  --color-accent-#{$name}: #{$color};
+  --color-accent-#{$name}-tint: #{rgba($color, $tint)};
+}
+
 // Themes
-@mixin theme-light {
+@mixin theme-light { // made to look like 'browser default'
   --body-background: white;
   --body-background-tint: none;
   --body-font-color: black;
@@ -53,32 +59,32 @@ $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
   @include accent("danger", #d84747);
 }
 
-@mixin theme-dark {
+@mixin theme-dark { // based on https://www.nordtheme.com/
-  --body-background: #343a40;
+  --body-background: #2e3440;
   --body-background-tint: none;
 
-  --body-font-color: #e9ecef;
+  --body-font-color: #eceff4;
 
-  --color-link: #84b2ff;
+  --color-link: #81a1c1;
-  --color-visited-link: #b88dff;
+  --color-visited-link: #81a1c1;
 
   --icon-filter: brightness(0) invert(1);
 
-  --gray-100: #494e54;
+  --gray-100: #3b4252;
-  --gray-200: #5c6165;
+  --gray-200: #434c5e;
-  --gray-500: #999d9f;
+  --gray-500: #d8dee9;
 
-  @include accent("default", #64748b);
+  @include accent("default", #81a1c1);
-  @include accent("note", #4486dd);
+  @include accent("note", #5e81ac);
-  @include accent("tip", #3bad3b);
+  @include accent("tip", #a3be8c);
-  @include accent("important", #8144dd);
+  @include accent("important", #b48ead);
-  @include accent("warning", #f59e42);
+  @include accent("warning", #d08770);
-  @include accent("caution", #d84747);
+  @include accent("caution", #bf616a);
 
   // Fallback for {{< hint >}} shortcodes
-  @include accent("info", #4486dd);
+  @include accent("info", #5e81ac);
-  @include accent("success", #3bad3b);
+  @include accent("success", #a3be8c);
-  @include accent("danger", #d84747);
+  @include accent("danger", #bf616a);
 }
 
 @mixin theme-auto {
@@ -88,9 +94,3 @@ $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
     @include theme-dark;
   }
 }
-
-// Convenience mixing to declare a color and a transparent tint
-@mixin accent($name, $color, $tint: 0.1) {
-  --color-accent-#{$name}: #{$color};
-  --color-accent-#{$name}-tint: #{rgba($color, $tint)};
-}

assets/plugins/_themes.scss

@@ -0,0 +1,191 @@
+@mixin theme-contrast-light {
+  --body-background: #ffffff;
+  --body-background-tint: none;
+
+  --body-font-color: #000000;
+
+  --color-link: #0055ee;
+  --color-visited-link: #551a8b;
+
+  --icon-filter: none;
+
+  --gray-100: #f0f0f0;
+  --gray-200: #d0d0d0;
+  --gray-500: #707070;
+
+  @include accent("default", #000000);
+  @include accent("note", #0066cc);
+  @include accent("tip", #008000);
+  @include accent("important", #800080);
+  @include accent("warning", #ff8c00);
+  @include accent("caution", #cc0000);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #0066cc);
+  @include accent("success", #008000);
+  @include accent("danger", #cc0000);
+}
+
+@mixin theme-contrast-dark {
+  --body-background: #000000;
+  --body-background-tint: none;
+
+  --body-font-color: #ffffff;
+
+  --color-link: #00ffff;
+  --color-visited-link: #ff00ff;
+
+  --icon-filter: brightness(0) invert(1);
+
+  --gray-100: #1a1a1a;
+  --gray-200: #333333;
+  --gray-500: #a0a0a0;
+
+  @include accent("default", #ffffff);
+  @include accent("note", #00ccff);
+  @include accent("tip", #00ff00);
+  @include accent("important", #ff00ff);
+  @include accent("warning", #ffaa00);
+  @include accent("caution", #ff0000);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #00ccff);
+  @include accent("success", #00ff00);
+  @include accent("danger", #ff0000);
+}
+
+@mixin theme-contrast-auto {
+  @include theme-contrast-light;
+
+  @media (prefers-color-scheme: dark) {
+    @include theme-contrast-dark;
+  }
+}
+
+@mixin theme-catppuccin-light { // https://github.com/catppuccin/catppuccin @latte
+  --body-background: #eff1f5;
+  --body-background-tint: none;
+
+  --body-font-color: #4c4f69;
+
+  --color-link: #1e66f5;
+  --color-visited-link: #8839ef;
+
+  --icon-filter: none;
+
+  --gray-100: #e6e9ef;
+  --gray-200: #ccd0da;
+  --gray-500: #9ca0b0;
+
+  @include accent("default", #7c7f93);
+  @include accent("note", #04a5e5);
+  @include accent("tip", #40a02b);
+  @include accent("important", #7287fd);
+  @include accent("warning", #df8e1d);
+  @include accent("caution", #d20f39);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #04a5e5);
+  @include accent("success", #40a02b);
+  @include accent("danger", #d20f39);
+}
+
+@mixin theme-catppuccin-dark { // https://github.com/catppuccin/catppuccin @frappe
+  --body-background: #303446;
+  --body-background-tint: none;
+
+  --body-font-color: #c6d0f5;
+
+  --color-link: #8caaee;
+  --color-visited-link: #ca9ee6;
+
+  --icon-filter: brightness(0) invert(1);
+
+  --gray-100: #414559;
+  --gray-200: #51576d;
+  --gray-500: #737994;
+
+  @include accent("default", #838ba4);
+  @include accent("note", #8caaee);
+  @include accent("tip", #a6d189);
+  @include accent("important", #ca9ee6);
+  @include accent("warning", #ef9f76);
+  @include accent("caution", #e78284);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #8caaee);
+  @include accent("success", #a6d189);
+  @include accent("danger", #e78284);
+}
+
+@mixin theme-catppuccin-auto {
+  @include theme-catppuccin-light;
+
+  @media (prefers-color-scheme: dark) {
+    @include theme-catppuccin-dark;
+  }
+}
+
+@mixin theme-ayu-light { // https://github.com/ayu-theme/ayu-colors
+  --body-background: #fafafa;
+  --body-background-tint: none;
+
+  --body-font-color: #575f66;
+
+  --color-link: #0870c4;
+  --color-visited-link: #7339a8;
+
+  --icon-filter: none;
+
+  --gray-100: #f3f4f5;
+  --gray-200: #e7e8e9;
+  --gray-500: #abb0b6;
+
+  @include accent("default", #8a9199);
+  @include accent("note", #399ee6);
+  @include accent("tip", #86b300);
+  @include accent("important", #a37acc);
+  @include accent("warning", #fa8d3e);
+  @include accent("caution", #f07171);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #399ee6);
+  @include accent("success", #86b300);
+  @include accent("danger", #f07171);
+}
+
+@mixin theme-ayu-dark { // https://github.com/ayu-theme/ayu-colors (mirage)
+  --body-background: #1f2430;
+  --body-background-tint: none;
+
+  --body-font-color: #cbccc6;
+
+  --color-link: #5ccfe6;
+  --color-visited-link: #d4bfff;
+
+  --icon-filter: brightness(0) invert(1);
+
+  --gray-100: #242936;
+  --gray-200: #2d3443;
+  --gray-500: #5c6773;
+
+  @include accent("default", #5c6773);
+  @include accent("note", #5ccfe6);
+  @include accent("tip", #bae67e);
+  @include accent("important", #d4bfff);
+  @include accent("warning", #ffa759);
+  @include accent("caution", #f28779);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #5ccfe6);
+  @include accent("success", #bae67e);
+  @include accent("danger", #f28779);
+}
+
+@mixin theme-ayu-auto {
+  @include theme-ayu-light;
+
+  @media (prefers-color-scheme: dark) {
+    @include theme-ayu-dark;
+  }
+}

exampleSite/assets/_custom.scss

@@ -2,3 +2,6 @@
 
 // @import "plugins/numbered";
 // @import "plugins/scrollbars";
+// @import "plugins/themes";
+
+@import "plugins/themes";