aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--settings.py6
-rw-r--r--youtube/__init__.py15
-rw-r--r--youtube/static/comments.css4
-rw-r--r--youtube/static/dark_theme.css21
-rw-r--r--youtube/static/gray_theme.css9
-rw-r--r--youtube/static/light_theme.css9
-rw-r--r--youtube/static/shared.css14
-rw-r--r--youtube/templates/base.html1
-rw-r--r--youtube/templates/channel.html3
-rw-r--r--youtube/templates/home.html2
-rw-r--r--youtube/templates/login.html4
-rw-r--r--youtube/templates/watch.html12
12 files changed, 79 insertions, 21 deletions
diff --git a/settings.py b/settings.py
index 944576d..d02a1fd 100644
--- a/settings.py
+++ b/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,
diff --git a/youtube/__init__.py b/youtube/__init__.py
index ded6382..38ff7d3 100644
--- a/youtube/__init__.py
+++ b/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',
+ }
+
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 1a5bec9..85f0cc1 100644
--- a/youtube/static/comments.css
+++ b/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;
-
}
diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css
new file mode 100644
index 0000000..4f302cb
--- /dev/null
+++ b/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;
+}
diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css
new file mode 100644
index 0000000..69cc849
--- /dev/null
+++ b/youtube/static/gray_theme.css
@@ -0,0 +1,9 @@
+body{
+ --interface-color: #dadada;
+ --text-color: #222222;
+ --background-color: #bcbcbc;
+}
+
+.comment .permalink{
+ color: #000000;
+}
diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css
new file mode 100644
index 0000000..05697b9
--- /dev/null
+++ b/youtube/static/light_theme.css
@@ -0,0 +1,9 @@
+body{
+ --interface-color: #ffffff;
+ --text-color: #222222;
+ --background-color: #f8f8f8;
+}
+
+.comment .permalink{
+ color: #000000;
+}
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index d232129..a79e42b 100644
--- a/youtube/static/shared.css
+++ b/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;
}
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index aaa0351..9127efa 100644
--- a/youtube/templates/base.html
+++ b/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">
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 069e33b..ed04988 100644
--- a/youtube/templates/channel.html
+++ b/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{
diff --git a/youtube/templates/home.html b/youtube/templates/home.html
index c7f7666..9890f5e 100644
--- a/youtube/templates/home.html
+++ b/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;
diff --git a/youtube/templates/login.html b/youtube/templates/login.html
index 13d37ca..384f1ac 100644
--- a/youtube/templates/login.html
+++ b/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;
}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 745acdb..14e953b 100644
--- a/youtube/templates/watch.html
+++ b/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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 03:34:11 +0000