Add theme css files and theme cookie.

frontends/ycdl_flask/backend/common.py

@@ -3,6 +3,7 @@ Do not execute this file directly.
 Use ycdl_flask_dev.py or ycdl_flask_prod.py.
 '''
 import flask; from flask import request
+import functools
 import threading
 import time
 
@@ -65,6 +66,29 @@ def after_request(response):
     response = flasktools.gzip_response(request, response)
     return response
 
+site.route = flasktools.decorate_and_route(
+    flask_app=site,
+    decorators=[
+        flasktools.ensure_response_type,
+        functools.partial(
+            flasktools.give_theme_cookie,
+            cookie_name='ycdl_theme',
+            default_theme='slate',
+        ),
+    ],
+)
+
+def render_template(request, template_name, **kwargs):
+    theme = request.cookies.get('ycdl_theme', None)
+
+    response = flask.render_template(
+        template_name,
+        request=request,
+        theme=theme,
+        **kwargs,
+    )
+    return response
+
 ####################################################################################################
 
 # These functions will be called by the launcher, flask_dev, flask_prod.

frontends/ycdl_flask/backend/endpoints/basic_endpoints.py

@@ -6,7 +6,7 @@ site = common.site
 
 @site.route('/')
 def root():
-    return flask.render_template('root.html')
+    return common.render_template(request, 'root.html')
 
 @site.route('/favicon.ico')
 @site.route('/favicon.png')

frontends/ycdl_flask/backend/endpoints/channel_endpoints.py

@@ -31,7 +31,7 @@ def get_all_channel_names():
 @site.route('/channels')
 def get_channels():
     channels = common.ycdldb.get_channels()
-    return flask.render_template('channels.html', channels=channels)
+    return common.render_template(request, 'channels.html', channels=channels)
 
 def _render_videos_listing(videos, channel, state, orderby):
     search_terms = request.args.get('q', '').lower().strip().replace('+', ' ').split()
@@ -55,7 +55,8 @@ def _render_videos_listing(videos, channel, state, orderby):
 
     all_states = common.ycdldb.get_all_states()
 
-    return flask.render_template(
+    return common.render_template(
+        request,
         'channel.html',
         all_states=all_states,
         channel=channel,

frontends/ycdl_flask/static/css/theme_onyx.css

@@ -0,0 +1,71 @@
+:root
+{
+    --color_primary: #000;
+    --color_secondary: #3b4d5d;
+
+    --color_text_normal: #ccc;
+    --color_text_link: #1edeff;
+    --color_text_bubble: black;
+
+    --color_textfields: var(--color_primary);
+    --color_text_placeholder: gray;
+
+    --color_selection: rgba(0, 0, 255, 0.5);
+    --color_transparency: rgba(0, 0, 0, 0.0);
+    --color_dropshadow: rgba(0, 0, 0, 0.25);
+    --color_shadow: rgba(0, 0, 0, 0.5);
+    --color_highlight: rgba(255, 255, 255, 0.5);
+}
+
+button,
+button *
+{
+    color: black;
+}
+
+.tab_buttons button
+{
+    color: var(--color_text_normal);
+}
+
+input,
+textarea,
+.nice_link,
+.panel
+{
+    border: 1px solid var(--color_text_normal);
+}
+
+.channel_card
+{
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid black;
+}
+
+.video_card:hover
+{
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
+.channel_card_pending,
+.video_card_pending
+{
+    border: 2px solid #ffffaa;
+    background-color: rgba(255, 255, 170, 0.25);
+}
+.video_card_ignored
+{
+    border: 2px solid #ffc886;
+    background-color: rgba(255, 200, 134, 0.25);
+}
+.video_card_selected
+{
+    border: 2px solid #13f4ff !important;
+    background-color: rgba(19, 244, 255, 0.25) !important;
+}
+.channel_card_no_pending,
+.video_card_downloaded
+{
+    border: 2px solid #aaffaa;
+    background-color: rgba(170, 255, 170, 0.25);
+}

frontends/ycdl_flask/static/css/theme_pearl.css

@@ -0,0 +1,62 @@
+: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;
+}
+
+.channel_card
+{
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid black;
+}
+
+.channel_card_pending
+{
+    background-color: #ffffaa;
+}
+
+.channel_card_no_pending
+{
+    background-color: #aaffaa;
+}
+
+.video_card
+{
+    border: 1px solid #000;
+}
+.video_card:hover
+{
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
+.video_card_pending
+{
+    background-color: #ffffaa;
+}
+.video_card_ignored
+{
+    background-color: #ffc886;
+}
+.video_card_selected
+{
+    background-color: #13f4ff !important;
+}
+.video_card_downloaded
+{
+    background-color: #aaffaa;
+}

frontends/ycdl_flask/static/css/theme_slate.css

@@ -0,0 +1,65 @@
+: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;
+}
+
+.tab_buttons button
+{
+    color: var(--color_text_normal);
+}
+
+.channel_card
+{
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid black;
+}
+
+.video_card:hover
+{
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+}
+.channel_card_pending,
+.video_card_pending
+{
+    border: 2px solid #ffffaa;
+    background-color: rgba(255, 255, 170, 0.25);
+}
+.video_card_ignored
+{
+    border: 2px solid #ffc886;
+    background-color: rgba(255, 200, 134, 0.25);
+}
+.video_card_selected
+{
+    border: 2px solid #13f4ff !important;
+    background-color: rgba(19, 244, 255, 0.25) !important;
+}
+.channel_card_no_pending,
+.video_card_downloaded
+{
+    border: 2px solid #aaffaa;
+    background-color: rgba(170, 255, 170, 0.25);
+}

frontends/ycdl_flask/static/css/ycdl.css

@@ -2,22 +2,9 @@
 This file contains styles that apply to all pages within YCDL, but don't
 belong in common.css because they are specifically for this project.
 */
-
+html
-:root
 {
-    --color_primary: white;
+    font-family: sans-serif;
-
-    --color_text_normal: black;
-    --color_text_link: blue;
-    --color_text_bubble: var(--color_text_normal);
-
-    --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);
 }
 
 .navigation_link:hover

frontends/ycdl_flask/templates/channel.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css"/>
     <link rel="stylesheet" href="/static/css/ycdl.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>
@@ -41,27 +42,6 @@
     padding: 8px;
 
     border-radius: 4px;
-    border: 1px solid #000;
-}
-.video_card:hover
-{
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-}
-.video_card_pending
-{
-    background-color: #ffffaa;
-}
-.video_card_ignored
-{
-    background-color: #ffc886;
-}
-.video_card_selected
-{
-    background-color: #13f4ff !important;
-}
-.video_card_downloaded
-{
-    background-color: #aaffaa;
 }
 
 .video_thumbnail
@@ -409,10 +389,6 @@ function deselect_all()
     video_card_first_selected = null;
     for (const video_card of Array.from(video_card_selections))
     {
-        if (video_card.classList.contains("hidden"))
-        {
-            continue;
-        }
         video_card.classList.remove("video_card_selected");
     }
 }

frontends/ycdl_flask/templates/channels.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/ycdl.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>
@@ -31,17 +32,6 @@
 {
     padding: 10px;
     border-radius: 4px;
-    border: 1px solid black;
-}
-
-.channel_card_pending
-{
-    background-color: #ffffaa;
-}
-
-.channel_card_no_pending
-{
-    background-color: #aaffaa;
 }
 </style>
 </head>

frontends/ycdl_flask/templates/root.html

@@ -7,9 +7,10 @@
     <link rel="icon" href="/favicon.png" type="image/png"/>
     <link rel="stylesheet" href="/static/css/common.css">
     <link rel="stylesheet" href="/static/css/ycdl.css">
+    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
 
 <style>
-body, a
+body
 {
     display: flex;
     flex-direction: column;
@@ -24,6 +25,7 @@ body, a
     <a href="/channels">Manage channels</a>
     <a href="/videos/pending?limit=100">New videos</a>
     <a href="/videos/pending?limit=100&orderby=random">Random videos</a>
+    <span><a href="/?theme=pearl">Pearl</a> <a href="/?theme=slate">Slate</a> <a href="/?theme=onyx">Onyx</a></span>
 </body>