Merge pull request #16 from shivansh023023/main

Improved Dark Mode
DhanushNehru · Oct 3, 2024 · b94facf · b94facf
2 parents bc620d0 + b9f3f8b
commit b94facf
Showing 1 changed file with 52 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -6,68 +6,73 @@
     <title>Dynamic Year Progress</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <style>
-        body {
-            transition: background-color 0.3s, color 0.3s;
-            padding: 20px; /* Adds padding around the body */
-            font-family: "Poppins", Arial, Helvetica, sans-serif;
-        }
-        /* Light theme */
-        body {
-            background-color: white;
-            color: black;
-        }
+       /* styles.css */
+/* styles.css */
+/* styles.css */
+body {
+    transition: background-color 0.5s, color 0.5s;
+    padding: 20px;
+    font-family: "Poppins", Arial, Helvetica, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 100px;
+}
 
-        /* Dark theme */
-        body.dark-mode {
-            background-color: black;
-            color: white;
-        }
+body.dark-mode {
+    background-color: black;
+    color: white;
+    /* transition: background-color 0.5s, color 0.5s; */
+}
 
-        #theme-toggle {
-            margin-top: 5px; /* Adjust as needed */
-            padding: 10px;
-            cursor: pointer;
-            display: inline-block; /* Aligns the button to the left */
-        }
+#theme-toggle {
+    margin-top: 5px;
+    padding: 10px;
+    cursor: pointer;
+    display: inline-block;
+    background-color: rgb(213, 184, 238);
+    /* transition: background-color 0.5s, color 0.5s; */
+}
 
-        #progress-img {
-            display: block; /* Centers the image */
-            margin: 10px auto; /* Adds margin around the image for spacing */
-            border-radius: 1rem;
-        }
+#progress-img {
+    display: block;
+    margin: 10px auto;
+    border-radius: 1rem;
+    /* transition: transform 0.5s, opacity 0.5s; */
+}
+
+#progress-img.loading {
+    opacity: 0.5;
+    transition: opacity 0.5s;
+}
     </style>
 </head>
 <body>
     <h1>Year Progress</h1>
     <img id="progress-img" src="https://year-in-progress.vercel.app/year-progress" alt="Year Progress" style="width: 450px; height: 75px;">
 
     <!-- Button positioned directly below the progress bar and aligned to the left -->
-    <button id="theme-toggle">Switch to Dark Mode</button>
+    <button id="theme-toggle"><i>Switch to Dark Mode</i></button>
 
     <script>
-        const themeToggleButton = document.getElementById('theme-toggle');
-        const body = document.body;
+        // script.js
+const themeToggleButton = document.getElementById('theme-toggle');
+const body = document.body;
 
-        // Function to update theme
-        function updateTheme() {
-            if (body.classList.contains('dark-mode')) {
-                body.classList.remove('dark-mode');
-                themeToggleButton.textContent = 'Switch to Dark Mode';
-            } else {
-                body.classList.add('dark-mode');
-                themeToggleButton.textContent = 'Switch to Light Mode';
-            }
-            updateProgressImg();
-        }
+function updateTheme() {
+    body.classList.toggle('dark-mode');
+    themeToggleButton.textContent = body.classList.contains('dark-mode') ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+    updateProgressImg();
+}
 
-        // Function to update progress image source based on theme
-        function updateProgressImg() {
-            const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
-            document.getElementById('progress-img').src = `https://year-in-progress.vercel.app/year-progress?time=${Date.now()}&theme=${theme}`;
-        }
+function updateProgressImg() {
+    const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
+    document.getElementById('progress-img').src = `https://year-in-progress.vercel.app/year-progress?time=${Date.now()}&theme=${theme}`;
+}
 
-        themeToggleButton.addEventListener('click', updateTheme);
-        setInterval(updateProgressImg, 1000);
+themeToggleButton.addEventListener('click', updateTheme);
+setInterval(updateProgressImg, 1000);
     </script>
 </body>
 </html>