Merge pull request #4270 from pranavmangal/prefer-user-theme

Prefer user selected theme over system theme
duckdb · Dec 6, 2024 · 341f255 · 341f255
2 parents 5332a58 + 63141bf
commit 341f255
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 45 deletions.
diff --git a/_layouts/community_extension_doc.html b/_layouts/community_extension_doc.html
@@ -23,15 +23,7 @@
 
 	{% seo title=false %}
 
-	<script>
-		var userPrefersDark = localStorage.getItem('mode') === 'dark';
-		var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-		if (userPrefersDark || systemPrefersDark) {
-			document.documentElement.classList.add('darkmode');
-			document.documentElement.classList.add('disable-transitions');
-		}
-	</script>
-
+	<script src="{{ site.baseurl }}/js/determine_color_scheme.js?{{ site.data['hash'] }}"></script>
 </head>
 
 <body class="documentation communityextensions{% if page.body_class %} {{ page.body_class }} {% endif %}">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -32,15 +32,7 @@
 
 	{% seo title=false %}
 
-	<script>
-		var userPrefersDark = localStorage.getItem('mode') === 'dark';
-		var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-		if (userPrefersDark || systemPrefersDark) {
-			document.documentElement.classList.add('darkmode');
-			document.documentElement.classList.add('disable-transitions');
-		}
-	</script>
-
+	<script src="{{ site.baseurl }}/js/determine_color_scheme.js?{{ site.data['hash'] }}"></script>
 </head>
 <body {% if page.body_class %} class="{{ page.body_class }}" {% endif %}>
 

diff --git a/_layouts/docu.html b/_layouts/docu.html
@@ -31,16 +31,8 @@
 	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
 
 	{% seo title=false %}
-
-	<script>
-		var userPrefersDark = localStorage.getItem('mode') === 'dark';
-		var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-		if (userPrefersDark || systemPrefersDark) {
-			document.documentElement.classList.add('darkmode');
-			document.documentElement.classList.add('disable-transitions');
-		}
-	</script>
 
+	<script src="{{ site.baseurl }}/js/determine_color_scheme.js?{{ site.data['hash'] }}"></script>
 </head>
 
 {% capture issue_title %}Issue found on page '{{ page.title }}'{% endcapture %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -36,15 +36,7 @@
 		{% seo title=false %}
 	{% endif %}
 
-	<script>
-		var userPrefersDark = localStorage.getItem('mode') === 'dark';
-		var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-		if (userPrefersDark || systemPrefersDark) {
-			document.documentElement.classList.add('darkmode');
-			document.documentElement.classList.add('disable-transitions');
-		}
-	</script>
-
+	<script src="{{ site.baseurl }}/js/determine_color_scheme.js?{{ site.data['hash'] }}"></script>
 </head>
 <body {% if page.body_class %} class="{{ page.body_class }}" {% endif %}>
 

diff --git a/_layouts/postarchive.html b/_layouts/postarchive.html
@@ -36,15 +36,7 @@
 		{% seo title=false %}
 	{% endif %}
 
-	<script>
-		var userPrefersDark = localStorage.getItem('mode') === 'dark';
-		var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-		if (userPrefersDark || systemPrefersDark) {
-			document.documentElement.classList.add('darkmode');
-			document.documentElement.classList.add('disable-transitions');
-		}
-	</script>
-
+	<script src="{{ site.baseurl }}/js/determine_color_scheme.js?{{ site.data['hash'] }}"></script>
 </head>
 <body {% if page.body_class %} class="{{ page.body_class }}" {% endif %}>
 

diff --git a/js/determine_color_scheme.js b/js/determine_color_scheme.js
@@ -0,0 +1,18 @@
+(function() {
+    function setDarkMode() {
+        document.documentElement.classList.add("darkmode");
+        document.documentElement.classList.add('disable-transitions')
+    }
+
+    const userColorSchemePref = localStorage.getItem("mode");
+    if (userColorSchemePref !== null) {
+        // Use user preference
+        return userColorSchemePref === 'dark' && setDarkMode();
+    }
+
+    // Fallback to system preference
+    var systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (systemPrefersDark) {
+        setDarkMode()
+    }
+})();