diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js
index b5eb489d5217..db8d476f8b5c 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js
@@ -18,7 +18,10 @@ import SaveProjectIcon from '../../SaveProjectIcon';
 import Mobile from '../../../UI/CustomSvgIcons/Mobile';
 import Desktop from '../../../UI/CustomSvgIcons/Desktop';
 import HistoryIcon from '../../../UI/CustomSvgIcons/History';
+import SunIcon from '../../../UI/CustomSvgIcons/Sun';
+import Brightness3Icon from '@material-ui/icons/Brightness3';
 import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext';
+import PreferencesContext from '../../Preferences/PreferencesContext';
 const electron = optionalRequire('electron');
 
 type Props = {|
@@ -40,6 +43,18 @@ export const HomePageHeader = ({
 }: Props) => {
   const { isMobile } = useResponsiveWindowSize();
   const { profile } = React.useContext(AuthenticatedUserContext);
+  const preferences = React.useContext(PreferencesContext);
+  const isDarkTheme = preferences.values.themeName.includes('Dark');
+
+  const toggleTheme = React.useCallback(
+    () => {
+      const newTheme = isDarkTheme
+        ? 'GDevelop default Light'
+        : 'GDevelop default Dark';
+      preferences.setThemeName(newTheme);
+    },
+    [isDarkTheme, preferences]
+  );
 
   return (
     <I18n>
@@ -96,6 +111,21 @@ export const HomePageHeader = ({
                 ))}
               <UserChip onOpenProfile={onOpenProfile} />
               {profile && <NotificationChip />}
+              <IconButton
+                size="small"
+                id="homepage-theme-toggle-button"
+                onClick={toggleTheme}
+                tooltip={
+                  isDarkTheme ? t`Switch to light mode` : t`Switch to dark mode`
+                }
+                color="default"
+              >
+                {isDarkTheme ? (
+                  <SunIcon style={{ fontSize: 20 }} />
+                ) : (
+                  <Brightness3Icon style={{ fontSize: 20 }} />
+                )}
+              </IconButton>
               {isMobile ? (
                 <IconButton size="small" onClick={onOpenLanguageDialog}>
                   <TranslateIcon fontSize="small" />
diff --git a/newIDE/app/src/UI/SearchBar.js b/newIDE/app/src/UI/SearchBar.js
index ea889a3a5821..ea2db7f5384d 100644
--- a/newIDE/app/src/UI/SearchBar.js
+++ b/newIDE/app/src/UI/SearchBar.js
@@ -9,7 +9,10 @@ import Text from './Text';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { type MessageDescriptor } from '../Utils/i18n/MessageDescriptor.flow';
 import { useShouldAutofocusInput } from './Responsive/ScreenTypeMeasurer';
-import { shouldValidate } from './KeyboardShortcuts/InteractionKeys';
+import {
+  shouldValidate,
+  shouldCloseOrCancel,
+} from './KeyboardShortcuts/InteractionKeys';
 import TagChips from './TagChips';
 import { I18n } from '@lingui/react';
 import { useDebounce } from '../Utils/UseDebounce';
@@ -181,7 +184,9 @@ const SearchBar = React.forwardRef<Props, SearchBarInterface>(
     };
 
     const handleKeyPressed = (event: SyntheticKeyboardEvent<>) => {
-      if (shouldValidate(event)) {
+      if (shouldCloseOrCancel(event)) {
+        handleCancel();
+      } else if (shouldValidate(event)) {
         onRequestSearch(value);
       }
     };