From 54090751a547cab6a09f7ba512feb6fb1058c978 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Sun, 31 May 2026 23:21:22 +0200
Subject: [PATCH] feat(icons): use icons at the color scheme button

---
 .../colorScheme/components/ColorSchemeButton.vue    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index 7f4e47e..4f4c228 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -29,9 +31,9 @@ const colorSchemeNextMapper = {
 };
 
 const colorSchemeIconMapper = {
-    'dark': '⏾',
-    'light': '☀',
-    'auto': '◐'
+    'dark': 'crescent-moon',
+    'light': 'sun',
+    'auto': 'circle-black-white'
 };
 
 const getTooltipTranslation = function (colorScheme) {
@@ -45,7 +47,10 @@ const getTooltipTranslation = function (colorScheme) {
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >
-        {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
+        <Icon
+            :name="colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]]"
+            size="16"
+        />
     </button>
 </template>