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, 12 insertions, 6 deletions

diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css
index 73706bb7..7452180b 100644
--- a/assets/css/lighttheme.css
+++ b/assets/css/lighttheme.css
@@ -1,16 +1,22 @@
-a:hover,
-a:active {
+/*
+ * Light theme
+ * Same as (prefers-color-scheme: light) in default.css
+ */
+
+.light-theme a:hover,
+.light-theme a:active {
   color: #167ac6 !important;
 }
 
-a {
+.light-theme a {
   color: #61809b;
   text-decoration: none;
 }
 
 /* All links that do not fit with the default color goes here */
-a:not([data-id]) > .icon,
-.pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
-.playlist-restricted > ol > li > a {
+.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;
 }
+