Merge branch 'main' into bug/colors

2026-05-22 17:46:56 +02:00
parent 1c7a0c0e58 9aecc195a9
commit f808525d56
19 changed files with 683 additions and 24 deletions
@@ -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>