style(portal): default to light theme

Light is now the default for new visitors/clients (was dark); the toggle still
flips to dark and the choice persists. Also fixed the mobile theme-color meta to
update the actual <meta> tag (was setting a no-op attribute on <html>) and use the
warm paper shade.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 20:42:55 +00:00
parent 505c2e3ca5
commit a555cb74dd
+5 -4
View File
@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Monitoring{% endblock %} · TMI</title> <title>{% block title %}Monitoring{% endblock %} · TMI</title>
<!-- apply saved theme before paint (no flash) --> <!-- apply saved theme before paint (no flash); light is the default -->
<script>(function(){var t=localStorage.getItem('portal-theme')||'dark';document.documentElement.setAttribute('data-theme',t);})();</script> <script>(function(){var t=localStorage.getItem('portal-theme')||'light';document.documentElement.setAttribute('data-theme',t);})();</script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -25,7 +25,7 @@
} }
</script> </script>
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
<meta name="theme-color" content="#080b14"> <meta name="theme-color" content="#f7f5ef">
<style> <style>
/* ---- dark (default) ---- */ /* ---- dark (default) ---- */
@@ -184,7 +184,8 @@
const next = cur === 'light' ? 'dark' : 'light'; const next = cur === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', next); document.documentElement.setAttribute('data-theme', next);
try { localStorage.setItem('portal-theme', next); } catch (e) {} try { localStorage.setItem('portal-theme', next); } catch (e) {}
document.documentElement.setAttribute('content', next === 'light' ? '#eef1f8' : '#080b14'); const mc = document.querySelector('meta[name="theme-color"]');
if (mc) mc.setAttribute('content', next === 'light' ? '#f7f5ef' : '#080b14');
document.dispatchEvent(new CustomEvent('portal-theme', { detail: next })); document.dispatchEvent(new CustomEvent('portal-theme', { detail: next }));
} }
</script> </script>