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 1/3] 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">
From ff46c1816483472c2b478a570dceb3b75be6e783 Mon Sep 17 00:00:00 2001 From: saltycrys <73420320+saltycrys@users.noreply.github.com> Date: Tue, 17 Nov 2020 22:53:45 +0100 Subject: [PATCH 2/3] Move themes into default.css Now that themes are controlled with a class instead of setting media="none" on the stylesheet link and both themes already being duplicated in default.css for the automatic themeing it makes sense to have all theme related CSS in the same place. This commit also fixes the missing dark theme on embeds. --- assets/css/darktheme.css | 43 ---------------------- assets/css/default.css | 62 ++++++++++++++++++++++++++++++-- assets/css/lighttheme.css | 22 ------------ src/invidious/views/embed.ecr | 3 +- src/invidious/views/template.ecr | 2 -- 5 files changed, 61 insertions(+), 71 deletions(-) delete mode 100644 assets/css/darktheme.css delete mode 100644 assets/css/lighttheme.css diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css deleted file mode 100644 index 45a267cd..00000000 --- a/assets/css/darktheme.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - * Dark theme - * Same as (prefers-color-scheme: dark) in default.css - */ - -.dark-theme a:hover, -.dark-theme a:active { - color: rgb(0, 182, 240); -} - -.dark-theme a { - color: #a0a0a0; - text-decoration: none; -} - -body.dark-theme { - background-color: rgba(35, 35, 35, 1); - color: #f0f0f0; -} - -.dark-theme .pure-form legend { - color: #f0f0f0; -} - -.dark-theme .pure-menu-heading { - color: #f0f0f0; -} - -.dark-theme input, -.dark-theme select, -.dark-theme textarea { - color: rgba(35, 35, 35, 1); -} - -.dark-theme .pure-form input[type="file"] { - color: #f0f0f0; -} - -.dark-theme .navbar > .searchbar input { - background-color: inherit; - color: inherit; -} - diff --git a/assets/css/default.css b/assets/css/default.css index ccdd7660..75e16841 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -487,10 +487,26 @@ video.video-js { } /* - * Automatic theme support - * Same as lighttheme.css and darktheme.css + * Light theme */ +.light-theme a:hover, +.light-theme a:active { + color: #167ac6 !important; +} + +.light-theme a { + color: #61809b; + text-decoration: none; +} + +/* All links that do not fit with the default color goes here */ +.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; +} + @media (prefers-color-scheme: light) { .no-theme a:hover, .no-theme a:active { @@ -510,6 +526,48 @@ video.video-js { } } +/* + * Dark theme + */ + +.dark-theme a:hover, +.dark-theme a:active { + color: rgb(0, 182, 240); +} + +.dark-theme a { + color: #a0a0a0; + text-decoration: none; +} + +body.dark-theme { + background-color: rgba(35, 35, 35, 1); + color: #f0f0f0; +} + +.dark-theme .pure-form legend { + color: #f0f0f0; +} + +.dark-theme .pure-menu-heading { + color: #f0f0f0; +} + +.dark-theme input, +.dark-theme select, +.dark-theme textarea { + color: rgba(35, 35, 35, 1); +} + +.dark-theme .pure-form input[type="file"] { + color: #f0f0f0; +} + +.dark-theme .navbar > .searchbar input { + background-color: inherit; + color: inherit; +} + @media (prefers-color-scheme: dark) { .no-theme a:hover, .no-theme a:active { diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css deleted file mode 100644 index 7452180b..00000000 --- a/assets/css/lighttheme.css +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Light theme - * Same as (prefers-color-scheme: light) in default.css - */ - -.light-theme a:hover, -.light-theme a:active { - color: #167ac6 !important; -} - -.light-theme a { - color: #61809b; - text-decoration: none; -} - -/* All links that do not fit with the default color goes here */ -.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/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr index 48dbc55f..dbb86009 100644 --- a/src/invidious/views/embed.ecr +++ b/src/invidious/views/embed.ecr @@ -9,12 +9,11 @@ - <%= HTML.escape(video.title) %> - Invidious - +