Merge pull request #74 from OpenTekHub/revert-57-gh-pages

Revert "updated theme toggle with all new themes"
OpenTekHub · Oct 4, 2024 · 97b2e1b · 97b2e1b
2 parents b960742 + d672298
commit 97b2e1b
Show file tree

Hide file tree

Showing 6 changed files with 3 additions and 100 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
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,15 +13,12 @@
 
 <body>
     <header class="header">
-        <nav>
-            <h1>OpenTekHub Blockchain Repository</h1>
-            <div class="theme-switch" id="theme-switch"></div>
-        </nav>
+        <h1>OpenTekHub Blockchain Repository</h1>
     </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,42 +1,3 @@
-// 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
@@ -197,4 +158,3 @@ 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: linear-gradient(135deg, rgb(36, 11, 54), rgb(195, 20, 50));
+    background-color: #2E073F;
     color: #EBD3F8;
     padding: 1.2rem;
     font-family: "Mate SC", serif;
@@ -251,55 +251,4 @@ 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;
 }