src/components/DarkModeToggle.vue

 <script setup lang="ts">
+import { Check, Moon, Sun } from 'lucide-vue-next'
+import { DropdownMenuItemIndicator } from 'reka-ui'
 // Use builtin store of vueuse for storing the color mode
 const { store } = useColorMode()
 </script>
@@ -6,13 +8,11 @@ const { store } = useColorMode()
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="outline">
-        <Icon
-          icon="radix-icons:moon"
+      <Button variant="ghost" size="icon">
+        <Moon
           class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0 dark:-rotate-90"
         />
-        <Icon
-          icon="radix-icons:sun"
+        <Sun
           class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
         />
         <span class="sr-only">Toggle theme</span>
@@ -20,15 +20,30 @@ const { store } = useColorMode()
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
       <DropdownMenuRadioGroup v-model="store">
-        <DropdownMenuRadioItem value="light">
+        <SettingsDropdownMenuRadioItem value="light">
+          <template #icon>
+            <DropdownMenuItemIndicator>
+              <Check class="h-4 w-4" />
+            </DropdownMenuItemIndicator>
+          </template>
           {{ $t('dark_mode_toggle.light') }}
-        </DropdownMenuRadioItem>
-        <DropdownMenuRadioItem value="dark">
+        </SettingsDropdownMenuRadioItem>
+        <SettingsDropdownMenuRadioItem value="dark">
+          <template #icon>
+            <DropdownMenuItemIndicator>
+              <Check class="h-4 w-4" />
+            </DropdownMenuItemIndicator>
+          </template>
           {{ $t('dark_mode_toggle.dark') }}
-        </DropdownMenuRadioItem>
-        <DropdownMenuRadioItem value="auto">
+        </SettingsDropdownMenuRadioItem>
+        <SettingsDropdownMenuRadioItem value="auto">
+          <template #icon>
+            <DropdownMenuItemIndicator>
+              <Check class="h-4 w-4" />
+            </DropdownMenuItemIndicator>
+          </template>
           {{ $t('dark_mode_toggle.system') }}
-        </DropdownMenuRadioItem>
+        </SettingsDropdownMenuRadioItem>
       </DropdownMenuRadioGroup>
     </DropdownMenuContent>
   </DropdownMenu>

src/components/LocaleSwitcher.vue

@@ -17,7 +17,7 @@ const languages = {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost">
+      <Button variant="ghost" size="icon">
         <Flag />
       </Button>
     </DropdownMenuTrigger>