diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss
index e79f107..5279721 100644
--- a/tildes/scss/styles.scss
+++ b/tildes/scss/styles.scss
@@ -38,4 +38,5 @@
// meta tag inside the base.jinja2 template, so mobile browsers can match
@import 'themes/theme_base';
@import 'themes/black';
+@import 'themes/dracula';
@import 'themes/solarized';
diff --git a/tildes/scss/themes/_dracula.scss b/tildes/scss/themes/_dracula.scss
new file mode 100644
index 0000000..15bfe17
--- /dev/null
+++ b/tildes/scss/themes/_dracula.scss
@@ -0,0 +1,42 @@
+// Color palette is Zeno Rocha's "Dracula" (https://draculatheme.com/)
+
+$background: #282a36;
+$background-alt: #44475a;
+$foreground: #f8f8f2;
+$foreground-alt: #6272a4;
+
+$cyan: #8be9fd;
+$green: #50fa7b;
+$orange: #ffb86c;
+$pink: #ff79c6;
+$purple: #bd93f9;
+$red: #ff5555;
+$yellow: #f1fa8c;
+
+$theme-dracula: (
+ "alert": $orange,
+ "background-primary": $background,
+ "background-secondary": $background-alt,
+ "background-input": darken($background, 10%),
+ "border": $foreground-alt,
+ "comment-label-exemplary": $cyan,
+ "comment-label-joke": $green,
+ "comment-label-noise": $yellow,
+ "comment-label-offtopic": $pink,
+ "comment-label-malice": $red,
+ "error": $red,
+ "foreground-primary": $foreground,
+ "foreground-secondary": $foreground-alt,
+ "foreground-highlight": $foreground,
+ "link": $cyan,
+ "link-visited": $purple,
+ "stripe-mine": $purple,
+ "stripe-target": $yellow,
+ "topic-tag-nsfw": $red,
+ "topic-tag-spoiler": $yellow,
+ "warning": $yellow,
+);
+
+body.theme-dracula {
+ @include use-theme($theme-dracula);
+}
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index 01fd3bc..4f09cd0 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -127,7 +127,14 @@
}
.btn.btn-primary {
- color: #fff;
+ $is-button-bg-light: lightness(map-get($theme, "button")) > 50;
+
+ @if ($is-button-bg-light) {
+ color: #000;
+ } @else {
+ color: #fff;
+ }
+
background-color: map-get($theme, "button");
border-color: map-get($theme, "button");
@@ -137,7 +144,11 @@
}
&:visited {
- color: #fff;
+ @if ($is-button-bg-light) {
+ color: #000;
+ } @else {
+ color: #fff;
+ }
}
}
@@ -367,6 +378,7 @@
&.active a {
color: map-get($theme, "link");
+ border-bottom-color: map-get($theme, "link");
}
}
diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2
index 22d16a5..9c19f8b 100644
--- a/tildes/tildes/templates/base.jinja2
+++ b/tildes/tildes/templates/base.jinja2
@@ -14,6 +14,8 @@
{# Hardcoding each option isn't great, but I don't know a better method #}
{% if request.cookies.get('theme', '') == 'dark' %}
+ {% elif request.cookies.get("theme", "") == "dracula" %}
+
{% elif request.cookies.get('theme', '') == 'black' %}
{% endif %}
@@ -99,6 +101,7 @@
("white", "White"),
("light", "Solarized Light"),
("dark", "Solarized Dark"),
+ ("dracula", "Dracula"),
("black", "Black")) %}