Move themes into one file, set by class on html element.

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

frontends/etiquette_flask/static/css/theme_hotdogstand.css

@@ -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;
-}

frontends/etiquette_flask/static/css/theme_pearl.css

@@ -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;
-}

frontends/etiquette_flask/static/css/theme_slate.css

@@ -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;
-}

frontends/etiquette_flask/static/css/theme_turquoise.css

@@ -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;
-}

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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>