Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "updated theme toggle with all new themes" #74

Merged
merged 1 commit into from
Oct 4, 2024
Merged

Revert "updated theme toggle with all new themes" #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .vscode/settings.json
View file
Open in desktop

This file was deleted.

Binary file removed Assets/moon.png
View file
Open in desktop
Binary file not shown.
Binary file removed Assets/sun.png
View file
Open in desktop
Binary file not shown.
7 changes: 2 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
40 changes: 0 additions & 40 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -197,4 +158,3 @@ document.getElementById('predict-btn').addEventListener('click', function() {
document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol.";
}
});

53 changes: 1 addition & 52 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}