From 4e4492bc01771a710eff1f85bc10cf6cb68ddf76 Mon Sep 17 00:00:00 2001
From: FreneticScribbler <aj@aronajones.com>
Date: Mon, 22 Feb 2021 11:26:37 +0000
Subject: [PATCH] Load dark css only when required

---
 templates/base.html       | 4 ++--
 templates/base_embed.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index b2b054a8..96f7ae5e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,7 +17,6 @@
     <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 %}
@@ -80,12 +79,13 @@
 </div>
 
 <div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
+<script src="{% static 'js/base.js' %}"></script>
 <script>
 if({{ request.user.dark_theme|lower }} || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    $('<link>').appendTo('head').attr({type : 'text/css', rel : 'stylesheet'}).attr('href', '{% static "css/dark_screen.css" %}');
     document.body.setAttribute('data-theme', 'dark');
 }
 </script>
-<script src="{% static 'js/base.js' %}"></script>
 {% block js %}
 {% endblock %}
 </body>
diff --git a/templates/base_embed.html b/templates/base_embed.html
index 9cb776cb..93039b6f 100644
--- a/templates/base_embed.html
+++ b/templates/base_embed.html
@@ -10,7 +10,6 @@
     <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' %}">
 
@@ -37,7 +36,8 @@
     </div>
 </div>
 <script>
-if({{ request.user.dark_theme|lower }} || window.matchMedia('(prefers-color-scheme: dark)')) {
+if({{ request.user.dark_theme|lower }} || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    $('<link>').appendTo('head').attr({type : 'text/css', rel : 'stylesheet'}).attr('href', '{% static "css/dark_screen.css" %}');
     document.body.setAttribute('data-theme', 'dark');
 }
 </script>