Try different themes with the ?theme query.

frontends/etiquette_flask/static/css/common.css

@@ -3,7 +3,11 @@
     --color_theme_primary: #00d8f4;
     --color_theme_secondary: #ffffd4;
 
+    --color_tag_object_bg: #fff;
+    --color_tag_object_fg: blue;
+
     --color_text_normal: black;
+    --color_text_bubble: black;
     --color_text_link: blue;
 
     --color_site_textfields: white;

frontends/etiquette_flask/static/css/theme_pearl.css

@@ -0,0 +1,13 @@
+:root
+{
+    --color_theme_primary: #f6ffff;
+    --color_theme_secondary: #86c6ff;
+    --color_site_textfields: white;
+    --color_site_transparency: rgba(0, 0, 0, 0.1);
+    --color_text_normal: #000;
+    --color_text_link: #00f;
+    --color_text_bubble: black;
+
+    --color_tag_object_bg: #fff;
+    --color_tag_object_fg: black;
+}

frontends/etiquette_flask/static/css/theme_slate.css

@@ -1,8 +1,13 @@
 :root
 {
-    --color_theme_primary: #333;
+    --color_theme_primary: #222;
     --color_theme_secondary: #3b4d5d;
     --color_site_textfields: var(--color_theme_secondary);
+    --color_site_transparency: rgba(255, 255, 255, 0.05);
     --color_text_normal: #efefef;
     --color_text_link: #1edeff;
+    --color_text_bubble: black;
+
+    --color_tag_object_bg: #e6e6e6;
+    --color_tag_object_fg: black;
 }

frontends/etiquette_flask/templates/album.html

@@ -95,6 +95,7 @@ h2, h3
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
 
@@ -151,6 +152,7 @@ ALBUM_ID = undefined;
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/spinner.js"></script>

frontends/etiquette_flask/templates/bookmarks.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/spinner.js"></script>

frontends/etiquette_flask/templates/clipboard.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/hotkeys.js"></script>

frontends/etiquette_flask/templates/login.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
 

frontends/etiquette_flask/templates/photo.html

@@ -7,6 +7,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/hotkeys.js"></script>

frontends/etiquette_flask/templates/root.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
 

frontends/etiquette_flask/templates/search.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/hotkeys.js"></script>

frontends/etiquette_flask/templates/tags.html

@@ -11,6 +11,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/spinner.js"></script>

frontends/etiquette_flask/templates/template.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
 

frontends/etiquette_flask/templates/user.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>