arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-01-17 05:22:16 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
- 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:
FreneticScribbler
2021-02-06 16:40:22 +00:00
parent 0598612c15
commit 4f912932ca
13 changed files with 90 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/base.html
View File

@@ -10,11 +10,14 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#3853a4">
<meta name="color-scheme" content="light dark">
<link rel="icon" type="image/png" href="{% static 'imgs/pyrigs-avatar.png' %}">
<link rel="apple-touch-icon" href="{% static 'imgs/pyrigs-avatar.png' %}">
<link href="{% static 'fonts/OpenSans-Regular.tff' %}">
<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 rel="stylesheet" type="text/css" href="{% static 'css/screen.css' %}">
{% block css %}
{% endblock %}
@@ -77,7 +80,11 @@
</div>
<div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
<script>
if({{ request.user.dark_theme|lower }} || window.matchMedia('(prefers-color-scheme: dark)')) {
document.body.setAttribute('data-theme', 'dark');
}
</script>
<script>
Date.prototype.getISOString = function () {
var yyyy = this.getFullYear().toString();
@@ -123,7 +130,6 @@
easter_egg.load();
});
</script>
<script src="{% static 'js/dark-mode-switch.min.js' %}"></script>
<script>
document.body.addEventListener('keydown', function(e) {
if(e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {

11
templates/base_embed.html
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>