diff --git a/client/src/composables/useThemeMode.ts b/client/src/composables/useThemeMode.ts index 2333865..7c2a6c9 100644 --- a/client/src/composables/useThemeMode.ts +++ b/client/src/composables/useThemeMode.ts @@ -2,21 +2,27 @@ import { computed, watch } from 'vue' import { usePreferredDark, useStorage } from '@vueuse/core' import { useTheme } from 'vuetify' -export type ThemeMode = 'light' | 'dark' | 'system' -export type ResolvedTheme = 'light' | 'dark' +export type ThemeMode = 'light' | 'dark' | 'highContrast' | 'system' +export type ResolvedTheme = 'light' | 'dark' | 'highContrast' export interface ThemeOption { value: ThemeMode - title: string + labelKey: string icon: string } export const themeOptions: ThemeOption[] = [ - { value: 'light', title: 'Jasny', icon: 'mdi-white-balance-sunny' }, - { value: 'dark', title: 'Ciemny', icon: 'mdi-weather-night' }, - { value: 'system', title: 'Systemowy', icon: 'mdi-theme-light-dark' }, + { value: 'light', labelKey: 'theme.light', icon: 'mdi-white-balance-sunny' }, + { value: 'dark', labelKey: 'theme.dark', icon: 'mdi-weather-night' }, + { value: 'highContrast', labelKey: 'theme.highContrast', icon: 'mdi-contrast-circle' }, + { value: 'system', labelKey: 'theme.system', icon: 'mdi-theme-light-dark' }, ] +/** + * Color-scheme handling: light / dark / high contrast / follow the system. + * `highContrast` is offered explicitly because the OS `system` preference only + * yields light or dark (WCAG 1.4.3 for low-vision users). + */ export function useThemeMode() { const theme = useTheme() const preferredDark = usePreferredDark()