From 7f4e4dab405e3513e8ba530cc60a6c2eac4ef5e9 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Wed, 23 Jul 2025 04:25:22 +0800
Subject: [PATCH] fix(a11y): prevent zen mode toggle requiring double-click

Add state comparison in applyZenMode to only toggle when
current state differs from desired state
---
 assets/js/a11y.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/js/a11y.js b/assets/js/a11y.js
index a1ed58eb..3117ae72 100644
--- a/assets/js/a11y.js
+++ b/assets/js/a11y.js
@@ -51,9 +51,13 @@ const applyUnderlineLinks = (enabled) => {
 };
 
 const applyZenMode = (enabled) => {
-  if (enabled && typeof _toggleZenMode === 'function') {
+  const body = document.querySelector("body");
+  const isZenModeActive = body && body.classList.contains("zen-mode-enable");
+
+  // Toggle only if current state doesn't match desired state
+  if (enabled !== isZenModeActive) {
     const zenModeCheckbox = document.querySelector('[id$="zen-mode"]');
-    if (zenModeCheckbox) {
+    if (zenModeCheckbox && typeof _toggleZenMode === "function") {
       _toggleZenMode(zenModeCheckbox, { scrollToHeader: false });
     }
   }
@@ -135,9 +139,9 @@ const initA11yPanel = (prefix = "") => {
   checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", e.target.checked));
   checkboxUnderline.addEventListener("change", (e) => updateA11ySetting("underlineLinks", e.target.checked));
   checkboxZenMode.addEventListener("change", (e) => {
-    updateA11ySetting("zenMode", e.target.checked)
-    _toggleZenMode(checkboxZenMode, { scrollToHeader: false })
-  })
+    // Only save setting, let applyZenMode handle the toggle logic
+    updateA11ySetting("zenMode", e.target.checked);
+  });
   fontSizeSelect.addEventListener("change", (e) => {
     // Remove fontSize from localStorage when default is selected
     if (e.target.value === "default") {