upagge/infomate.club
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for white flashes (#3)

Browse Source 
* 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.
This commit is contained in:
Konstantin Mikhailov
2020-01-11 05:26:58 +10:00
committed by Vasily Zubarev
parent 00951715f9
commit 404ee080a6
3 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/css/theme.css
View File

@@ -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);
}

18
static/js/main.js
View File

@@ -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');
}
}

8
templates/layout.html
View File

@@ -2,6 +2,12 @@
{% load static %}
<html lang="ru">
<head>
<script>
const theme = localStorage.getItem('theme');
if (theme !== null) {
document.documentElement.setAttribute('theme', theme);
}
</script>
<title>{% block title %}{{ settings.APP_NAME|safe }}{% endblock %}</title>
{% block meta %}
{% include "common/meta.html" %}
@@ -9,7 +15,7 @@
{% include "common/favicon.html" %}
{% include "common/css.html" %}
</head>
<body class="light-theme">
<body>
{% block body %}
{% block menu %}