updated theme toggle with all new themes

here are two themes for your website dark and light .
priyashuu · Oct 3, 2024 · 70b84da · 70b84da
1 parent 23194a3
commit 70b84da
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/Assets/moon.png b/Assets/moon.png
diff --git a/Assets/sun.png b/Assets/sun.png
diff --git a/index.html b/index.html
@@ -13,12 +13,15 @@
 
 <body>
     <header class="header">
-        <h1>OpenTekHub Blockchain Repository</h1>
+        <nav>
+            <h1>OpenTekHub Blockchain Repository</h1>
+            <div class="theme-switch" id="theme-switch"></div>
+        </nav>
     </header>
 
     <div class="central">
         <p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>
-
+        
         <section id="crypto-price-predictor">
             <h2>Crypto Price Predictor</h2>
             <div id="crypto-form">

diff --git a/script.js b/script.js
@@ -1,3 +1,42 @@
+// Dark Mode Toggle Functionality
+const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID
+const body = document.body;
+const header = document.querySelector('header');
+const footer = document.querySelector('footer');
+
+// Function to enable dark mode
+function enableDarkMode() {
+    body.classList.add('dark-mode');
+    header.classList.add('dark-mode');
+    themeSwitch.classList.add('dark-theme'); // Update the switch appearance
+    footer.classList.add('dark-mode');
+}
+
+// Function to disable dark mode
+function disableDarkMode() {
+    body.classList.remove('dark-mode');
+    header.classList.remove('dark-mode');
+    themeSwitch.classList.remove('dark-theme'); // Update the switch appearance
+    footer.classList.remove('dark-mode');
+}
+
+// Event listener for dark mode toggle button
+themeSwitch.addEventListener('click', () => {
+    if (body.classList.contains('dark-mode')) {
+        disableDarkMode(); // Switch to light mode
+        localStorage.removeItem('dark-mode'); // Remove from local storage
+    } else {
+        enableDarkMode(); // Switch to dark mode
+        localStorage.setItem('dark-mode', 'enabled'); // Save in local storage
+    }
+});
+
+// Optional: Check the initial mode on page load and apply the correct theme based on local storage
+if (localStorage.getItem('dark-mode') === 'enabled') {
+    enableDarkMode();
+} else {
+    disableDarkMode(); // Default to light mode on load if localStorage is empty
+}
 // A map of symbols to their corresponding API names
 const cryptoMap = {
     // Major cryptocurrencies
@@ -158,3 +197,4 @@ document.getElementById('predict-btn').addEventListener('click', function() {
         document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol.";
     }
 });
+
diff --git a/styles.css b/styles.css
@@ -32,7 +32,7 @@ h1, h2, h3 {
 
 .header {
     text-align: center;
-    background-color: #2E073F;
+    background: linear-gradient(135deg, rgb(36, 11, 54), rgb(195, 20, 50));
     color: #EBD3F8;
     padding: 1.2rem;
     font-family: "Mate SC", serif;
@@ -251,4 +251,55 @@ h1, h2, h3 {
 .bot-text{
     font-size: 1rem;
     margin-block: 0px;
+}
+
+
+/* Here are the styles for the theme toggel  */
+/* Theme switcher */
+.theme-switch {
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+    border-radius: 30px;
+    background: linear-gradient(116deg, #ffffff, #a00101);
+    position: relative;
+    cursor: pointer;
+    transition: background 0.3s ease-in-out;
+    vertical-align: middle;
+}
+
+.theme-switch::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px; /* Initial position for light mode */
+    width: 24px;
+    height: 24px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out;
+    background-image: url('Assets/moon.png'); /* Icon for light mode */
+}
+
+.theme-switch.dark-theme {
+    background: linear-gradient(92deg, #ff0000, #ffffff); /* Background for dark mode */
+}
+
+.theme-switch.dark-theme::before {
+    left: 33px; /* Move the toggle to the right for dark mode */
+    background-image: url('Assets/sun.png'); /* Icon for dark mode */
+}
+
+/* Other dark mode styles */
+.header.dark-mode {
+    background: linear-gradient(303deg, #000000, #500210);
+} 
+
+body.dark-mode{
+    background: linear-gradient(303deg, #000000, #500210);
+    color: #ffecec;
+}
+p.tagline.dark-mode{
+    color: #ffffff;
 }