Fix issue 15

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import Chat from './components/Chat';
 import Sidebar from './components/Sidebar';
 import styles from './App.module.css';
 import { useState } from 'react';
+import { ThemeProvider } from './components/context/ThemeContext';
 
 const saveSessionToHistory = () => {
   const history = JSON.parse(localStorage.getItem('apiconf_chat_history') || '[]');
@@ -52,6 +53,7 @@ const App: React.FC = () => {
   };
 
   return (
+    <ThemeProvider>
     <div className={styles.app}>
       <Sidebar
         isOpen={sidebarOpen}
@@ -65,6 +67,7 @@ const App: React.FC = () => {
         {view === 'settings' && <SettingsComponent />}
       </main>
     </div>
+    </ThemeProvider>
   );
 };
 

frontend/src/components/Chat.module.css

@@ -2,8 +2,14 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+
   height: 100%;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  padding: 1rem;
+  height: 100vh;
+  border-right: 1px solid var(--accent-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 .chatHeader {

frontend/src/components/Sidebar.module.css

@@ -1,10 +1,18 @@
 .sidebar {
   width: 260px;
-  background-color: #f7f9fc;
+
   padding: 24px;
   display: flex;
   flex-direction: column;
   border-right: 1px solid #eaf0f6;
+
+  background-color: var(--bg-color);
+  color: var(--text-color);
+
+  border-right: 1px solid var(--accent-color);
+  transition: background-color 0.3s, color 0.3s;
+
+
 }
 
 .logo {

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styles from './Sidebar.module.css';
 import { FiPlus, FiX } from 'react-icons/fi';
+import Themetogglebutton from './context/Themetogglebutton';
 
 interface HistoryItem {
   sessionId: string;
@@ -35,11 +36,13 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, onNewChat, onRestore
         aria-modal="true"
         aria-label="Sidebar navigation"
       >
+        <Themetogglebutton/>
         <div className={styles.logo}>
           <img src="https://apiconf.net/logo2025.svg" alt="APIConf Logo" />
           <button className={styles.closeButton} onClick={onClose}>
             <FiX />
           </button>
+
         </div>
 
         <button className={styles.newChatButton} onClick={onNewChat}>

frontend/src/components/context/ThemeContext.tsx

@@ -0,0 +1,53 @@
+import { createContext, useState, useEffect,ReactNode } from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+    theme: "light",
+    toggleTheme: () => {},
+
+});
+
+interface ThemeProviderProps {
+    children: ReactNode;
+}
+
+export const ThemeProvider:React.FC<ThemeProviderProps> = ({children}) => {
+    const [theme, setTheme] =useState<Theme>("light")
+    ;
+    useEffect(() => {
+    const savedTheme = localStorage.getItem("chat-app-theme") as Theme;
+    if (savedTheme) {
+      setTheme(savedTheme);
+      document.documentElement.setAttribute("data-theme", savedTheme);
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    localStorage.setItem("chat-app-theme", newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  };
+   return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+
+
+
+
+
+
+
+
+
+

frontend/src/components/context/Themetogglebutton.module.css

@@ -0,0 +1,58 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; 
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--toggle-bg, #ccc);
+  transition: 0.4s;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 6px;
+  font-size: 16px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 24px;
+  width: 24px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+input:checked + .slider {
+  background-color: var(--toggle-active, #4cafef);
+}
+
+input:checked + .slider:before {
+  transform: translateX(30px);
+}
+
+/* Icon styling */
+.icon {
+  z-index: 2;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+}

frontend/src/components/context/Themetogglebutton.tsx

@@ -0,0 +1,20 @@
+import {useContext} from "react";
+import { ThemeContext } from "./ThemeContext";
+import styles from "./Themetogglebutton.module.css";
+
+export default function Themetogglebutton() {
+    const {theme, toggleTheme} = useContext(ThemeContext);
+
+    return(
+        <label className={styles.switch}>
+            <input
+            type="checkbox" 
+        onChange={toggleTheme} 
+        checked={theme === "dark"} 
+      />
+      <span className={styles.slider}>
+        <span className={styles.icon}>{theme === "dark" ? "🌙" : "☀️"}</span>
+      </span>
+        </label>
+    )
+}

frontend/src/index.css

@@ -10,6 +10,11 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+[data-theme="dark"] {
+  --bg-color: #121212;
+  --text-color: #f0f0f0;
+  --accent-color: #1e90ff;
+}
 
 * {
   box-sizing: border-box;