Layout: Add themes

5 files changed, 47 insertions, 10 deletions

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