From 9854133ac098d1f5c618d19f2d91991cb992516b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Ty=C5=84ski?= <rafal.tynski@gmail.com>
Date: Sun, 4 Oct 2026 04:04:54 +0200
Subject: [PATCH] feat(client): add high-contrast theme option to theme
 switcher

Extend theme modes with an explicit high-contrast choice (WCAG 1.4.3) and expose i18n label keys for the theme menu.
---
 client/src/composables/useThemeMode.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

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()