perf: toggle dark mode before content loads

frappe · Jan 28, 2025 · 214a48a · 214a48a
1 parent 1366b5f
commit 214a48a
Showing 1 changed file with 44 additions and 22 deletions.
diff --git a/wiki/wiki/doctype/wiki_page/templates/base.html b/wiki/wiki/doctype/wiki_page/templates/base.html
@@ -1,64 +1,85 @@
 <!DOCTYPE html>
 <!-- Built on Frappe. https://frappeframework.com/ -->
 <html lang="en">
+
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<meta name="generator" content="frappe">
 
 	{% block meta_block %}
-		{% include "templates/includes/meta_block.html" %}
+	{% include "templates/includes/meta_block.html" %}
 	{% endblock %}
 
 	<title>{% block title %}{{ title | striptags }}{% endblock %}</title>
 
 	{% block favicon %}
-	<link
-		rel="shortcut icon"
-		href="{{ (favicon or "/assets/frappe/images/frappe-favicon.svg") | abs_url }}"
-		type="image/x-icon"
-	>
+	<link rel="shortcut icon" href="{{ (favicon or " /assets/frappe/images/frappe-favicon.svg") | abs_url }}"
+		type="image/x-icon">
 	{% endblock %}
 
 	<link rel="canonical" href="{{ canonical }}">
 
 	{%- block head -%}
-		{% include "templates/includes/head.html" %}
+	{% include "templates/includes/head.html" %}
 	{%- endblock -%}
 
 	{%- block head_include %}
-		{{ head_include or "" }}
+	{{ head_include or "" }}
 	{% endblock -%}
 
 	{%- block style %}
-		{% if colocated_css -%}
-			<style>{{ colocated_css }}</style>
-		{%- endif %}
+	{% if colocated_css -%}
+	<style>
+		{
+				{
+				colocated_css
+			}
+		}
+	</style>
+	{%- endif %}
 	{%- endblock -%}
 
+
 	<script>
 		window.frappe = {};
 		frappe.ready_events = [];
-		frappe.ready = function(fn) {
+		frappe.ready = function (fn) {
 			frappe.ready_events.push(fn);
 		}
 		window.dev_server = {{ dev_server }};
 		window.socketio_port = {{ (frappe.socketio_port or 'null') }};
 		window.show_language_picker = {{ show_language_picker or 'false' }};
 	</script>
 </head>
-<body frappe-session-status="{{ 'logged-in' if frappe.session.user != 'Guest' else 'logged-out'}}" data-path="{{ path | e }}" {%- if template and template.endswith('.md') %} frappe-content-type="markdown" {%- endif %} class="{{ body_class or ''}}">
+
+<body frappe-session-status="{{ 'logged-in' if frappe.session.user != 'Guest' else 'logged-out'}}"
+	data-path="{{ path | e }}" {%- if template and template.endswith('.md') %} frappe-content-type="markdown" {%- endif %}
+	class="{{ body_class or ''}}">
+	<script>
+		const isUserPreferenceDarkMode = localStorage.getItem("darkMode");
+		const isSystemPreferenceDarkMode = window.matchMedia?.(
+			"(prefers-color-scheme: dark)"
+		)?.matches;
+		const darkModeState = isUserPreferenceDarkMode
+			? isUserPreferenceDarkMode == "true"
+			: isSystemPreferenceDarkMode;
+		if (darkModeState) {
+			document.body.classList.add("dark");
+		}
+	</script>
+
 	{% include "public/icons/timeless/icons.svg" %}
 	{%- block banner -%}
-		{% include "templates/includes/banner_extension.html" ignore missing %}
+	{% include "templates/includes/banner_extension.html" ignore missing %}
 
-		{% if banner_html -%}
-		{{ banner_html or "" }}
-		{%- endif %}
+	{% if banner_html -%}
+	{{ banner_html or "" }}
+	{%- endif %}
 	{%- endblock -%}
 
 	{% block content %}
-		{{ content }}
+	{{ content }}
 	{% endblock %}
 
 	{% block base_scripts %}
@@ -76,11 +97,12 @@
 	{%- endfor -%}
 
 	{%- block script %}
-		{% if colocated_js -%}
-			<script>{{ colocated_js }}</script>
-		{%- endif %}
+	{% if colocated_js -%}
+	<script>{ { colocated_js } }</script>
+	{%- endif %}
 	{%- endblock %}
 	<!-- csrf_token -->
 	{%- block body_include %}{{ body_include or "" }}{% endblock -%}
 </body>
-</html>
+
+</html>