diff --git a/frontends/etiquette_flask/static/css/etiquette.css b/frontends/etiquette_flask/static/css/etiquette.css
index 4aafa20..89e0918 100644
--- a/frontends/etiquette_flask/static/css/etiquette.css
+++ b/frontends/etiquette_flask/static/css/etiquette.css
@@ -203,3 +203,105 @@ is hovered over.
 {
     flex: 2;
 }
+
+/******************************************************************************/
+html.theme_slate
+{
+    --color_primary: #222;
+    --color_secondary: #3b4d5d;
+
+    --color_text_normal: #efefef;
+    --color_text_link: #1edeff;
+    --color_text_bubble: black;
+
+    --color_textfields: var(--color_secondary);
+    --color_text_placeholder: gray;
+
+    --color_transparency: rgba(255, 255, 255, 0.05);
+    --color_dropshadow: rgba(0, 0, 0, 0.25);
+    --color_shadow: rgba(0, 0, 0, 0.5);
+    --color_highlight: rgba(255, 255, 255, 0.5);
+
+    --color_tag_card_bg: #e6e6e6;
+    --color_tag_card_fg: black;
+}
+
+html.theme_slate button,
+html.theme_slate button *
+{
+    color: black;
+}
+/******************************************************************************/
+html.theme_hotdogstand
+{
+    --color_primary: yellow;
+    --color_secondary: red;
+
+    --color_text_normal: black;
+    --color_text_link: rebeccapurple;
+    --color_text_bubble: black;
+
+    --color_textfields: var(--color_secondary);
+    --color_text_placeholder: black;
+
+    --color_transparency: yellow;
+    --color_dropshadow: rgba(0, 0, 0, 0.25);
+    --color_shadow: rgba(0, 0, 0, 0.5);
+    --color_highlight: rgba(255, 255, 255, 0.5);
+
+    --color_tag_card_bg: red;
+    --color_tag_card_fg: white;
+}
+
+html.theme_hotdogstand button,
+html.theme_hotdogstand button *
+{
+    color: black;
+}
+
+html.theme_hotdogstand .panel
+{
+    border: 1px solid black;
+}
+/******************************************************************************/
+html.theme_pearl
+{
+    --color_primary: #f6ffff;
+    --color_secondary: #aad7ff;
+
+    --color_text_normal: black;
+    --color_text_link: #00f;
+    --color_text_bubble: black;
+
+    --color_textfields: white;
+    --color_text_placeholder: gray;
+
+    --color_transparency: rgba(0, 0, 0, 0.1);
+    --color_dropshadow: rgba(0, 0, 0, 0.25);
+    --color_shadow: rgba(0, 0, 0, 0.5);
+    --color_highlight: rgba(255, 255, 255, 0.5);
+
+    --color_tag_card_bg: #fff;
+    --color_tag_card_fg: black;
+}
+/******************************************************************************/
+html.theme_turquoise
+{
+    --color_primary: #00d8f4;
+    --color_secondary: #ffffd4;
+
+    --color_text_normal: black;
+    --color_text_link: blue;
+    --color_text_bubble: black;
+
+    --color_textfields: white;
+    --color_text_placeholder: gray;
+
+    --color_transparency: rgba(0, 0, 0, 0.1);
+    --color_dropshadow: rgba(0, 0, 0, 0.25);
+    --color_shadow: rgba(0, 0, 0, 0.5);
+    --color_highlight: rgba(255, 255, 255, 0.5);
+
+    --color_tag_card_bg: #fff;
+    --color_tag_card_fg: blue;
+}
diff --git a/frontends/etiquette_flask/static/css/theme_hotdogstand.css b/frontends/etiquette_flask/static/css/theme_hotdogstand.css
deleted file mode 100644
index 09fb015..0000000
--- a/frontends/etiquette_flask/static/css/theme_hotdogstand.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root
-{
-    --color_primary: yellow;
-    --color_secondary: red;
-
-    --color_text_normal: black;
-    --color_text_link: rebeccapurple;
-    --color_text_bubble: black;
-
-    --color_textfields: var(--color_secondary);
-    --color_text_placeholder: black;
-
-    --color_transparency: yellow;
-    --color_dropshadow: rgba(0, 0, 0, 0.25);
-    --color_shadow: rgba(0, 0, 0, 0.5);
-    --color_highlight: rgba(255, 255, 255, 0.5);
-
-    --color_tag_card_bg: red;
-    --color_tag_card_fg: white;
-}
-
-button,
-button *
-{
-    color: black;
-}
-
-.panel
-{
-    border: 1px solid black;
-}
diff --git a/frontends/etiquette_flask/static/css/theme_pearl.css b/frontends/etiquette_flask/static/css/theme_pearl.css
deleted file mode 100644
index 6b835bc..0000000
--- a/frontends/etiquette_flask/static/css/theme_pearl.css
+++ /dev/null
@@ -1,20 +0,0 @@
-:root
-{
-    --color_primary: #f6ffff;
-    --color_secondary: #aad7ff;
-
-    --color_text_normal: black;
-    --color_text_link: #00f;
-    --color_text_bubble: black;
-
-    --color_textfields: white;
-    --color_text_placeholder: gray;
-
-    --color_transparency: rgba(0, 0, 0, 0.1);
-    --color_dropshadow: rgba(0, 0, 0, 0.25);
-    --color_shadow: rgba(0, 0, 0, 0.5);
-    --color_highlight: rgba(255, 255, 255, 0.5);
-
-    --color_tag_card_bg: #fff;
-    --color_tag_card_fg: black;
-}
diff --git a/frontends/etiquette_flask/static/css/theme_slate.css b/frontends/etiquette_flask/static/css/theme_slate.css
deleted file mode 100644
index 4c467b2..0000000
--- a/frontends/etiquette_flask/static/css/theme_slate.css
+++ /dev/null
@@ -1,26 +0,0 @@
-:root
-{
-    --color_primary: #222;
-    --color_secondary: #3b4d5d;
-
-    --color_text_normal: #efefef;
-    --color_text_link: #1edeff;
-    --color_text_bubble: black;
-
-    --color_textfields: var(--color_secondary);
-    --color_text_placeholder: gray;
-
-    --color_transparency: rgba(255, 255, 255, 0.05);
-    --color_dropshadow: rgba(0, 0, 0, 0.25);
-    --color_shadow: rgba(0, 0, 0, 0.5);
-    --color_highlight: rgba(255, 255, 255, 0.5);
-
-    --color_tag_card_bg: #e6e6e6;
-    --color_tag_card_fg: black;
-}
-
-button,
-button *
-{
-    color: black;
-}
diff --git a/frontends/etiquette_flask/static/css/theme_turquoise.css b/frontends/etiquette_flask/static/css/theme_turquoise.css
deleted file mode 100644
index 6276c1d..0000000
--- a/frontends/etiquette_flask/static/css/theme_turquoise.css
+++ /dev/null
@@ -1,20 +0,0 @@
-:root
-{
-    --color_primary: #00d8f4;
-    --color_secondary: #ffffd4;
-
-    --color_text_normal: black;
-    --color_text_link: blue;
-    --color_text_bubble: black;
-
-    --color_textfields: white;
-    --color_text_placeholder: gray;
-
-    --color_transparency: rgba(0, 0, 0, 0.1);
-    --color_dropshadow: rgba(0, 0, 0, 0.25);
-    --color_shadow: rgba(0, 0, 0, 0.5);
-    --color_highlight: rgba(255, 255, 255, 0.5);
-
-    --color_tag_card_bg: #fff;
-    --color_tag_card_fg: blue;
-}
diff --git a/frontends/etiquette_flask/templates/admin.html b/frontends/etiquette_flask/templates/admin.html
index ac2e06b..33e4edc 100644
--- a/frontends/etiquette_flask/templates/admin.html
+++ b/frontends/etiquette_flask/templates/admin.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     <title>Admin control</title>
@@ -8,7 +8,6 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.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/http.js"></script>
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index 8cabc7a..f74e317 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 
 {% macro shared_css() %}
 <style>
@@ -89,7 +89,6 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
@@ -146,7 +145,6 @@ const ALBUM_ID = undefined;
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     <link rel="stylesheet" href="/static/css/cards.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/album_autocomplete.js"></script>
diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html
index 3abadff..875a3d2 100644
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/frontends/etiquette_flask/templates/bookmarks.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "cards.html" as cards %}
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index ab27f02..cf3455b 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "clipboard_tray.html" as clipboard_tray %}
@@ -11,7 +11,6 @@
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
diff --git a/frontends/etiquette_flask/templates/login.html b/frontends/etiquette_flask/templates/login.html
index a0c8c99..c53597f 100644
--- a/frontends/etiquette_flask/templates/login.html
+++ b/frontends/etiquette_flask/templates/login.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     <title>Login/Register</title>
@@ -8,7 +8,6 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.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/http.js"></script>
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index bfc5897..7296284 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "cards.html" as cards %}
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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>
diff --git a/frontends/etiquette_flask/templates/root.html b/frontends/etiquette_flask/templates/root.html
index 8ec0105..d188b68 100644
--- a/frontends/etiquette_flask/templates/root.html
+++ b/frontends/etiquette_flask/templates/root.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     <title>Etiquette</title>
     <meta charset="UTF-8">
@@ -7,7 +7,6 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.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/http.js"></script>
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 6c206e9..289c1d4 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "cards.html" as cards %}
@@ -12,7 +12,6 @@
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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>
diff --git a/frontends/etiquette_flask/templates/search_embed.html b/frontends/etiquette_flask/templates/search_embed.html
index a0d7bbe..9804a67 100644
--- a/frontends/etiquette_flask/templates/search_embed.html
+++ b/frontends/etiquette_flask/templates/search_embed.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.css">
-    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
 
 <style>
 body
diff --git a/frontends/etiquette_flask/templates/swipe.html b/frontends/etiquette_flask/templates/swipe.html
index 31db342..8183924 100644
--- a/frontends/etiquette_flask/templates/swipe.html
+++ b/frontends/etiquette_flask/templates/swipe.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "clipboard_tray.html" as clipboard_tray %}
@@ -11,7 +11,6 @@
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index 96c08d9..077c20e 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "cards.html" as cards %}
@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
diff --git a/frontends/etiquette_flask/templates/template.html b/frontends/etiquette_flask/templates/template.html
index bd64697..a8dc9f4 100644
--- a/frontends/etiquette_flask/templates/template.html
+++ b/frontends/etiquette_flask/templates/template.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     <title>Flasksite</title>
@@ -8,7 +8,6 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.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/http.js"></script>
diff --git a/frontends/etiquette_flask/templates/user.html b/frontends/etiquette_flask/templates/user.html
index 526bd65..ca47a39 100644
--- a/frontends/etiquette_flask/templates/user.html
+++ b/frontends/etiquette_flask/templates/user.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_{{theme}}">
 <head>
     {% import "header.html" as header %}
     {% import "cards.html" as cards %}
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/etiquette.css">
     <link rel="stylesheet" href="/static/css/cards.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/editor.js"></script>