From fb015332f29317f484843833e57a585362b1487f Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 30 Jun 2023 06:05:08 +1200
Subject: [PATCH] feat: Add tooltips to color mode switcher

---
 invokeai/frontend/web/public/locales/en.json             | 7 ++-----
 .../src/features/system/components/ColorModeButton.tsx   | 9 ++++++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b69e3b82af..1b3b790222 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -24,16 +24,13 @@
     },
     "common": {
         "hotkeysLabel": "Hotkeys",
-        "themeLabel": "Theme",
+        "darkMode": "Dark Mode",
+        "lightMode": "Light Mode",
         "languagePickerLabel": "Language",
         "reportBugLabel": "Report Bug",
         "githubLabel": "Github",
         "discordLabel": "Discord",
         "settingsLabel": "Settings",
-        "darkTheme": "Dark",
-        "lightTheme": "Light",
-        "greenTheme": "Green",
-        "oceanTheme": "Ocean",
         "langArabic": "العربية",
         "langEnglish": "English",
         "langDutch": "Nederlands",
diff --git a/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx b/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
index 0b226ec6d0..9bf748146c 100644
--- a/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
@@ -1,13 +1,20 @@
 import { useColorMode } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
+import { useTranslation } from 'react-i18next';
 import { FaMoon, FaSun } from 'react-icons/fa';
 
 const ColorModeButton = () => {
   const { colorMode, toggleColorMode } = useColorMode();
+  const { t } = useTranslation();
 
   return (
     <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"
       icon={
         colorMode === 'dark' ? (