Add Dracula theme

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';

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

tildes/scss/themes/_theme_base.scss

@@ -127,7 +127,14 @@
   }
 
   .btn.btn-primary {
+    $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,9 +144,13 @@
     }
 
     &:visited {
+      @if ($is-button-bg-light) {
+        color: #000;
+      } @else {
         color: #fff;
       }
     }
+  }
 
   .btn-used {
     color: map-get($theme, "button-used");
@@ -367,6 +378,7 @@
 
     &.active a {
       color: map-get($theme, "link");
+      border-bottom-color: map-get($theme, "link");
     }
   }
 

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' %}
   <meta name="theme-color" content="#073642">
+  {% elif request.cookies.get("theme", "") == "dracula" %}
+  <meta name="theme-color" content="#282a36">
   {% elif request.cookies.get('theme', '') == 'black' %}
   <meta name="theme-color" content="#222">
   {% endif %}
@@ -99,6 +101,7 @@
             ("white", "White"),
             ("light", "Solarized Light"),
             ("dark", "Solarized Dark"),
+            ("dracula", "Dracula"),
             ("black", "Black")) %}
         <option value="{{ theme }}"
           {{ 'selected' if theme == request.cookies.get("theme", "white") else '' }}

tildes/tildes/views/settings.py

@@ -32,6 +32,7 @@ def get_settings(request: Request) -> dict:
         "white": "White",
         "light": "Solarized Light",
         "dark": "Solarized Dark",
+        "dracula": "Dracula",
         "black": "Black",
     }