From 56bb68ccd0d63d0d38d48c0b5827b9044d5caeb1 Mon Sep 17 00:00:00 2001
From: Wild Karl-Heinz <kh.wild@wicom.li>
Date: Thu, 10 Sep 2026 00:17:14 +0200
Subject: [PATCH] Show the theme selector as icons instead of text

The toolbar's theme-cycling button ("Theme: Auto") and the Settings
panel's Auto/Hell/Dunkel segmented control now use icons -- a sun, a
moon, and a half-filled circle for "follows system" -- drawn in this
project's existing hand-drawn SVG icon set (ToolbarIcon.vue) rather than
a new icon system or emoji. Tooltips/aria-labels keep the full text for
accessibility; the toolbar button's click-to-cycle behavior is
unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/AppToolbar.vue    | 14 ++++++++++++--
 src/components/SettingsPanel.vue | 28 +++++++++++++++++++++++++---
 src/components/ToolbarIcon.vue   | 26 +++++++++++++++++++++++++-
 3 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index 9d485af..aa9a016 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -8,7 +8,7 @@ import CustomFunctionsModal from './CustomFunctionsModal.vue';
 import NamedRangesModal from './NamedRangesModal.vue';
 import MacrosModal from './MacrosModal.vue';
 import TheLogo from './TheLogo.vue';
-import ToolbarIcon from './ToolbarIcon.vue';
+import ToolbarIcon, { type ToolbarIconName } from './ToolbarIcon.vue';
 import { WICOM, WICOM_SOCIAL } from '../config/brand';
 import {
   exportJson,
@@ -42,6 +42,9 @@ const addr = `${WICOM.address.street}, ${WICOM.address.city}, ${WICOM.address.co
 const themeLabel = computed(
   () => ({ system: 'Auto', light: 'Hell', dark: 'Dunkel' })[themeMode.value],
 );
+const themeIcon = computed(
+  () => ({ system: 'auto', light: 'sun', dark: 'moon' })[themeMode.value] as ToolbarIconName,
+);
 
 // ---- insert objects ------------------------------------------------
 function insertTable() {
@@ -299,7 +302,14 @@ function onReset() {
       </ul>
     </div>
 
-    <button class="btn" @click="cycleTheme">Theme: {{ themeLabel }}</button>
+    <button
+      class="ibtn"
+      :title="`Theme: ${themeLabel} (klicken zum Wechseln)`"
+      :aria-label="`Theme: ${themeLabel}`"
+      @click="cycleTheme"
+    >
+      <ToolbarIcon :name="themeIcon" />
+    </button>
     <button class="btn" @click="onReset">Zurücksetzen</button>
 
     <input ref="fileInput" type="file" accept=".json,.csv,.xlsx" hidden @change="onFileChosen" />
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
index 80b9292..6b207d5 100644
--- a/src/components/SettingsPanel.vue
+++ b/src/components/SettingsPanel.vue
@@ -11,6 +11,7 @@ import { useTheme } from '../composables/useTheme';
 import { NUMBER_LOCALES, NUM_FORMATS } from '../store/format';
 import type { CellFormat, HAlign } from '../store/types';
 import { DEFAULT_GRID_SIZE, MIN_GRID_SIZE, MAX_GRID_SIZE } from '../store/types';
+import ToolbarIcon from './ToolbarIcon.vue';
 
 const store = useDocument();
 const { mode: themeMode } = useTheme();
@@ -512,9 +513,30 @@ function resetDoc() {
         <label class="f">
           <span>Erscheinungsbild</span>
           <div class="seg">
-            <button :class="{ on: themeMode === 'system' }" @click="themeMode = 'system'">Auto</button>
-            <button :class="{ on: themeMode === 'light' }" @click="themeMode = 'light'">Hell</button>
-            <button :class="{ on: themeMode === 'dark' }" @click="themeMode = 'dark'">Dunkel</button>
+            <button
+              :class="{ on: themeMode === 'system' }"
+              title="Auto (folgt dem System)"
+              aria-label="Auto (folgt dem System)"
+              @click="themeMode = 'system'"
+            >
+              <ToolbarIcon name="auto" />
+            </button>
+            <button
+              :class="{ on: themeMode === 'light' }"
+              title="Hell"
+              aria-label="Hell"
+              @click="themeMode = 'light'"
+            >
+              <ToolbarIcon name="sun" />
+            </button>
+            <button
+              :class="{ on: themeMode === 'dark' }"
+              title="Dunkel"
+              aria-label="Dunkel"
+              @click="themeMode = 'dark'"
+            >
+              <ToolbarIcon name="moon" />
+            </button>
           </div>
         </label>
         <label class="f">
diff --git a/src/components/ToolbarIcon.vue b/src/components/ToolbarIcon.vue
index 788c43a..fda27be 100644
--- a/src/components/ToolbarIcon.vue
+++ b/src/components/ToolbarIcon.vue
@@ -15,7 +15,10 @@ export type ToolbarIconName =
   | 'text'
   | 'tag'
   | 'button'
-  | 'macro';
+  | 'macro'
+  | 'sun'
+  | 'moon'
+  | 'auto';
 
 defineProps<{ name: ToolbarIconName }>();
 </script>
@@ -87,6 +90,27 @@ defineProps<{ name: ToolbarIconName }>();
     <template v-else-if="name === 'macro'">
       <polygon points="6,4 20,12 6,20" fill="currentColor" stroke="none" />
     </template>
+
+    <template v-else-if="name === 'sun'">
+      <circle cx="12" cy="12" r="4.5" />
+      <line x1="12" y1="2.5" x2="12" y2="5" />
+      <line x1="12" y1="19" x2="12" y2="21.5" />
+      <line x1="2.5" y1="12" x2="5" y2="12" />
+      <line x1="19" y1="12" x2="21.5" y2="12" />
+      <line x1="4.9" y1="4.9" x2="6.7" y2="6.7" />
+      <line x1="17.3" y1="17.3" x2="19.1" y2="19.1" />
+      <line x1="4.9" y1="19.1" x2="6.7" y2="17.3" />
+      <line x1="17.3" y1="6.7" x2="19.1" y2="4.9" />
+    </template>
+
+    <template v-else-if="name === 'moon'">
+      <path d="M20 14.5A8.5 8.5 0 1 1 9.5 4 6.6 6.6 0 0 0 20 14.5Z" fill="currentColor" stroke="none" />
+    </template>
+
+    <template v-else-if="name === 'auto'">
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 3.5 A8.5 8.5 0 0 1 12 20.5 Z" fill="currentColor" stroke="none" />
+    </template>
   </svg>
 </template>