Apply dark theme immediately

Themes are now controlled with a class on the body element.

If a preference is set the body element will have either "dark-theme"
or "light-theme" class. If no preference is set or the preference is
empty the class will be "no-theme".

"dark-theme" and "light-theme" are handled by darktheme.css and
lighttheme.css respectively.

"no-theme" is handled by default.css where depending on the value of
"prefers-color-scheme" the styles corresponding to "dark-theme" or
"light-theme" are applied.

Unfortunately this means that both themes are duplicated, once in the
theme .css and once in default.css.

1 files changed, 65 insertions, 0 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index b7a77be6..ccdd7660 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -485,3 +485,68 @@ video.video-js {
   margin-top: -0.81666em;
   margin-left: -1.5em;
 }
+
+/*
+ * Automatic theme support
+ * Same as lighttheme.css and darktheme.css
+ */
+
+@media (prefers-color-scheme: light) {
+  .no-theme a:hover,
+  .no-theme a:active {
+    color: #167ac6 !important;
+  }
+
+  .no-theme a {
+    color: #61809b;
+    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;
+  }
+}
+
+@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;
+  }
+}
+