From 404ee080a6e20e59a345acf52034094c2b7d6ee6 Mon Sep 17 00:00:00 2001 From: Konstantin Mikhailov Date: Sat, 11 Jan 2020 05:26:58 +1000 Subject: [PATCH] Fix for white flashes (#3) * Detect dark mode in CSS We duplicated css code a bit but instead users won't see white flashes when they navigate around the site. Also as the result might be able to override their system-wide dark mode settings with the theme switcher. * Apply theme attribute as early as possible This change resolves the flashing issue for visitors who used theme switcher. --- static/css/theme.css | 34 ++++++++++++++++++++++------------ static/js/main.js | 18 ++++++++---------- templates/layout.html | 8 +++++++- 3 files changed, 37 insertions(+), 23 deletions(-) diff --git a/static/css/theme.css b/static/css/theme.css index 883754e..ff63ef6 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1,11 +1,4 @@ -body { - font-family: 'Nunito', sans-serif; - font-size: 16px; - line-height: 1.3; - transition: all linear .2s; -} - -.light-theme { +html, html[theme="light"] { --bg-color: #FFF; --opposite-bg-color: #282c35; @@ -15,12 +8,9 @@ body { --link-color: #333; --visited-link-color: #afafaf; - - color: var(--text-color); - background-color: var(--bg-color); } -.dark-theme { +html[theme="dark"] { --bg-color: #282c35; --opposite-bg-color: #FFF; @@ -30,7 +20,27 @@ body { --link-color: #DDD; --visited-link-color: #737373; +} +@media (prefers-color-scheme: dark) { + html { + --bg-color: #282c35; + --opposite-bg-color: #FFF; + + --text-color: #DDD; + --brighter-text-color: #FFF; + --opposite-text-color: #333; + + --link-color: #DDD; + --visited-link-color: #737373; + } +} + +body { + font-family: 'Nunito', sans-serif; + font-size: 16px; + line-height: 1.3; + transition: all linear .2s; color: var(--text-color); background-color: var(--bg-color); } diff --git a/static/js/main.js b/static/js/main.js index dcae22d..c835cdf 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -2,20 +2,18 @@ function initializeThemeSwitcher() { const themeSwitch = document.querySelector('.theme-switcher input[type="checkbox"]'); themeSwitch.addEventListener("change", function(e) { + let theme = 'light'; if (e.target.checked) { - document.body.className = "dark-theme"; - localStorage.setItem("theme", "dark"); - } else { - document.body.className = "light-theme"; - localStorage.setItem("theme", "light"); + theme = 'dark'; } + + document.documentElement.setAttribute('theme', theme); + localStorage.setItem('theme', theme); }, false); - const isDarkOS = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - const theme = localStorage.getItem("theme"); - if ((theme === "dark" || isDarkOS) && theme !== "light") { - document.body.className = "dark-theme"; - themeSwitch.checked = true; + const theme = localStorage.getItem('theme'); + if (theme !== null) { + themeSwitch.checked = (theme === 'dark'); } } diff --git a/templates/layout.html b/templates/layout.html index f3909cd..616d036 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -2,6 +2,12 @@ {% load static %} + {% block title %}{{ settings.APP_NAME|safe }}{% endblock %} {% block meta %} {% include "common/meta.html" %} @@ -9,7 +15,7 @@ {% include "common/favicon.html" %} {% include "common/css.html" %} - + {% block body %} {% block menu %}