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.
This commit is contained in:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user