added theme toggle,

fixed create entityies in API

frontend/src/components/common/ThemeToggle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { useThemeStore } from '@/stores/theme'
+
+const props = withDefaults(defineProps<{
+	showLabel?: boolean
+}>(), {
+	showLabel: true,
+})
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+themeStore.initialize()
+
+const icon = computed(() => (themeStore.isDarkMode ? faMoon : faSun))
+const themeLabel = computed(() => t(themeStore.currentThemeLabelKey))
+</script>
+
+<template>
+	<button
+		type="button"
+		class="theme-btn"
+		:aria-label="t('theme.toggle')"
+		@click="themeStore.toggle"
+	>
+		<font-awesome-icon :icon="icon" />
+		<span v-if="props.showLabel">{{ themeLabel }}</span>
+	</button>
+</template>

frontend/src/components/navigation/AppTopbar.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import ThemeToggle from '@/components/common/ThemeToggle.vue'
 import { useAuthStore } from '@/stores/auth'
 
 const route = useRoute()
@@ -33,8 +34,11 @@ const title = computed(() => {
 		<div>
 			<h1>{{ title }}</h1>
 		</div>
-		<div class="app-topbar__user" v-if="auth.userEmail">
-			{{ auth.userEmail }}
+		<div class="app-topbar__actions">
+			<ThemeToggle :show-label="false" />
+			<div class="app-topbar__user" v-if="auth.userEmail">
+				{{ auth.userEmail }}
+			</div>
 		</div>
 	</header>
 </template>