Skip to content

Commit

Permalink
working on dark/light themes
Browse files Browse the repository at this point in the history
  • Loading branch information
Sabeer-Junaid committed Jun 13, 2024
1 parent 5eab053 commit 38dbc71
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 2 deletions.
10 changes: 10 additions & 0 deletions assets/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,13 @@ shareBtn.addEventListener("click", async () => {
console.error("Error sharing quote:", error);
}
});


// Get the theme toggle button
const themeToggle = document.getElementById('theme-toggle');

// Add an event listener to the button
themeToggle.addEventListener('click', () => {
// Toggle the dark theme class on the body element
document.body.classList.toggle('dark-theme');
});
14 changes: 14 additions & 0 deletions assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ body {
display: flex;
flex-direction: column;
height: 100vh;
transition: background-color 0.5s;
}

html{
--light-logo: url('assets/logo.png');
--dark-logo: url('assets/logo2.png');
}

:root {
Expand Down Expand Up @@ -193,3 +199,11 @@ body {
.hidden {
display: none;
}

/* Light Theme */

body.dark-theme,
.quote.dark-theme{
background-color: white;
color: black;
}
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<!--Navbar-->
<div class="navbar container">
<div class="menu">
<button id="about-btn" class="btn">About</button>
<button id="theme-toggle" class="btn">About</button>
</div>
<div class="menu ml-auto">
<img src="assets/images/logo.png" style="height: 2rem" />
Expand All @@ -65,7 +65,7 @@

<!--Main-->
<div class="cover-logo container">
<img src="assets/images/logo.png" />
<img src="assets/images/logo.png"/>
</div>

<div class="content container">
Expand Down

0 comments on commit 38dbc71

Please sign in to comment.