From 16e69ff072e6f7e63193a63ac83c404dd5498eae Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Tue, 19 May 2026 21:53:33 +0200
Subject: [PATCH] Add translations for the color scheme button

---
 .../components/ColorSchemeButton.vue          | 19 ++++++++++---------
 src/locales/en.json                           |  9 +++++++++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index ccda3c5..7a25065 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -16,6 +16,9 @@ limitations under the License.
 
 <script setup>
 import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const colorScheme = inject('colorScheme');
 
@@ -25,24 +28,22 @@ const colorSchemeNextMapper = {
     'auto': 'light'
 };
 
-const colorSchemeTextMapper = {
-    'light': 'Switch to light mode',
-    'dark': 'Switch to dark mode',
-    'auto': 'Switch to the system scheme'
-}
-
 const colorSchemeIconMapper = {
     'dark': '⏾',
     'light': '☀',
     'auto': '◐'
-}
+};
+
+const getTooltipTranslation = function (colorScheme) {
+    return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
+};
 </script>
 
 <template>
     <button class="color-scheme-button"
         @click="colorScheme = colorSchemeNextMapper[colorScheme]"
-        :aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
-        :title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+        :aria-label="getTooltipTranslation(colorScheme)"
+        :title="getTooltipTranslation(colorScheme)"
     >
         {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
     </button>
diff --git a/src/locales/en.json b/src/locales/en.json
index 6d8b504..0960a97 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -16,5 +16,14 @@
         "back": {
             "search": "Back to Search"
         }
+    },
+    "preferences": {
+        "colorScheme": {
+            "switch": {
+                "light": "Switch to light mode",
+                "dark": "Switch to dark mode",
+                "auto": "Switch to the system color scheme"
+            }
+        }
     }
 }
\ No newline at end of file