From a68f76176f99b9a281dd163d297554cc65ff858c Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sat, 22 Jul 2023 17:28:21 -0700
Subject: [PATCH] Move themes into one file, set by class on html element.

---
 .../etiquette_flask/static/css/etiquette.css  | 102 ++++++++++++++++++
 .../static/css/theme_hotdogstand.css          |  31 ------
 .../static/css/theme_pearl.css                |  20 ----
 .../static/css/theme_slate.css                |  26 -----
 .../static/css/theme_turquoise.css            |  20 ----
 .../etiquette_flask/templates/admin.html      |   3 +-
 .../etiquette_flask/templates/album.html      |   4 +-
 .../etiquette_flask/templates/bookmarks.html  |   3 +-
 .../etiquette_flask/templates/clipboard.html  |   3 +-
 .../etiquette_flask/templates/login.html      |   3 +-
 .../etiquette_flask/templates/photo.html      |   3 +-
 frontends/etiquette_flask/templates/root.html |   3 +-
 .../etiquette_flask/templates/search.html     |   3 +-
 .../templates/search_embed.html               |   3 +-
 .../etiquette_flask/templates/swipe.html      |   3 +-
 frontends/etiquette_flask/templates/tags.html |   3 +-
 .../etiquette_flask/templates/template.html   |   3 +-
 frontends/etiquette_flask/templates/user.html |   3 +-
 18 files changed, 115 insertions(+), 124 deletions(-)
 delete mode 100644 frontends/etiquette_flask/static/css/theme_hotdogstand.css
 delete mode 100644 frontends/etiquette_flask/static/css/theme_pearl.css
 delete mode 100644 frontends/etiquette_flask/static/css/theme_slate.css
 delete mode 100644 frontends/etiquette_flask/static/css/theme_turquoise.css

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>