Nodarx/server
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Projects Releases Activity

fix: theming

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-07-07 22:49:51 -04:00
parent 5a729d851e
commit 93d32d2a9f
9 changed files with 242 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/src/layouts/menus/LayoutUserMenu.vue
+20 -12
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useTheme } from 'vuetify';
import { useUserStore } from '@KTXC/stores/userStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
@@ -10,7 +9,6 @@ import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
const { t } = useL10n('core');
const theme = useTheme();
const router = useRouter();
const userStore = useUserStore();
const integrationStore = useIntegrationStore();
@@ -27,12 +25,22 @@ const userName = computed(() => {
});
const userEmail = computed(() => userStore.getProfileField('email') || '');
// Theme toggle
const isDarkMode = computed(() => theme.global.name.value === 'dark');
const toggleTheme = () => {
const newTheme = theme.global.name.value === 'light' ? 'dark' : 'light';
theme.global.name.value = newTheme;
layoutStore.setTheme(newTheme);
// Theme mode cycle: light -> dark -> system, driven by the stored preference
// (not the resolved theme name, which never reads 'system')
const THEME_MODES = ['light', 'dark', 'system'] as const;
type ThemeMode = (typeof THEME_MODES)[number];
const MODE_PRESENTATION: Record<ThemeMode, { icon: string; l10n: string; label: string }> = {
light: { icon: 'mdi-weather-sunny', l10n: 'userMenu.lightMode', label: 'Light Mode' },
dark: { icon: 'mdi-weather-night', l10n: 'userMenu.darkMode', label: 'Dark Mode' },
system: { icon: 'mdi-theme-light-dark', l10n: 'userMenu.systemMode', label: 'System Mode' },
};
const themeMode = computed(() => (layoutStore.theme ?? 'light') as ThemeMode);
const nextThemeMode = computed(() => THEME_MODES[(THEME_MODES.indexOf(themeMode.value) + 1) % THEME_MODES.length]);
const cycleTheme = () => {
// App.vue watches layoutStore.theme and applies it via theme.change()
layoutStore.setTheme(nextThemeMode.value);
};
// Navigate to settings
@@ -82,12 +90,12 @@ const goToSettings = () => {
<v-divider v-if="profileMenuItems.length" class="my-2" />
<!-- Theme Toggle -->
<v-list-item @click="toggleTheme" color="primary" rounded="0">
<!-- Theme Mode Cycle (light -> dark -> system) -->
<v-list-item @click="cycleTheme" color="primary" rounded="0">
<template v-slot:prepend>
<v-icon>{{ isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
<v-icon>{{ MODE_PRESENTATION[nextThemeMode].icon }}</v-icon>
</template>
<v-list-item-title class="text-h6">{{ isDarkMode ? t('userMenu.lightMode', 'Light Mode') : t('userMenu.darkMode', 'Dark Mode') }}</v-list-item-title>
<v-list-item-title class="text-h6">{{ t(MODE_PRESENTATION[nextThemeMode].l10n, MODE_PRESENTATION[nextThemeMode].label) }}</v-list-item-title>
</v-list-item>
<!-- Go to Settings -->