Make dark theme a user level property, lazy load dark CSS

- Also now respects the colour-scheme media query
- Added meta tag to tell the browser we support dark theme, allowing dark UA stylesheet if the user sends said media query
- Means you only have to set it once per account rather than once per machine
- Dark themed embeds!
This commit is contained in:
2021-02-06 16:40:22 +00:00
parent 0598612c15
commit 4f912932ca
13 changed files with 90 additions and 71 deletions

View File

@@ -7,8 +7,10 @@
lang="{% firstof LANGUAGE_CODE 'en' %}"
class="embedded">
<head>
<base target="_blank" />
<!-- Open all links in a new tab, not in the iframe -->
<base target="_blank" /><!-- Open all links in a new tab, not in the iframe -->
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" type="text/css" href="{% static 'css/dark_screen.css' %}" {% if not request.user.dark_theme %}media="(prefers-color-scheme: dark)"{% endif %}>
<link href="{% static 'fonts/OpenSans-Regular.tff' %}">
@@ -34,6 +36,11 @@
{% endblock %}
</div>
</div>
<script>
if({{ request.user.dark_theme|lower }} || window.matchMedia('(prefers-color-scheme: dark)')) {
document.body.setAttribute('data-theme', 'dark');
}
</script>
{% block js %}
{% endblock %}
</body>