Added dark mode toggle with persistent theme support

src/App.tsx

@@ -2,6 +2,7 @@ import '@theme/font/roboto.css';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route, BrowserRouter as Router } from 'react-router-dom';
+import styled from 'styled-components';
 import { QueryParamProvider } from 'use-query-params';
 import GlobalStyle from '@/GlobalStyle';
 import Root from '@pages/Root';
@@ -21,16 +22,23 @@ import { fetchFeaturesConfig } from '@utils/FEATURE';
 import { fetchServiceVersion } from '@utils/VERSION';
 import { appBasePath } from './constants';
 
-const App: React.FC = () => {
+type AppProps = {
+  toggleTheme: () => void;
+  currentTheme: 'light' | 'dark';
+};
+
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.background};
+  color: ${({ theme }) => theme.text};
+  min-height: 100vh;
+`;
+
+const App: React.FC<AppProps> = ({ toggleTheme, currentTheme }) => {
   const { t } = useTranslation();
-  // Features list must be fetched before we render application so we don't render things that
-  // are disabled by backend service.
   const [flagsReceived, setFlagsReceived] = useState(false);
 
   useEffect(() => {
-    // Get info about backend versions.
     fetchServiceVersion();
-    // Get info about features that are enabled by server
     fetchFeaturesConfig(() => setFlagsReceived(true));
   }, []);
 
@@ -44,16 +52,16 @@ const App: React.FC = () => {
               <Router basename={appBasePath}>
                 <QueryParamProvider ReactRouterRoute={Route}>
                   {flagsReceived ? (
-                    <>
+                    <Wrapper>
                       <TopNavPlugin />
                       <Notifications />
                       <Announcements />
-                      <AppBar />
+                      <AppBar toggleTheme={toggleTheme} currentTheme={currentTheme} />
                       <Page>
                         <Root />
                       </Page>
                       <Logger />
-                    </>
+                    </Wrapper>
                   ) : (
                     <FeatureFlagLoader />
                   )}

src/components/AppBar/index.tsx

@@ -9,11 +9,12 @@ import { ItemRow } from '@components/Structure';
 import FEATURE_FLAGS from '@utils/FEATURE';
 import logo from '@assets/logo_dark_horizontal.svg';
 
-//
-// Main application bar which is always shown on top of the page
-//
+type Props = {
+  toggleTheme: () => void;
+  currentTheme: 'light' | 'dark';
+};
 
-const AppBar: React.FC = () => {
+const AppBar: React.FC<Props> = ({ toggleTheme, currentTheme }) => {
   return (
     <Wrapper>
       <ItemRow pad="lg">
@@ -22,10 +23,18 @@ const AppBar: React.FC = () => {
             <Logo data-testid="page-logo-image" src={logo} />
           </LogoLink>
         )}
+
         <Breadcrumb />
-        {!FEATURE_FLAGS.HIDE_QUICK_LINKS && <HelpMenu />}
-        {!FEATURE_FLAGS.HIDE_CONNECTION_STATUS && <ConnectionStatus />}
+
+        <RightSection>
+          {!FEATURE_FLAGS.HIDE_QUICK_LINKS && <HelpMenu />}
+          {!FEATURE_FLAGS.HIDE_CONNECTION_STATUS && <ConnectionStatus />}
+
+          {/* 🌙 Toggle */}
+          <ThemeButton onClick={toggleTheme}>{currentTheme === 'light' ? '🌙' : '☀️'}</ThemeButton>
+        </RightSection>
       </ItemRow>
+
       <ItemRow pad="lg">
         <PluginGroup id="header" title="Extensions" slot="header" />
       </ItemRow>
@@ -36,7 +45,7 @@ const AppBar: React.FC = () => {
 export default AppBar;
 
 //
-// Style
+// Styles
 //
 
 const Wrapper = styled.header`
@@ -51,7 +60,8 @@ const Wrapper = styled.header`
   min-height: var(--layout-application-bar-height);
   margin: 0 auto;
   padding: var(--layout-page-padding-y) var(--layout-page-padding-x);
-  background: var(--color-bg-primary);
+  background: ${({ theme }) => theme.navbar};
+  color: ${({ theme }) => theme.text};
   z-index: 999;
   flex-direction: column;
 `;
@@ -63,3 +73,40 @@ const Logo = styled.img`
 const LogoLink = styled(Link)`
   margin-right: 1.7rem;
 `;
+
+const RightSection = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: 10px;
+`;
+
+const ThemeButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 34px;
+
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.text}20;
+
+  background: ${({ theme }) => theme.navbar};
+  color: ${({ theme }) => theme.text};
+
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.05),
+    0 4px 10px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    background: ${({ theme }) => theme.text}15;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;

src/index.tsx

@@ -1,23 +1,55 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from 'styled-components';
 import App from '@/App';
 import '@utils/VERSION';
 import '@utils/i18n';
 import { worker } from './mocks/browser';
+import { lightTheme, darkTheme } from './theme/theme';
 
 const container = document.getElementById('root');
+
+const Root: React.FC = () => {
+  // ✅ Initialize theme from localStorage
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+    const saved = localStorage.getItem('theme');
+    return saved === 'dark' ? 'dark' : 'light';
+  });
+
+  // ✅ Apply theme class to body (IMPORTANT for CSS variables)
+  useEffect(() => {
+    document.body.classList.remove('light', 'dark');
+    document.body.classList.add(theme);
+  }, [theme]);
+
+  // ✅ Toggle theme
+  const toggleTheme = () => {
+    setTheme((prev) => {
+      const next = prev === 'light' ? 'dark' : 'light';
+      localStorage.setItem('theme', next);
+      return next;
+    });
+  };
+
+  return (
+    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
+      <App toggleTheme={toggleTheme} currentTheme={theme} />
+    </ThemeProvider>
+  );
+};
+
 if (container) {
   const root = createRoot(container);
 
+  const renderApp = () => root.render(<Root />);
+
   if (process.env.REACT_APP_ENABLE_MOCKS) {
     worker
       .start({
         onUnhandledRequest: 'bypass',
       })
-      .then(() => {
-        root.render(<App />);
-      });
+      .then(renderApp);
   } else {
-    root.render(<App />);
+    renderApp();
   }
 }