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, 17 insertions, 11 deletions

diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css
index 92da15b6..45a267cd 100644
--- a/assets/css/darktheme.css
+++ b/assets/css/darktheme.css
@@ -1,37 +1,43 @@
-a:hover,
-a:active {
+/*
+ * Dark theme
+ * Same as (prefers-color-scheme: dark) in default.css
+ */
+
+.dark-theme a:hover,
+.dark-theme a:active {
   color: rgb(0, 182, 240);
 }
 
-a {
+.dark-theme a {
   color: #a0a0a0;
   text-decoration: none;
 }
 
-body {
+body.dark-theme {
   background-color: rgba(35, 35, 35, 1);
   color: #f0f0f0;
 }
 
-.pure-form legend {
+.dark-theme .pure-form legend {
   color: #f0f0f0;
 }
 
-.pure-menu-heading {
+.dark-theme .pure-menu-heading {
   color: #f0f0f0;
 }
 
-input,
-select,
-textarea {
+.dark-theme input,
+.dark-theme select,
+.dark-theme textarea {
   color: rgba(35, 35, 35, 1);
 }
 
-.pure-form input[type="file"] {
+.dark-theme .pure-form input[type="file"] {
   color: #f0f0f0;
 }
 
-.navbar > .searchbar input {
+.dark-theme .navbar > .searchbar input {
   background-color: inherit;
   color: inherit;
 }
+