From e1bd095682d4f8968bbf2c36dd867560c2ff0a0c Mon Sep 17 00:00:00 2001
From: Kris Parish <kris.parish@icloud.com>
Date: Fri, 3 Jul 2026 03:13:22 -0500
Subject: [PATCH] Use color swatches for the theme control instead of icons

---
 app/src/shell/components/UserMenu.vue | 42 ++++++++++++++++++---------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/src/shell/components/UserMenu.vue b/app/src/shell/components/UserMenu.vue
index 236db29..800f912 100644
--- a/app/src/shell/components/UserMenu.vue
+++ b/app/src/shell/components/UserMenu.vue
@@ -63,7 +63,7 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
             title="Light"
             @click="emit('set-theme', 'light')"
           >
-            <span class="dashicons dashicons-sun" />
+            <span class="user-menu__swatch user-menu__swatch--light" />
           </button>
           <button
             type="button"
@@ -71,15 +71,15 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
             title="Dark"
             @click="emit('set-theme', 'dark')"
           >
-            <span class="dashicons dashicons-moon" />
+            <span class="user-menu__swatch user-menu__swatch--dark" />
           </button>
           <button
             type="button"
             :class="{ 'is-active': theme === 'system' }"
-            title="System"
+            title="Match system"
             @click="emit('set-theme', 'system')"
           >
-            <span class="dashicons dashicons-admin-generic" />
+            <span class="user-menu__swatch user-menu__swatch--system" />
           </button>
         </div>
       </div>
@@ -245,22 +245,38 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   border: none;
   background: none;
   border-radius: 6px;
   cursor: pointer;
-  color: var(--aurora-text-muted);
-}
-.user-menu__segmented button .dashicons {
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
+  padding: 3px;
 }
 .user-menu__segmented button.is-active {
   background: var(--aurora-bg);
-  color: var(--aurora-accent);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
+
+.user-menu__swatch {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  border: 1px solid rgba(127, 127, 127, 0.35);
+  box-sizing: border-box;
+}
+.user-menu__swatch--light {
+  background: #ffffff;
+}
+.user-menu__swatch--dark {
+  background: #18181b;
+}
+.user-menu__swatch--system {
+  background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #18181b 50%, #18181b 100%);
+}
+.user-menu__segmented button.is-active .user-menu__swatch {
+  border-color: var(--aurora-accent);
+  box-shadow: 0 0 0 1px var(--aurora-accent);
+}
 </style>