feat: add dark/light mode toggle with localStorage persistence

package.json

@@ -11,10 +11,10 @@
     "react-scripts": "3.4.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject" 
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.css

@@ -2,35 +2,77 @@
 
 :root {
   --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --bg-color: #f7f7f7;
+  --text-color: #333;
+  --card-bg: #fff;
+  --border-color: #dedede;
+  --input-bg: #fff;
+  --header-text: #333;
+}
+
+.dark {
+  --bg-color: #1a1a2e;
+  --text-color: #eee;
+  --card-bg: #16213e;
+  --border-color: #444;
+  --input-bg: #16213e;
+  --header-text: #eee;
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #f7f7f7;
+  margin: 0;
+  font-family: 'Lato', sans-serif;
+}
+
+.light, .dark {
+  background-color: var(--bg-color);
+  color: var(--text-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  margin: 0;
-  font-family: 'Lato', sans-serif;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .container {
   margin: 30px auto;
   width: 350px;
 }
 
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+  position: relative;
+}
+
+.theme-toggle {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
+
 h1 {
   letter-spacing: 1px;
   margin: 0;
 }
 
 h3 {
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 10px;
   margin: 40px 0 10px;
 }
@@ -41,7 +83,7 @@ h4 {
 }
 
 .inc-exp-container {
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-shadow: var(--box-shadow);
   padding: 20px;
   display: flex;
@@ -55,7 +97,7 @@ h4 {
 }
 
 .inc-exp-container > div:first-of-type {
-  border-right: 1px solid #dedede;
+  border-right: 1px solid var(--border-color);
 }
 
 .money {
@@ -79,12 +121,14 @@ label {
 
 input[type='text'],
 input[type='number'] {
-  border: 1px solid #dedede;
+  border: 1px solid var(--border-color);
   border-radius: 2px;
   display: block;
   font-size: 16px;
   padding: 10px;
   width: 100%;
+  background-color: var(--input-bg);
+  color: var(--text-color);
 }
 
 .btn {
@@ -112,9 +156,9 @@ input[type='number'] {
 }
 
 .list li {
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-shadow: var(--box-shadow);
-  color: #333;
+  color: var(--text-color);
   display: flex;
   justify-content: space-between;
   position: relative;
@@ -151,7 +195,7 @@ input[type='number'] {
 }
 
 @media (max-width: 320px) {
-  .container {
+  .container, .header-container {
     width: 300px;
   }
 }

src/App.js

@@ -6,20 +6,33 @@ import { TransactionList } from './components/TransactionList';
 import { AddTransaction } from './components/AddTransaction';
 
 import { GlobalProvider } from './context/GlobalState';
+import { ThemeProvider, useTheme } from './context/ThemeContext';
 
 import './App.css';
 
+const AppContent = () => {
+  const { theme } = useTheme();
+
+  return (
+    <div className={theme}>
+      <GlobalProvider>
+        <Header />
+        <div className="container">
+          <Balance />
+          <IncomeExpenses />
+          <TransactionList />
+          <AddTransaction />
+        </div>
+      </GlobalProvider>
+    </div>
+  );
+};
+
 function App() {
   return (
-    <GlobalProvider>
-      <Header />
-      <div className="container">
-        <Balance />
-        <IncomeExpenses />
-        <TransactionList />
-        <AddTransaction />
-      </div>
-    </GlobalProvider>
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
   );
 }
 

src/components/Header.js

@@ -1,9 +1,15 @@
-import React from 'react'
+import React from 'react';
+import { useTheme } from '../context/ThemeContext';
 
 export const Header = () => {
+  const { theme, toggleTheme } = useTheme();
+
   return (
-    <h2>
-      Expense Tracker
-    </h2>
+    <div className="header-container">
+      <h2>Expense Tracker</h2>
+      <button className="theme-toggle" onClick={toggleTheme}>
+        {theme === 'light' ? '🌙' : '☀️'}
+      </button>
+    </div>
   )
 }

src/context/ThemeContext.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme ? savedTheme : 'light';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};