Skip to content

Added Dark Mode Toggle Using HTML, CSS, and JavaScript #23

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

Open
KHUSHI-SINGH-star wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Dark Mode Toggle Using HTML, CSS, and JavaScript #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ab98dd
Added dark mod
Jul 30, 2025
f0e9a1d
Enhanced dark mode theme with better color palette
KHUSHI-SINGH-star Aug 17, 2025
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: 3 additions & 0 deletions _header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
<li class="nav-item hover-effect navbar-links-box">
<a class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold" href="supportUs.html">Our Support Us</a>
</li>
<li class="nav-item hover-effect navbar-links-box">
<button onclick="toggleMode()" id="darkModeToggle" class="nav-link text-black hover-effect navbar-links d-flex flex-column fw-bold"> ☀️ Light Mode</button>
</li>
</ul>
</div>
</div>
Expand Down
85 changes: 84 additions & 1 deletion assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,90 @@ nav{
}
/* CSS for Navbar of the website... */

/* CSS dark-mode */
body.dark-mode {
background-color: #0d1117 !important; /* Deep dark bg */
color: #e6edf3 !important; /* Off-white text */
}

/* Navbar */
.dark-mode .navbar {
background-color: #161b22 !important;
color: #f0f6fc !important;
border-bottom: 1px solid #30363d;
}

.dark-mode .nav-link,
.dark-mode .navbar-brand {
color: #e6edf3 !important;
}
.dark-mode .nav-link:hover {
color: #58a6ff !important; /* Accent Blue */
}

/* Buttons */
.dark-mode .btn-primary {
background-color: #21262d !important;
border-color: #30363d !important;
color: #f0f6fc !important;
}
.dark-mode .btn-primary:hover {
background-color: #2d333b !important;
}

/* Cards, Containers, Sections */
.dark-mode .card,
.dark-mode .container {
background-color: #161b22 !important;
color: #e6edf3 !important;
border: 1px solid #30363d !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Text Variants */
.dark-mode .text-green,
.dark-mode .text-orange,
.dark-mode .text-success {
color: #9ecbff !important; /* Muted blueish accent */
}

.dark-mode .text-success-light {
color: #3fb950 !important; /* Green accent */
}
.dark-mode .text-orange-light {
color: #ff7b72 !important; /* Orange accent */
}

/* Background Variants */
.dark-mode .bg-white,
.dark-mode .bg-yellow,
.dark-mode .bg-orange,
.dark-mode .bg-success {
background-color: #21262d !important;
}

/* Footer */
.dark-mode footer {
background-color: #161b22 !important;
color: #c9d1d9 !important;
border-top: 1px solid #30363d;
}

.dark-mode .social-media-links a:hover {
background-color: rgba(88, 166, 255, 0.2) !important;
color: #58a6ff !important;
}

/* Scrollbar */
.dark-mode *::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #161b22;
}
.dark-mode *::-webkit-scrollbar-thumb {
background-color: #30363d;
border-radius: 5px;
}

/* Main index page CSS... */
.times-roman-font {
Expand Down Expand Up @@ -276,4 +359,4 @@ nav{
color: red;
background: #ccc7c7a7;
box-shadow: #aba48c 2px 1px;
}
}
16 changes: 16 additions & 0 deletions assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
let reachNums = document.getElementsByClassName('reached-nums-data');
let isAlreadyScrolled = false;


function toggleMode() {
const body = document.body;
const toggleBtn = document.getElementById('darkModeToggle');

body.classList.toggle('dark-mode');

if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
toggleBtn.textContent = '🌙 Dark Mode';
} else {
localStorage.setItem('theme', 'light');
toggleBtn.textContent = '☀️ Light Mode';
}
}

const loadAllReachedValues = async()=> {
for(let i = 0; i < reachNums.length; i++) {
let e = reachNums[i], inVal = 0;
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,8 @@ <h1 class="font-h3 h2 text-white times-roman-font">
class="rounded shadow about-gurukul-img" style="width: 500px; height: 250px" alt="..." />
</div>
<div style="" class=" d-flex flex-column justify-content-start ">
<h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<p class="w-100 founders-message-data" style="text-align: justify; font-size: x-large;">
<h1 class="para mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<p class="para w-100 founders-message-data" style="text-align: justify; font-size: x-large;">
Welcome to Gurukul Dream Foundation, where we empower the youth of tier 2/3 cities. Our goal is to provide tailored support and opportunities for young individuals to thrive. Through workshops, internships, and more, we aim to equip them with the skills they need to succeed. Join us as we shape a brighter future for every aspiring young mind.
</p>
<!-- <button type="button" style="width: 150px" class="btn btn-dark mt-md-3 mt-1">
Expand Down Expand Up @@ -343,7 +343,7 @@ <h1>Who we are</h1>
</div>
<div style="" class=" d-flex flex-column justify-content-start ">
<h1 class="mt-0 mt-md-0 h1 text-green libre-baskerville-regular">Founder's Message</h1>
<p class="w-100 founders-message-data" style="text-align: justify; font-size: x-large;">
<p class="para w-100 founders-message-data" style="text-align: justify; font-size: x-large;">
Gurukul Dream Foundation is dedicated to connecting youth with job opportunities, internships, and employment through non-profit and faith-based organizations. The mission is to create a respectful environment fostering skill development and community change. Gurukul nurtures talent, providing an environment for exponential growth in professional, personal, and social life. It serves as a platform for young talent, igniting their potential despite failures. Akash Barua's message to the next generation emphasizes education, resilience, and self-motivation, urging them to be role models and overcome challenges.
</p>
<!-- <button type="button" style="width: 150px" class="btn btn-dark mt-md-3 mt-1">
Expand Down