Add Gruvbox theme (with light and dark modes)

tildes/scss/styles.scss

@@ -48,3 +48,4 @@
 @import "themes/atom_one_dark";
 @import "themes/solarized";
 @import "themes/zenburn";
+@import "themes/gruvbox";

tildes/scss/themes/_gruvbox.scss

@@ -0,0 +1,132 @@
+// Colors from https://github.com/gruvbox-community/gruvbox
+// stylelint-disable scss/dollar-variable-pattern
+
+// ----------------------------------------------------------------------------
+// Dark Mode
+// ----------------------------------------------------------------------------
+
+// Dark Background
+$gb-dm-bg0: #282828;
+$gb-dm-bg0-hard: #1d2021;
+$gb-dm-bg0-soft: #32302f;
+$gb-dm-bg1: #3c3836;
+$gb-dm-bg2: #504945;
+$gb-dm-bg3: #665c54;
+$gb-dm-bg4: #7c6f64;
+
+// Dark Foreground
+$gb-dm-fg0: #fbf1c7;
+$gb-dm-fg1: #ebdbb2;
+$gb-dm-fg2: #d5c4a1;
+$gb-dm-fg3: #bdae93;
+$gb-dm-fg4: #a89984;
+
+// Dark Colors
+$gb-dm-light-red: #fb4934;
+$gb-dm-light-green: #b8bb26;
+$gb-dm-light-yellow: #fabd2f;
+$gb-dm-light-blue: #83a598;
+$gb-dm-light-purple: #d3869b;
+$gb-dm-light-aqua: #8ec07c;
+$gb-dm-light-orange: #fe8019;
+$gb-dm-light-gray: #a89984;
+
+// ----------------------------------------------------------------------------
+// Light Mode
+// ----------------------------------------------------------------------------
+
+// Light Background
+$gb-lm-bg0: #fbf1c7;
+$gb-lm-bg0-hard: #f9f5d7;
+$gb-lm-bg0-soft: #f2e5bc;
+$gb-lm-bg1: #ebdbb2;
+$gb-lm-bg2: #d5c4a1;
+$gb-lm-bg3: #bdae93;
+$gb-lm-bg4: #a89984;
+
+// Light Foreground
+$gb-lm-fg0: #282828;
+$gb-lm-fg1: #3c3836;
+$gb-lm-fg2: #504945;
+$gb-lm-fg3: #665c54;
+$gb-lm-fg4: #7c6f64;
+
+// Light Colors
+$gb-lm-light-red: #9d0006;
+$gb-lm-light-green: #79740e;
+$gb-lm-light-yellow: #b57614;
+$gb-lm-light-blue: #076678;
+$gb-lm-light-purple: #8f3f71;
+$gb-lm-light-aqua: #427b58;
+$gb-lm-light-orange: #af3a03;
+$gb-lm-light-gray: #7c6f64;
+
+// ----------------------------------------------------------------------------
+
+// Common Dark Colors for both modes
+$dark-red: #cc241d;
+$dark-green: #98971a;
+$dark-yellow: #d79921;
+$dark-blue: #458588;
+$dark-purple: #b16286;
+$dark-aqua: #689d6a;
+$dark-orange: #d65d0e;
+$dark-gray: #928374;
+
+// ----------------------------------------------------------------------------
+
+// Shared between both "light" and "dark" variants
+// Note that "dark" refers to colors, not modes (dm = dark mode, lm = light mode)
+$gruvbox-base: (
+  "comment-label-exemplary": $dark-blue,
+  "comment-label-joke": $dark-green,
+  "comment-label-noise": $dark-yellow,
+  "comment-label-offtopic": $dark-aqua,
+  "comment-label-malice": $dark-red,
+  "syntax-builtin": $dark-aqua,
+  "syntax-comment": $dark-green,
+  "syntax-constant": $dark-red,
+  "syntax-keyword": $dark-blue,
+  "syntax-literal": $dark-purple,
+  "syntax-string": $dark-yellow,
+);
+
+// Dark theme definition
+$gruvbox-dark: (
+  "alert": $gb-dm-light-orange,
+  "background-input":  $gb-dm-bg1,
+  "background-primary": $gb-dm-bg0,
+  "background-secondary": $gb-dm-bg1,
+  "border": $gb-dm-bg2,
+  "error": $gb-dm-light-red,
+  "foreground-highlight": $gb-dm-fg0,
+  "foreground-primary": $gb-dm-fg1,
+  "foreground-secondary": $gb-dm-fg4,
+  "link": $gb-dm-light-blue,
+  "link-visited": $dark-purple,
+  "warning": $gb-dm-light-yellow,
+);
+
+body.theme-gruvbox-dark {
+  @include use-theme(map-merge($gruvbox-base, $gruvbox-dark));
+}
+
+// Light theme definition
+$gruvbox-light: (
+  "alert": $dark-orange,
+  "background-input": $gb-lm-bg1,
+  "background-primary": $gb-lm-bg0,
+  "background-secondary": $gb-lm-bg1,
+  "border": $gb-lm-bg2,
+  "error": $dark-red,
+  "foreground-highlight": $gb-lm-fg0,
+  "foreground-primary": $gb-lm-fg1,
+  "foreground-secondary": $gb-lm-fg4,
+  "link": $gb-lm-light-blue,
+  "link-visited": $gb-lm-light-purple,
+  "warning": $gb-lm-light-yellow,
+);
+
+body.theme-gruvbox-light {
+  @include use-theme(map-merge($gruvbox-base, $gruvbox-light));
+}

tildes/tildes/templates/base.jinja2

@@ -30,6 +30,8 @@
   <meta name="theme-color" content="#222">
   {% elif request.cookies.get('theme', '') == 'zenburn' %}
   <meta name="theme-color" content="#3f3f3f">
+  {% elif request.cookies.get('theme', '') == 'gruvbox-dark' %}
+  <meta name="theme-color" content="#282828">
   {% endif %}
 
   {% assets "css" %}
@@ -118,7 +120,9 @@
             ("dracula", "Dracula"),
             ("atom-one-dark", "Atom One Dark"),
             ("black", "Black"),
-            ("zenburn", "Zenburn")) %}
+            ("zenburn", "Zenburn"),
+            ("gruvbox-light", "Gruvbox Light"),
+            ("gruvbox-dark", "Gruvbox Dark")) %}
         <option value="{{ theme }}"
           {{ 'selected' if theme == request.cookies.get("theme", "white") else '' }}
         >

tildes/tildes/views/settings.py

@@ -40,6 +40,8 @@ def get_settings(request: Request) -> dict:
         "atom-one-dark": "Atom One Dark",
         "black": "Black",
         "zenburn": "Zenburn",
+        "gruvbox-light": "Gruvbox Light",
+        "gruvbox-dark": "Gruvbox Dark",
     }
 
     if site_default_theme == user_default_theme: