From 0ac7916a1b62abe065f0cc64419e5fad4cb917a8 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 14 Jan 2025 11:27:17 -0500
Subject: [PATCH] Attempt to fix #514

---
 docs/_includes/base.njk                    | 2 --
 docs/_includes/head.njk                    | 8 ++++----
 docs/assets/scripts/preset-theme-picker.js | 8 ++++++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index b21d537df..b0a97838c 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -83,8 +83,6 @@
           </details>
         </nav>
 
-
-
         {% block header %}
           {% include 'breadcrumbs.njk' %}
           <h1 class="title">{{ title }}</h1>
diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk
index 1121fd1d8..ffaf57bcc 100644
--- a/docs/_includes/head.njk
+++ b/docs/_includes/head.njk
@@ -30,18 +30,18 @@
 
 <script type="module" src="/assets/scripts/theme-picker.js"></script>
 {# Preset Theme #}
-<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
+<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
 {% if not forceTheme %}
 <script>
 if (localStorage.presetTheme) {
 	let preset = localStorage.presetTheme;
-	let script = document.currentScript;
-	let link = script.previousElementSibling;
+	let link = document.getElementById('theme-stylesheet');
 	let newLink = link.cloneNode();
 	newLink.href = link.href.replace("/default.css", `/${preset}.css`);
+	newLink.classList.add('wa-preset-theme');
 	newLink.addEventListener('load', () => {
 		link.remove();
-	});
+	}, { once: true });
 	link.after(newLink);
 }
 </script>
diff --git a/docs/assets/scripts/preset-theme-picker.js b/docs/assets/scripts/preset-theme-picker.js
index b51cfeb9d..5a4c6e377 100644
--- a/docs/assets/scripts/preset-theme-picker.js
+++ b/docs/assets/scripts/preset-theme-picker.js
@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
   key: 'presetTheme',
   picker: 'wa-select.preset-theme-selector',
 
-  applyChange() {
+  applyChange(options = {}) {
     const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
     const oldStylesheet = oldStylesheets.pop();
 
@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({
 
               oldStylesheet.remove();
             },
-            { behavior: 'smooth' },
+            { behavior: 'smooth', ...options },
           );
         },
         { once: true },
@@ -61,4 +61,8 @@ function updateSelectionBeforeTurboLoad(e) {
   document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
 });
 
+window.addEventListener('turbo:render', e => {
+  presetTheme.applyChange({ behavior: 'instant' });
+});
+
 window.presetTheme = presetTheme;