From e2cd7f4291912dadd4a654bc7917856c58a72a97 Mon Sep 17 00:00:00 2001
From: liruifengv <liruifeng1024@gmail.com>
Date: Wed, 10 Apr 2024 18:58:19 +0800
Subject: [PATCH] fix: Fixed errorOverlay theme toggle bug. (#10661)

* fix: save `localStorage.astroErrorOverlayTheme` when detected dark mode

* add  changeset

* Fix theme toggle in ErrorOverlay

* update  changeset
---
 .changeset/short-flies-itch.md            | 5 +++++
 packages/astro/src/core/errors/overlay.ts | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/short-flies-itch.md

diff --git a/.changeset/short-flies-itch.md b/.changeset/short-flies-itch.md
new file mode 100644
index 000000000000..929bdec522aa
--- /dev/null
+++ b/.changeset/short-flies-itch.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixed errorOverlay theme toggle bug.
diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
index 282c79cd6a21..9bfc562ba46f 100644
--- a/packages/astro/src/core/errors/overlay.ts
+++ b/packages/astro/src/core/errors/overlay.ts
@@ -593,13 +593,14 @@ class ErrorOverlay extends HTMLElement {
 				window.matchMedia('(prefers-color-scheme: dark)').matches)
 		) {
 			this?.classList.add('astro-dark');
+			localStorage.astroErrorOverlayTheme = 'dark';
 			themeToggle!.checked = true;
 		} else {
 			this?.classList.remove('astro-dark');
 			themeToggle!.checked = false;
 		}
 		themeToggle?.addEventListener('click', () => {
-			const isDark = localStorage.astroErrorOverlayTheme === 'dark';
+			const isDark = localStorage.astroErrorOverlayTheme === 'dark' || this?.classList.contains('astro-dark');
 			this?.classList.toggle('astro-dark', !isDark);
 			localStorage.astroErrorOverlayTheme = isDark ? 'light' : 'dark';
 		});