hugo-book
Code Issues

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

Browse Source
This commit is contained in:
Alex Shpak
2026-03-15 19:34:56 +01:00
parent 81a841c92d
commit 1fbfd080b9
5 changed files with 221 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -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
+1
View File
@@ -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
+24 -24
View File
@@ -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 {
--body-background: #343a40;
@mixin theme-dark { // based on https://www.nordtheme.com/
--body-background: #2e3440;
--body-background-tint: none;
--body-font-color: #e9ecef;
--body-font-color: #eceff4;
--color-link: #84b2ff;
--color-visited-link: #b88dff;
--color-link: #81a1c1;
--color-visited-link: #81a1c1;
--icon-filter: brightness(0) invert(1);
--gray-100: #494e54;
--gray-200: #5c6165;
--gray-500: #999d9f;
--gray-100: #3b4252;
--gray-200: #434c5e;
--gray-500: #d8dee9;
@include accent("default", #64748b);
@include accent("note", #4486dd);
@include accent("tip", #3bad3b);
@include accent("important", #8144dd);
@include accent("warning", #f59e42);
@include accent("caution", #d84747);
@include accent("default", #81a1c1);
@include accent("note", #5e81ac);
@include accent("tip", #a3be8c);
@include accent("important", #b48ead);
@include accent("warning", #d08770);
@include accent("caution", #bf616a);
// Fallback for {{< hint >}} shortcodes
@include accent("info", #4486dd);
@include accent("success", #3bad3b);
@include accent("danger", #d84747);
@include accent("info", #5e81ac);
@include accent("success", #a3be8c);
@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
+191
View File
@@ -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
+3
View File
@@ -2,3 +2,6 @@
// @import "plugins/numbered";
// @import "plugins/scrollbars";
// @import "plugins/themes";
@import "plugins/themes";