diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss
index 538302e..2ed6ab9 100644
--- a/tildes/scss/styles.scss
+++ b/tildes/scss/styles.scss
@@ -48,3 +48,4 @@
@import "themes/atom_one_dark";
@import "themes/solarized";
@import "themes/zenburn";
+@import "themes/gruvbox";
diff --git a/tildes/scss/themes/_gruvbox.scss b/tildes/scss/themes/_gruvbox.scss
new file mode 100644
index 0000000..bb146d7
--- /dev/null
+++ b/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));
+}
diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2
index 92b1e91..db7f7ba 100644
--- a/tildes/tildes/templates/base.jinja2
+++ b/tildes/tildes/templates/base.jinja2
@@ -30,6 +30,8 @@
{% elif request.cookies.get('theme', '') == 'zenburn' %}
+ {% elif request.cookies.get('theme', '') == 'gruvbox-dark' %}
+
{% 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")) %}