Add theme mode translation

public/locales/en/core.json

@@ -25,11 +25,15 @@
     }
   },
   "save_options": {
-    "publish_qdn": "Would you like to publish your settings to QDN (encrypted) ?",
+    "publish_qdn": "Would you like to publish your settings to QDN (encrypted)?",
     "save": "save"
   },
   "settings": "settings",
   "supply": "supply",
+  "theme": {
+    "dark": "dark mode",
+    "light": "light mode"
+  },
   "title": "title",
   "tutorial": "tutorial",
   "your_account": "your account",

src/components/Theme/ThemeSelector.tsx

@@ -2,8 +2,10 @@ import { useThemeContext } from './ThemeContext';
 import { IconButton, Tooltip } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
+import { useTranslation } from 'react-i18next';
 
 const ThemeSelector = () => {
+  const { t } = useTranslation(['core']);
   const { themeMode, toggleTheme } = useThemeContext();
 
   return (
@@ -16,7 +18,17 @@ const ThemeSelector = () => {
         position: 'absolute',
       }}
     >
-      <Tooltip title={themeMode === 'dark' ? 'Light mode' : 'Dark mode'}>
+      <Tooltip
+        title={
+          themeMode === 'dark'
+            ? t('core:theme.light', {
+                postProcess: 'capitalize',
+              })
+            : t('core:theme.light', {
+                postProcess: 'capitalize',
+              })
+        }
+      >
         <IconButton onClick={toggleTheme}>
           {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
         </IconButton>