added dark mode icon

Author: garrettlchow

src/app/App.tsx

@@ -2,19 +2,16 @@ import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
 import { Toaster } from 'react-hot-toast';
-
-/*
-  'currentTab' is the current active tab within Google Chrome.
-  This is used to decide what tab Reactime should be monitoring. This can be "locked" currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
-  This is used to determine the proper tutorial to render when How To button is pressed.
-*/
+import { ThemeProvider } from './ThemeProvider';
 
 function App(): JSX.Element {
   return (
-    <Router>
-      <Toaster />
-      <MainContainer />
-    </Router>
+    <ThemeProvider>
+      <Router>
+        <Toaster />
+        <MainContainer />
+      </Router>
+    </ThemeProvider>
   );
 }
 

src/app/FrontendTypes.ts

@@ -44,7 +44,6 @@ export interface BarStackProp {
   currentTab?: string;
 }
 
-// On-hover data for BarGraph/BarGraphComparison.tsx
 export interface TooltipData {
   bar: SeriesPoint<snapshot>;
   key: string;
@@ -310,7 +309,6 @@ export interface LinkControlProps {
 }
 
 export interface ControlStyles {
-  //fontSize: string;
   padding: string;
 }
 
@@ -328,7 +326,6 @@ export interface DropDownStyle {
 export interface Node {
   children?: Node[];
   name?: string;
-  // other properties here
 }
 
 export interface LinkComponent {

src/app/ThemeProvider.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext({
+  isDark: false,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  // Check for system preference on mount
+  useEffect(() => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setIsDark(prefersDark);
+  }, []);
+
+  // Update body class when theme changes
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDark]);
+
+  const toggleTheme = () => {
+    setIsDark((prev) => !prev);
+  };
+
+  return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

src/app/components/Actions/RecordButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Switch } from '@mui/material';
+import ThemeToggle from './ThemeToggle';
 
 const RecordButton = ({ isRecording, onToggle }) => {
   return (
@@ -32,6 +33,7 @@ const RecordButton = ({ isRecording, onToggle }) => {
           },
         }}
       />
+      <ThemeToggle />
     </div>
   );
 };

src/app/components/Actions/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../../ThemeProvider';
+
+const ThemeToggle = () => {
+  const { isDark, toggleTheme } = useTheme();
+
+  return (
+    <button
+      className={`theme-toggle ${isDark ? 'dark' : ''}`}
+      onClick={toggleTheme}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      {isDark ? <Sun className='theme-toggle-icon' /> : <Moon className='theme-toggle-icon' />}
+    </button>
+  );
+};
+
+export default ThemeToggle;

src/app/index.tsx

@@ -6,7 +6,6 @@ import './styles/main.scss';
 import { store } from './store'; //imported RTK Store
 import { Provider } from 'react-redux'; //imported Provider
 
-//Updated rendering sytax for React 18
 const root = createRoot(document.getElementById('root'));
 root.render(
   <Provider store={store}>

src/app/styles/components/_buttons.scss

@@ -112,3 +112,34 @@
 .clear-button-modern:hover {
   background-color: #e5e7eb !important;
 }
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #374151;
+  cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.theme-toggle:hover {
+  background-color: #f3f4f6;
+}
+
+.theme-toggle-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.theme-toggle.dark {
+  color: #14b8a6;
+}
+
+.theme-toggle.dark:hover {
+  background-color: rgba(20, 184, 166, 0.1);
+}