feat(style): added dark mode (#446)

src/components/Header/HeaderRight.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
+import React, { useState, useEffect, useContext, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
+import ThemeContext from '../../design-tokens/ThemeContext';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -24,10 +25,16 @@ const HeaderRight: React.FC<Props> = ({
   onToggleMobileNav,
   onOpenRegistryInfoDialog,
 }) => {
+  const themeContext = useContext(ThemeContext);
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
+
   const { t } = useTranslation();
 
+  if (!themeContext) {
+    throw Error(t('theme-context-not-correct-used'));
+  }
+
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
   }, [anchorEl]);
@@ -54,6 +61,12 @@ const HeaderRight: React.FC<Props> = ({
     onToggleLogin();
   };
 
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      themeContext.setIsDarkMode(!themeContext.isDarkMode);
+    }, 300);
+  };
+
   return (
     <RightSide data-testid="header-right">
       {!withoutSearch && (
@@ -61,6 +74,12 @@ const HeaderRight: React.FC<Props> = ({
       )}
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
+      <HeaderToolTip
+        onClick={handleToggleDarkLightMode}
+        title={t('header.documentation')}
+        tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
+      />
+
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}