Skip to content

Commit

Permalink
added dark mode button (#340)
Browse files Browse the repository at this point in the history 
<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
<!--Please include a brief description of the changes-->


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #329

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [ ] ()

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->


![image](https://github.com/user-attachments/assets/e07a1707-a525-43b3-9588-086ca96a1e82)

## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [x] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [x] I have updated my branch and synced it with project `main` branch
before making this PR
- [x] I have performed a self-review of my code
- [x] I have tested the changes thoroughly before submitting this pull
request.
- [x] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [x] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 15, 2024
2 parents 7734aed + 1aef4f0 commit 75c9ac2
Showing 1 changed file with 102 additions and 0 deletions.
102 changes: 102 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- Add this line in the <head> section if Font Awesome is not included -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
Expand Down Expand Up @@ -484,10 +487,109 @@
</li>
</ul>
</div>
<button id="darkModeToggle" class="btn btn-secondary" style="margin-left: 10px;">
<i class="fas fa-sun" id="toggleIcon" style="font-size: 20px;"></i>
<span id="toggleText">Light Mode</span>
</button>
</div>
</div>
</nav>
<style>
.navbar {
transition: background-color 0.3s, color 0.3s;
}

.navbar .navbar-brand,
.navbar .nav-link {
font-family: var(--ff-philosopher);
color: black;
}

.navbar .nav-link:hover {
color: #007bff;
}


.dark-mode {
background-color: #343a40;
color: white;
}

.dark-mode .navbar .navbar-brand,
.dark-mode .navbar .nav-link {
color: white;
}

.dark-mode .navbar .nav-link:hover {
color: #61dafb;
}


#darkModeToggle {
display: flex;
align-items: center;
background-color: #f8f9fa;
color: black;
border: none;
border-radius: 5px;
padding: 8px 12px;
transition: background-color 0.3s, color 0.3s;
}

#darkModeToggle:hover {
background-color: #e2e6ea;
}

#darkModeToggle .fas {
margin-right: 5px;
font-size: 20px;
}

.dark-mode #darkModeToggle {
background-color: #495057;
color: white !important;
}

.dark-mode #darkModeToggle:hover {
background-color: #6c757d;
;
}

.dark-mode #darkModeToggle .fas {
color: #f8f9fa;
}


.fas {
transition: color 0.3s;
}
</style>
<script>document.getElementById('darkModeToggle').addEventListener('click', function() {

document.body.classList.toggle('dark-mode');
const navbar = document.getElementById('top');
navbar.classList.toggle('dark-mode');


const toggleIcon = document.getElementById('toggleIcon');
const toggleText = document.getElementById('toggleText');

if (document.body.classList.contains('dark-mode')) {
toggleIcon.classList.remove('fa-sun');
toggleIcon.classList.add('fa-moon');
toggleText.textContent = ' Dark Mode';
} else {
toggleIcon.classList.remove('fa-moon');
toggleIcon.classList.add('fa-sun');
toggleText.textContent = 'Light Mode';
}
});


document.body.classList.add('light-mode');


</script>
<!--Navbar End-->


Expand Down

0 comments on commit 75c9ac2

Please sign in to comment.