theme

src/App.jsx

@@ -1,5 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./Home/Home";
+// import './index.css'
+// import './App.css';
 
 const App = () => {
   return (

src/Home/Home.jsx

@@ -1,7 +1,35 @@
+import { useEffect } from 'react';
+import { toggleTheme, initializeTheme } from '../utils/theme.js';
+
 const Home = () => {
+
+  useEffect(() => {
+    initializeTheme(); // Initialize theme on page load
+
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    themeToggleBtn.addEventListener('click', toggleTheme);
+
+    return () => {
+      themeToggleBtn.removeEventListener('click', toggleTheme);
+    };
+  }, []);
+
   return (
-    <div>Home</div>
-  )
-}
+    <div className="text-container-dark dark:text-container-light ">
+      Home
+      <button id="theme-toggle" className="mt-4 px-4 py-2 bg-primary-light dark:bg-primary-dark text-white rounded-lg">
+        Toggle Theme
+      </button>
+
+      <div className="container">
+        <h1>Login</h1>
+        <form>
+          <button className='cool' type="submit">Submit</button>
+        </form>
+      </div>
+
+    </div>
+  );
+};
 
-export default Home
+export default Home;

src/index.css

@@ -1,3 +1,62 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* styles.css */
+
+/* Light Theme (default) */
+:root {
+    --background-color: #F3F4F6;
+    --container-color: #FFFFFF;
+    --primary-button-color: #1E3A8A;
+    --hover-button-color: #1C3AA9;
+    --text-color: #000000;
+  }
+
+  /* Dark Theme */
+  html.dark {
+    --background-color: #010B18;
+    --container-color: #1F2937;
+    --primary-button-color: #3B82F6;
+    --hover-button-color: #2563EB;
+    --text-color: #FFFFFF;
+  }
+
+  /* Apply these theme variables to your elements */
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  .container {
+    background-color: var(--container-color);
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  button {
+    /* background-color: var(--primary-button-color); */
+    /* color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer; */
+  }
+
+  button:hover {
+    background-color: var(--hover-button-color);
+  }
+
+
+.cool{
+    background-color: red;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.cool .dark{
+    background-color: yellow;
+}

src/utils/theme.js

@@ -0,0 +1,38 @@
+export function toggleTheme() {
+    const html = document.documentElement;
+    const currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme === 'dark') {
+      html.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      html.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  }
+
+  export function initializeTheme() {
+    const savedTheme = localStorage.getItem('theme');
+
+    if (savedTheme) {
+      // Apply the saved theme
+      if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    } else {
+      // Apply system preference or default to light mode
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (prefersDark) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+
+      // Save the system preference or default to light
+      localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
+    }
+  }
+

tailwind.config.js

@@ -5,8 +5,20 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'background-light': '#F3F4F6',
+        'background-dark': '#010B18',
+        'container-light': '#FFFFFF',
+        'container-dark': '#1F2937',
+        'primary-light': '#1E3A8A',
+        'primary-dark': '#3B82F6',
+        'hover-light': '#2563EB',
+        'hover-dark': '#2563EB',  
+      },
+    },
   },
+  darkMode: "class",
   plugins: [],
 }