[Serverless/Side Nav] Light mode for side nav background (#156293)

## Summary This removes the dark background of the side nav for serverless projects. Pulled from #153508 Context from @MichaelMarcialis > current plans for the next revision is to ditch the high contrast nav and header in favor of one that honors the current theme mode (light for light and dark for dark). ## Screenshots **Before** <img width="1912" alt="light mode before" src="https://user-images.githubusercontent.com/908371/235507715-5a094c83-b644-4cfa-946e-bc7183d393f5.png"> **After** <img width="1912" alt="light mode after" src="https://user-images.githubusercontent.com/908371/235507752-fa4e6548-f587-4bc2-93f4-f900aef542a1.png">
elastic · May 2, 2023 · 0bf005a · 0bf005a
1 parent 3cd3549
commit 0bf005a
Showing 1 changed file with 22 additions and 27 deletions.
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
@@ -11,7 +11,7 @@ import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { css } from '@emotion/react';
 
 import { i18n } from '@kbn/i18n';
-import { EuiButtonIcon, EuiCollapsibleNav, EuiThemeProvider, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiCollapsibleNav } from '@elastic/eui';
 
 const LOCAL_STORAGE_IS_OPEN_KEY = 'PROJECT_NAVIGATION_OPEN' as const;
 const SIZE_OPEN = 248;
@@ -33,8 +33,6 @@ const closedAriaLabel = i18n.translate('core.ui.chrome.projectNav.collapsibleNav
 });
 
 export const ProjectNavigation: React.FC = ({ children }) => {
-  const { euiTheme, colorMode } = useEuiTheme();
-
   const [isOpen, setIsOpen] = useLocalStorage(LOCAL_STORAGE_IS_OPEN_KEY, true);
 
   const toggleOpen = useCallback(() => {
@@ -43,34 +41,31 @@ export const ProjectNavigation: React.FC = ({ children }) => {
 
   const collabsibleNavCSS = css`
     border-inline-end-width: 1,
-    background: ${euiTheme.colors.darkestShade},
     display: flex,
     flex-direction: row,
   `;
 
   return (
-    <EuiThemeProvider colorMode={colorMode === 'DARK' ? 'LIGHT' : 'DARK'}>
-      <EuiCollapsibleNav
-        css={collabsibleNavCSS}
-        isOpen={true}
-        showButtonIfDocked={true}
-        onClose={toggleOpen}
-        isDocked={true}
-        size={isOpen ? SIZE_OPEN : SIZE_CLOSED}
-        hideCloseButton={false}
-        button={
-          <span css={buttonCSS}>
-            <EuiButtonIcon
-              iconType={isOpen ? 'menuLeft' : 'menuRight'}
-              aria-label={isOpen ? openAriaLabel : closedAriaLabel}
-              color="text"
-              onClick={toggleOpen}
-            />
-          </span>
-        }
-      >
-        {isOpen && children}
-      </EuiCollapsibleNav>
-    </EuiThemeProvider>
+    <EuiCollapsibleNav
+      css={collabsibleNavCSS}
+      isOpen={true}
+      showButtonIfDocked={true}
+      onClose={toggleOpen}
+      isDocked={true}
+      size={isOpen ? SIZE_OPEN : SIZE_CLOSED}
+      hideCloseButton={false}
+      button={
+        <span css={buttonCSS}>
+          <EuiButtonIcon
+            iconType={isOpen ? 'menuLeft' : 'menuRight'}
+            aria-label={isOpen ? openAriaLabel : closedAriaLabel}
+            color={isOpen ? 'ghost' : 'text'}
+            onClick={toggleOpen}
+          />
+        </span>
+      }
+    >
+      {isOpen && children}
+    </EuiCollapsibleNav>
   );
 };