1 files changed, 147 insertions, 4 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index b7a77be6..e403e606 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -20,7 +20,7 @@ body {
   height: auto;
 }
 
-.channel-owner {
+body a.channel-owner {
   background-color: #008bec;
   color: #fff;
   border-radius: 9px;
@@ -101,15 +101,19 @@ div {
   padding-right: 10px;
 }
 
+body a.pure-button {
+  color: rgba(0,0,0,.8);
+}
+
 button.pure-button-primary,
-a.pure-button-primary,
+body a.pure-button-primary,
 .channel-owner:hover {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
 
 button.pure-button-primary:hover,
-a.pure-button-primary:hover {
+body a.pure-button-primary:hover {
   background-color: rgba(0, 182, 240, 1);
   color: #fff;
 }
@@ -282,7 +286,7 @@ input[type="search"]::-webkit-search-cancel-button {
   text-align: center;
 }
 
-.footer a {
+body .footer a {
   color: inherit;
   text-decoration: underline;
 }
@@ -485,3 +489,142 @@ video.video-js {
   margin-top: -0.81666em;
   margin-left: -1.5em;
 }
+
+/*
+ * Light theme
+ */
+
+.light-theme a:hover,
+.light-theme a:active {
+  color: #075A9E !important;
+}
+
+.light-theme a.pure-button-primary:hover {
+  color: #fff !important;
+}
+
+.light-theme a {
+  color: #335d7a;
+  text-decoration: none;
+}
+
+/* All links that do not fit with the default color goes here */
+.light-theme a:not([data-id]) > .icon,
+.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+.light-theme .playlist-restricted > ol > li > a {
+  color: #303030;
+}
+
+.light-theme .pure-menu-heading {
+  color: #565d64;
+}
+
+@media (prefers-color-scheme: light) {
+  .no-theme a:hover,
+  .no-theme a:active {
+    color: #075A9E !important;
+  }
+
+  .no-theme a.pure-button-primary:hover {
+    color: #fff !important;
+  }
+
+  .no-theme a {
+    color: #335d7a;
+    text-decoration: none;
+  }
+
+  /* All links that do not fit with the default color goes here */
+  .no-theme a:not([data-id]) > .icon,
+  .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+  .no-theme .playlist-restricted > ol > li > a {
+    color: #303030;
+  }
+
+  .light-theme .pure-menu-heading {
+    color: #565d64;
+  }
+}
+
+/*
+ * Dark theme
+ */
+
+.dark-theme a:hover,
+.dark-theme a:active {
+  color: rgb(0, 182, 240);
+}
+
+.dark-theme a {
+  color: #a0a0a0;
+  text-decoration: none;
+}
+
+body.dark-theme {
+  background-color: rgba(35, 35, 35, 1);
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-form legend {
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-menu-heading {
+  color: #f0f0f0;
+}
+
+.dark-theme input,
+.dark-theme select,
+.dark-theme textarea {
+  color: rgba(35, 35, 35, 1);
+}
+
+.dark-theme .pure-form input[type="file"] {
+  color: #f0f0f0;
+}
+
+.dark-theme .navbar > .searchbar input {
+  background-color: inherit;
+  color: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  .no-theme a:hover,
+  .no-theme a:active {
+    color: rgb(0, 182, 240);
+  }
+
+  .no-theme a {
+    color: #a0a0a0;
+    text-decoration: none;
+  }
+
+  body.no-theme {
+    background-color: rgba(35, 35, 35, 1);
+    color: #f0f0f0;
+  }
+
+  .no-theme .pure-form legend {
+    color: #f0f0f0;
+  }
+
+  .no-theme .pure-menu-heading {
+    color: #f0f0f0;
+  }
+
+  .no-theme input,
+  .no-theme select,
+  .no-theme textarea {
+    color: rgba(35, 35, 35, 1);
+  }
+
+  .no-theme .pure-form input[type="file"] {
+    color: #f0f0f0;
+  }
+
+  .no-theme .navbar > .searchbar input {
+    background-color: inherit;
+    color: inherit;
+  }
+}
+