diff --git a/locales/en/public.json b/locales/en/public.json index 78fb4fae9..e5c99256c 100644 --- a/locales/en/public.json +++ b/locales/en/public.json @@ -453,6 +453,12 @@ "TITLE": "Target JVM" } }, + "ThemeToggle": { + "ARIA_LABELS": { + "DARK_THEME": "dark-theme", + "LIGHT_THEME": "light-theme" + } + }, "TimePicker": { "24HOUR": "24-hour", "USE_24HR_TIME": "Use 24-hour time" diff --git a/src/app/AppLayout/ThemeToggle.tsx b/src/app/AppLayout/ThemeToggle.tsx index f535e940d..3f8e65064 100644 --- a/src/app/AppLayout/ThemeToggle.tsx +++ b/src/app/AppLayout/ThemeToggle.tsx @@ -20,12 +20,14 @@ import { useTheme } from '@app/utils/hooks/useTheme'; import { Icon, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; import { SunIcon, MoonIcon } from '@patternfly/react-icons'; import * as React from 'react'; +import { useTranslation } from 'react-i18next'; export interface ThemeToggleProps {} export const ThemeToggle: React.FC = () => { const context = React.useContext(ServiceContext); const [_theme] = useTheme(); + const { t } = useTranslation(); const handleThemeSelect = React.useCallback( (_, setting: ThemeSetting) => { @@ -37,6 +39,7 @@ export const ThemeToggle: React.FC = () => { return ( @@ -47,6 +50,7 @@ export const ThemeToggle: React.FC = () => { onClick={(e) => handleThemeSelect(e, ThemeSetting.LIGHT)} />