From c74ab1db07057457a43a9356d5109522741df798 Mon Sep 17 00:00:00 2001
From: Rudy Celekli <47457359+rudycelekli@users.noreply.github.com>
Date: Mon, 5 Oct 2026 12:21:00 -0400
Subject: [PATCH] Make UX Architect theme toggles work when clicking nested
 labels

Signed-off-by: Rudy Celekli <47457359+rudycelekli@users.noreply.github.com>
---
 design/design-ux-architect.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/design/design-ux-architect.md b/design/design-ux-architect.md
index 06c0e09e..4b231826 100644
--- a/design/design-ux-architect.md
+++ b/design/design-ux-architect.md
@@ -246,9 +246,13 @@ class ThemeManager {
     const toggle = document.querySelector('.theme-toggle');
     if (toggle) {
       toggle.addEventListener('click', (e) => {
-        if (e.target.matches('.theme-toggle-option')) {
-          const newTheme = e.target.dataset.theme;
-          this.applyTheme(newTheme);
+        const option = e.target instanceof Element
+          ? e.target.closest('.theme-toggle-option') : null;
+        if (option && toggle.contains(option)) {
+          const newTheme = option.dataset.theme;
+          if (['system', 'light', 'dark'].includes(newTheme)) {
+            this.applyTheme(newTheme);
+          }
         }
       });
     }