Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add tooltips to color mode switcher

Browse Source
This commit is contained in:
blessedcoolant 2023-06-30 06:05:08 +12:00
parent 6e917dcbb0
commit fb015332f2
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/public/locales/en.json
View File

@ -24,16 +24,13 @@
}, },
"common": { "common": {
"hotkeysLabel": "Hotkeys", "hotkeysLabel": "Hotkeys",
"themeLabel": "Theme", "darkMode": "Dark Mode",
"lightMode": "Light Mode",
"languagePickerLabel": "Language", "languagePickerLabel": "Language",
"reportBugLabel": "Report Bug", "reportBugLabel": "Report Bug",
"githubLabel": "Github", "githubLabel": "Github",
"discordLabel": "Discord", "discordLabel": "Discord",
"settingsLabel": "Settings", "settingsLabel": "Settings",
"darkTheme": "Dark",
"lightTheme": "Light",
"greenTheme": "Green",
"oceanTheme": "Ocean",
"langArabic": "العربية", "langArabic": "العربية",
"langEnglish": "English", "langEnglish": "English",
"langDutch": "Nederlands", "langDutch": "Nederlands",

9
invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
View File

@ -1,13 +1,20 @@
import { useColorMode } from '@chakra-ui/react'; import { useColorMode } from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next';
import { FaMoon, FaSun } from 'react-icons/fa'; import { FaMoon, FaSun } from 'react-icons/fa';
const ColorModeButton = () => { const ColorModeButton = () => {
const { colorMode, toggleColorMode } = useColorMode(); const { colorMode, toggleColorMode } = useColorMode();
const { t } = useTranslation();
return ( return (
<IAIIconButton <IAIIconButton
aria-label="Toggle Color Mode" aria-label={
colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
}
tooltip={
colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
}
size="sm" size="sm"
icon={ icon={
colorMode === 'dark' ? ( colorMode === 'dark' ? (