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

2026-03-15 19:34:56 +01:00
parent 81a841c92d
commit 1fbfd080b9
5 changed files with 221 additions and 25 deletions
@@ -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;
+  }
+}