From 1fbfd080b98bb32e89480677d4bb70d943d24fd1 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Sun, 15 Mar 2026 19:34:56 +0100 Subject: [PATCH] Replace dark theme with Nord, introduce more color themes as scss plugin, experimental for now --- README.md | 3 +- assets/_custom.scss | 1 + assets/_defaults.scss | 48 ++++---- assets/plugins/_themes.scss | 191 ++++++++++++++++++++++++++++++++ exampleSite/assets/_custom.scss | 3 + 5 files changed, 221 insertions(+), 25 deletions(-) create mode 100644 assets/plugins/_themes.scss diff --git a/README.md b/README.md index 16ffb1d..b70da09 100644 --- a/README.md +++ b/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. diff --git a/assets/_custom.scss b/assets/_custom.scss index 17af8ac..f3eea2a 100644 --- a/assets/_custom.scss +++ b/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: diff --git a/assets/_defaults.scss b/assets/_defaults.scss index aa69e00..9d24b4c 100644 --- a/assets/_defaults.scss +++ b/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 { - --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)}; -} diff --git a/assets/plugins/_themes.scss b/assets/plugins/_themes.scss new file mode 100644 index 0000000..846a229 --- /dev/null +++ b/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; + } +} diff --git a/exampleSite/assets/_custom.scss b/exampleSite/assets/_custom.scss index 9be7a1d..79b1866 100644 --- a/exampleSite/assets/_custom.scss +++ b/exampleSite/assets/_custom.scss @@ -2,3 +2,6 @@ // @import "plugins/numbered"; // @import "plugins/scrollbars"; +// @import "plugins/themes"; + +@import "plugins/themes"; \ No newline at end of file