Merge pull request #17 from tusharpatel0504/feature/Dark-Themed-UI

feat(ui): implement dark theme UI and improve dark-mode styles

Author: rajshekharbind

src/App.jsx

@@ -39,7 +39,7 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { AppProvider } from './context/AppContext';
+import { AppProvider, useApp } from './context/AppContext';
 import { SocketProvider } from './context/SocketContext';
 import { NotificationProvider } from './context/NotificationContext';
 import Dashboard from './pages/Dashboard';
@@ -53,6 +53,7 @@ function App() {
       <NotificationProvider>
         <SocketProvider>
           <Router>
+            <InnerApp />
             <div className="min-h-screen bg-gray-50">
               {/* Skip link for keyboard navigation */}
               <a href="#main-content" className="skip-link">
@@ -89,4 +90,35 @@ function App() {
   );
 }
 
+function InnerApp() {
+  const { state } = useApp();
+  const toastTheme = state.theme === 'dark' ? 'dark' : 'light';
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navigation />
+      <main className="lg:ml-64">
+        <Routes>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/logs" element={<Logs />} />
+          <Route path="/settings" element={<Settings />} />
+        </Routes>
+      </main>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme={toastTheme}
+      />
+    </div>
+  );
+}
+
 export default App;

src/components/EnergyCharts.jsx

@@ -50,6 +50,21 @@ const EnergyCharts = () => {
   return (
     <div className="space-y-4 sm:space-y-6">
       {/* Real-time Energy Consumption */}
+      <div className="chart-container p-6">
+        <h3 className="text-xl font-bold text-gray-800 mb-4">Real-time Energy Overview</h3>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+          <div className="bg-blue-50 p-4 rounded-lg stat-card">
+            <p className="text-sm text-blue-600">Current Consumption</p>
+            <p className="text-2xl font-bold text-blue-800">{state.energyConsumption} W</p>
+          </div>
+          <div className="bg-green-50 p-4 rounded-lg stat-card">
+            <p className="text-sm text-green-600">Battery Level</p>
+            <p className="text-2xl font-bold text-green-800">{state.batteryLevel}%</p>
+          </div>
+          <div className="bg-orange-50 p-4 rounded-lg stat-card">
+            <p className="text-sm text-orange-600">Temperature</p>
+            <p className="text-2xl font-bold text-orange-800">{state.temperature}°C</p>
+          </div>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}

src/components/StatusCard.jsx

@@ -81,6 +81,7 @@ const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
     <motion.div
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
+      className={`rounded-xl p-6 text-white shadow-lg cursor-pointer transition-all duration-300 ${color} status-card`}
       className={`rounded-xl p-4 sm:p-6 text-white shadow-lg cursor-pointer transition-all duration-300 interactive ${color}`}
       onClick={onClick}
       role="button"

src/context/AppContext.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer } from 'react';
+import React, { createContext, useContext, useReducer, useEffect } from 'react';
 
 const AppContext = createContext();
 
@@ -12,6 +12,7 @@ const initialState = {
   schedules: [],
   isManualMode: false,
   currentTime: new Date().toLocaleTimeString(),
+  theme: 'light',
 };
 
 function appReducer(state, action) {
@@ -44,13 +45,52 @@ function appReducer(state, action) {
       return { ...state, isManualMode: !state.isManualMode };
     case 'UPDATE_TIME':
       return { ...state, currentTime: action.payload };
+    case 'SET_THEME':
+      return { ...state, theme: action.payload };
     default:
       return state;
   }
 }
 
 export function AppProvider({ children }) {
-  const [state, dispatch] = useReducer(appReducer, initialState);
+  // Lazy initializer reads saved theme synchronously to avoid an initial flash
+  const init = (initState) => {
+    try {
+      const saved = localStorage.getItem('themeChoice');
+      if (saved) {
+        return { ...initState, theme: saved };
+      }
+    } catch (e) {
+      // ignore and fall back to defaults
+    }
+    return initState;
+  };
+
+  const [state, dispatch] = useReducer(appReducer, initialState, init);
+
+  // Apply theme class to document root and persist choice
+  useEffect(() => {
+    const applyTheme = (themeChoice) => {
+      let resolved = themeChoice;
+      if (themeChoice === 'auto') {
+        resolved = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+
+      if (resolved === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+
+      try {
+        localStorage.setItem('themeChoice', themeChoice);
+      } catch (e) {
+        // ignore
+      }
+    };
+
+    applyTheme(state.theme);
+  }, [state.theme]);
 
   return (
     <AppContext.Provider value={{ state, dispatch }}>