From 6cd38acfe353806e60a28062face113fda447f20 Mon Sep 17 00:00:00 2001
From: Pranjal2506 <118126928+Pranjal2506@users.noreply.github.com>
Date: Thu, 21 Nov 2024 20:23:22 +0530
Subject: [PATCH] task done

---
 frontend/Untitled-1.txt |  3 +++
 frontend/index.html     | 31 +++++++++++++++++++++++++++++--
 frontend/styles.css     |  4 ++++
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 frontend/Untitled-1.txt
diff --git a/frontend/Untitled-1.txt b/frontend/Untitled-1.txt
new file mode 100644
index 0000000..ed68946
--- /dev/null
+++ b/frontend/Untitled-1.txt
@@ -0,0 +1,3 @@
+git add.
+git commit -m "hello"
+git push origin master
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index c3f97ab..837ba9c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,7 +8,34 @@
     <title>LeetCode Leaderboard</title>
 </head>
 <body class="bg-gray-900 text-white p-5">
-    <!-- <canvas id="myChart" style="width:100%;max-width:600px"></canvas> -->
+    <div style="display: flex; justify-content: flex-end;">
+        <button id="theme-toggle" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-blue-200 focus:outline-none focus:ring-6 focus:ring-blue-200">
+            Toggle Dark/Light Mode
+        </button>
+    </div>
+    
+    <script>
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const body = document.body;
+
+        // Check for saved user preference, if any, on load of the website
+        if (localStorage.getItem('theme') === 'light') {
+            body.classList.remove('bg-gray-900', 'text-white');
+            body.classList.add('bg-white', 'text-black');
+        }
+
+        themeToggleBtn.addEventListener('click', () => {
+            if (body.classList.contains('bg-gray-900')) {
+                body.classList.remove('bg-gray-900', 'text-white');
+                body.classList.add('bg-white', 'text-black');
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.remove('bg-white', 'text-black');
+                body.classList.add('bg-gray-900', 'text-white');
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+    </script>
     <div class="container mx-auto my-10">
         <div class="">
             <!-- Leaderboard -->
@@ -91,4 +118,4 @@ <h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
     <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/frontend/styles.css b/frontend/styles.css
index a53c97c..00ceb4f 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -15,3 +15,7 @@ tr {
 tr:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }
+button{
+    position: absolute;
+    bottom:50px;
+}
