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 92da15b67..45a267cd2 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 b7a77be62..ccdd7660e 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 73706bb79..7452180bc 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 c600073d0..543b849e6 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 61cf5c3ac..558f896e4 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 45a267cd2..000000000 --- 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 ccdd7660e..75e168416 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 7452180bc..000000000 --- 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 48dbc55f9..dbb860094 100644 --- a/src/invidious/views/embed.ecr +++ b/src/invidious/views/embed.ecr @@ -9,12 +9,11 @@ - <%= HTML.escape(video.title) %> - Invidious - +