diff --git a/frontend/src/components/settings/Themes.vue b/frontend/src/components/settings/Themes.vue
index a2ccfa6b..d440336c 100644
--- a/frontend/src/components/settings/Themes.vue
+++ b/frontend/src/components/settings/Themes.vue
@@ -1,18 +1,25 @@
 <template>
   <select v-on:change="change" :value="theme">
-    <option value="">{{ $t("settings.themes.light") }}</option>
-    <option value="dark">{{ $t("settings.themes.dark") }}</option>
+    <option value="">{{ t("settings.themes.light") }}</option>
+    <option value="dark">{{ t("settings.themes.dark") }}</option>
   </select>
 </template>
 
-<script>
-export default {
-  name: "themes",
-  props: ["theme"],
-  methods: {
-    change(event) {
-      this.$emit("update:theme", event.target.value);
-    },
-  },
+<script setup lang="ts">
+import { SelectHTMLAttributes } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+defineProps<{
+  theme: any;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:theme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
 };
 </script>