Layout: Add themes

settings.py

@@ -78,6 +78,12 @@ For security reasons, enabling this is not recommended.''',
         'comment': '',
     }),
 
+    ('theme', {
+        'type': int,
+        'default': 0,
+        'comment': '',
+    }),
+
     ('gather_googlevideo_domains', {
         'type': bool,
         'default': False,

youtube/__init__.py

@@ -1,7 +1,22 @@
 import flask
+import settings
 yt_app = flask.Flask(__name__)
 yt_app.url_map.strict_slashes = False
 
 @yt_app.route('/')
 def homepage():
     return flask.render_template('home.html', title="Youtube local")
+
+
+theme_names = {
+    0: 'light_theme',
+    1: 'gray_theme',
+    2: 'dark_theme',
+}
+
+@yt_app.context_processor
+def inject_theme_preference():
+    return {
+        'theme_path': '/youtube.com/static/' + theme_names[settings.theme] + '.css',
+    }
+

youtube/static/comments.css

@@ -69,7 +69,7 @@
     display:grid;
     grid-template-columns: auto auto 100px 1fr;
     grid-template-rows: 0fr 0fr 0fr 0fr;
-    background-color: #dadada;
+    background-color: var(--interface-color);
     justify-content: start;
 }
 
@@ -102,8 +102,6 @@
     grid-column: 3;
     grid-row: 1;
     white-space: nowrap;
-    color: black;
-
 }
 
 

youtube/static/dark_theme.css

@@ -0,0 +1,21 @@
+body{
+    --interface-color: #333333;
+    --text-color: #cccccc;
+    --background-color: #000000;
+}
+
+a:link {
+    color: #22aaff;
+}
+
+a:visited {
+    color: ##7755ff;
+}
+
+a:not([href]){
+    color: var(--text-color);
+}
+
+.comment .permalink{
+    color: #ffffff;
+}

youtube/static/gray_theme.css

@@ -0,0 +1,9 @@
+body{
+    --interface-color: #dadada;
+    --text-color: #222222;
+    --background-color: #bcbcbc;
+}
+
+.comment .permalink{
+    color: #000000;
+}

youtube/static/light_theme.css

@@ -0,0 +1,9 @@
+body{
+    --interface-color: #ffffff;
+    --text-color: #222222;
+    --background-color: #f8f8f8;
+}
+
+.comment .permalink{
+    color: #000000;
+}

youtube/static/shared.css

@@ -11,10 +11,10 @@ address{
 body{
     margin:0;
     padding: 0;
-    color:#222;
+    color:var(--text-color);
     
     
-    background-color:#bcbcbc;
+    background-color:var(--background-color);
     
     min-height:100vh;
     display: flex;
@@ -111,7 +111,7 @@ body{
 }
     .dropdown-content{
         display:none;
-        background-color: #e9e9e9;
+        background-color: var(--interface-color);
     }
     .dropdown:hover .dropdown-content{
         /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
@@ -151,7 +151,7 @@ body{
 .horizontal-item-box{
 }
     .item{
-        background-color:#dadada;
+        background-color:var(--interface-color);
         text-decoration:none;
         font-size: 12px;
         color: #767676;
@@ -225,7 +225,7 @@ body{
             max-height:3.6em;
             overflow:hidden;
 
-            color: #333;
+            color: var(--text-color);
             font-size: 16px;
             font-weight: 500;
             text-decoration:initial;
@@ -284,14 +284,14 @@ body{
     height: 40px;
 }
     .page-button{
-        background-color: #e9e9e9;
+        background-color: var(--interface-color);
         border-style: outset;
         border-width: 2px;
         font-weight: bold;
         text-align: center;
     }
 .sort-button{
-    background-color: #dadada;
+    background-color: var(--interface-color);
     padding: 2px;
     justify-self: start;
 }

youtube/templates/base.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <title>{{ page_title }}</title>
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'none'; media-src 'self' https://*.googlevideo.com">
+        <link href="{{ theme_path }}" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">

youtube/templates/channel.html

@@ -31,7 +31,7 @@
             grid-auto-flow: column;
             justify-content:start;
             
-            background-color: #aaaaaa;
+            background-color: var(--interface-color);
             padding: 3px;
             padding-left: 6px;
         }
@@ -44,7 +44,6 @@
             padding-top: 8px;
             padding-bottom: 8px;
             padding-left: 6px;
-            background-color: #bababa;
             margin-bottom: 10px;
         }
             #number-of-results{

youtube/templates/home.html

@@ -2,7 +2,7 @@
 {% extends "base.html" %}
 {% block style %}
     ul {
-        background-color: #dadada;
+        background-color: var(--interface-color);
         padding: 20px;
         width: 400px;
         margin: auto;

youtube/templates/login.html

@@ -7,7 +7,7 @@
         margin: auto;
     }
     main form{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         padding: 10px;
         margin-top:20px;
         display:grid;
@@ -24,7 +24,7 @@
         margin-top:20px;
     }
     #tor-note{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         padding: 10px;
         margin-top: 40px;
     }

youtube/templates/watch.html

@@ -4,7 +4,7 @@
 {% import "comments.html" as comments %}
 {% block style %}
     details > summary{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         border-style: outset;
         border-width: 2px;
         font-weight: bold;
@@ -22,7 +22,7 @@
             width: {{ theater_video_target_width }}px;
             max-height: {{ video_height }}px;
             margin-bottom: 10px;
-            background-color: #bcbcbc;
+            background-color: var(--background-color);
         }
         .related-videos-outer{
             grid-row: 2 /span 3;
@@ -62,7 +62,7 @@
                 min-width: 0;
             }
             .video-info > .is-unlisted{
-                background-color: #dadada;
+                background-color: var(--interface-color);
                 justify-self:start;
                 padding-left:2px;
                 padding-right:2px;
@@ -99,7 +99,7 @@
                 grid-column: 2;
             }
             .video-info > .description{
-                background-color:#dadada;
+                background-color:var(--interface-color);
                 margin-top:8px;
                 white-space: pre-wrap;
                 min-width: 0;
@@ -111,7 +111,7 @@
             .music-list{
                 grid-row:8;
                 grid-column: 1 / span 2;
-                background-color: #dadada;
+                background-color: var(--interface-color);
             }
                 .music-list table,th,td{
                     border: 1px solid;
@@ -165,7 +165,7 @@
     }
 
     .download-dropdown-content{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         padding: 10px;
         list-style: none;
         margin: 0px;