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.
4 years ago · de777907f2
parent aeed7deb2d
commit de777907f2
5 changed files with 108 additions and 25 deletions
--- 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;
 }
+
--- 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;
+  }
+}
+
--- 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;
 }
+
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme');
 toggle_theme.href = 'javascript:void(0);';

 toggle_theme.addEventListener('click', function () {
-    var dark_mode = document.getElementById('dark_theme').media === 'none';
+    var dark_mode = document.body.classList.contains("light-theme");

    var url = '/toggle_theme?redirect=false';
    var xhr = new XMLHttpRequest();
@ -22,7 +22,7 @@ window.addEventListener('storage', function (e) {
    }
 });

-window.addEventListener('load', function () {
+window.addEventListener('DOMContentLoaded', function () {
    window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
    // Update localStorage if dark mode preference changed on preferences page
    update_mode(window.localStorage.dark_mode);
@ -50,13 +50,18 @@ function scheme_switch (e) {
 }

 function set_mode (bool) {
-    document.getElementById('dark_theme').media = !bool ? 'none' : '';
-    document.getElementById('light_theme').media = bool ? 'none' : '';
-
    if (bool) {
+        // dark
        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
+        document.body.classList.remove('no-theme');
+        document.body.classList.remove('light-theme');
+        document.body.classList.add('dark-theme');
    } else {
+        // light
        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
+        document.body.classList.remove('no-theme');
+        document.body.classList.remove('dark-theme');
+        document.body.classList.add('light-theme');
    }
 }

--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@ -18,13 +18,14 @@
    <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
    <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
-    <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>"  id="dark_theme" <% if env.get("preferences").as(Preferences).dark_mode != "dark" %>media="none"<% end %>>
-    <link rel="stylesheet" href="/css/lighttheme.css?v=<%= ASSET_COMMIT %>" id="light_theme" <% if env.get("preferences").as(Preferences).dark_mode == "dark" %>media="none"<% end %>>
+    <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/css/lighttheme.css?v=<%= ASSET_COMMIT %>">
 </head>

 <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
+<% dark_mode = env.get("preferences").as(Preferences).dark_mode %>

-<body>
+<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
    <span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-2-24"></div>