From 64d6fadb642079030c1ba04a1112f3d7b2c116ea Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:13:11 +1200
Subject: [PATCH] improve light/dark theme default for anonymous users

---
 app/static/js/scripts.js | 20 ++++++++++++++++++++
 app/templates/base.html  | 23 +----------------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
index 40a1a6b3..a9bb2ed1 100644
--- a/app/static/js/scripts.js
+++ b/app/static/js/scripts.js
@@ -1,3 +1,22 @@
+const getStoredTheme = () => localStorage.getItem('theme');
+const setStoredTheme = theme => localStorage.setItem('theme', theme);
+
+const getPreferredTheme = () => {
+  const storedTheme = getStoredTheme()
+  if (storedTheme) {
+    return storedTheme
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+}
+
 // fires after DOM is ready for manipulation
 document.addEventListener("DOMContentLoaded", function () {
     setupCommunityNameInput();
@@ -7,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
     setupTimeTracking();
     setupMobileNav();
     setupLightDark();
+    setTheme(getPreferredTheme());
     setupKeyboardShortcuts();
     setupTopicChooser();
     setupConversationChooser();
diff --git a/app/templates/base.html b/app/templates/base.html
index aa13c8e1..c5c42b8b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -52,6 +52,7 @@
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="HandheldFriendly" content="True">
         <meta name="MobileOptimized" content="320">
+        <link rel="expect" blocking="render" href="#navbarSupportedContent">
         {% block styles -%}
             {{ bootstrap.load_css() }}
             <link href="{{ url_for('static', filename='styles.css', changed=getmtime('styles.css')) }}" type="text/css" rel="stylesheet" />
@@ -89,28 +90,6 @@
         {% if noindex -%}
             <meta name="robots" content="noindex">
         {% endif -%}
-        <script nonce="{{ session['nonce']}}">
-            const getStoredTheme = () => localStorage.getItem('theme')
-            const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
-            const getPreferredTheme = () => {
-              const storedTheme = getStoredTheme()
-              if (storedTheme) {
-                return storedTheme
-              }
-              return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-            }
-
-            const setTheme = theme => {
-                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                  document.documentElement.setAttribute('data-bs-theme', 'dark')
-                } else {
-                  document.documentElement.setAttribute('data-bs-theme', theme)
-                }
-            }
-
-            setTheme(getPreferredTheme());
-        </script>
       {% if preconnect and not low_bandwidth -%}
         <link rel="preconnect" href='{{ preconnect }}'>
       {% endif -%}