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
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)};
}