From de777907f2835dc79cb1955fa623928ae3a47aaa Mon Sep 17 00:00:00 2001 From: saltycrys <73420320+saltycrys@users.noreply.github.com> Date: Mon, 16 Nov 2020 04:19:41 +0100 Subject: [PATCH] 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. --- assets/css/darktheme.css | 28 ++++++++------ assets/css/default.css | 65 ++++++++++++++++++++++++++++++++ assets/css/lighttheme.css | 18 ++++++--- assets/js/themes.js | 15 +++++--- src/invidious/views/template.ecr | 7 ++-- 5 files changed, 108 insertions(+), 25 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; } + 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; + } +} + 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; } + diff --git a/assets/js/themes.js b/assets/js/themes.js index c600073d..543b849e 100644 --- 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'); } } diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 61cf5c3a..558f896e 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -18,13 +18,14 @@ - media="none"<% end %>> - media="none"<% end %>> + + <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %> +<% dark_mode = env.get("preferences").as(Preferences).dark_mode %> - +-theme">