Skip to content

Commit

Permalink
Added dark mode toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@thevijayshankersharma
thevijayshankersharma committed May 17, 2024
1 parent ebabe57 commit 8531b9f
Show file tree
Hide file tree
Showing 9 changed files with 492 additions and 225 deletions.
404 changes: 204 additions & 200 deletions package-lock.json
View file

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions public/css/admin_css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,46 @@ body{
background: #ececec;
}

/* Dark Mode */

.dark-mode {
background-color: #121212;
color: #e0e0e0;
}

.dark-mode #darkModeToggle {
background-color: #333; /* Dark background color */
}

.dark-mode #darkModeIcon {
color: #e0e0e0; /* Dark mode icon color */
}

/* Dark Mode Toggle Button - Hover */
#darkModeToggle:hover {
background-color: #555; /* Dark background color on hover */
}

/* Dark Mode Toggle Button */
#darkModeToggle {
width: 50px;
height: 50px;
border: none; /* Remove border */
position: fixed;
top: 20px;
right: 20px;
z-index: 1000; /* Ensure it's above other content */
}

#darkModeIcon {
font-size: 24px;
}

.dark-mode .custom-box {
background-color: #333 !important; /* Dark mode background color for the login container */
color: #e0e0e0; /* Dark mode text color for the login container */
}

/*------------ Login container ------------*/

.box-area{
Expand Down
55 changes: 55 additions & 0 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,4 +328,59 @@ body{

#contact {
margin-bottom: 50px; /* Adjust the value as needed */
}

body {
transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
background-color: #121212;
color: #e0e0e0;
}

.navbar.bg-body-secondary {
background-color: var(--bs-body-bg);
}

.dark-mode .navbar.bg-body-secondary {
background-color: #1c1c1c;
}

.dark-mode .hero_text,
.dark-mode .hero_text2,
.dark-mode .hero_text3 {
color: #e0e0e0;
}

/* Dark mode styles */
.dark-mode .navbar {
background-color: #333 !important;
}

.dark-mode .navbar .navbar-brand,
.dark-mode .navbar .nav-link,
.dark-mode .navbar .btn {
color: #e0e0e0;
}

.dark-mode .navbar-toggler {
border-color: #e0e0e0;
}

.dark-mode .navbar-toggler-icon {
filter: invert(1);
}

.dark-mode .contact .text {
color: #e0e0e0;
}

.dark-mode .title {
color: #e0e0e0;
}

.dark-mode .icons .info .head,
.dark-mode .icons .info .sub-title {
color: #e0e0e0;
}
33 changes: 31 additions & 2 deletions views/NGO-Registration.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/admin_css.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
Expand Down Expand Up @@ -88,12 +89,15 @@
</style>
</head>
<body>

<!-- Dark Mode -->
<button id="darkModeToggle" class="btn btn-dark">
<i id="darkModeIcon" class="fas fa-sun"></i>
</button>
<section class="container">
<header class="header">NGO Registration Form</header>
<br>
<hr>
<form action="/NGO-Registarion" class="form" method="POST">
<form action="/NGO-Registarion" class="form custom-box" method="POST">
<div class="input-box">
<label>NGO Name</label>
<input type="text" name="NgoName" placeholder="Enter NGO name" required />
Expand Down Expand Up @@ -125,6 +129,31 @@
</form>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
const darkModeToggle = document.getElementById('darkModeToggle');
const darkModeIcon = document.getElementById('darkModeIcon');
const body = document.body;
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Function to toggle dark mode
function toggleDarkMode() {
const isDark = body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDark);
darkModeIcon.className = isDark ? 'fas fa-moon' : 'fas fa-sun'; // Change icon based on mode
}
// Set initial mode based on localStorage
if (isDarkMode) {
toggleDarkMode();
}
// Event listener for dark mode toggle button
darkModeToggle.addEventListener('click', toggleDarkMode);
});
</script>

<script src="js/index.js"></script>

</body>
Expand Down
30 changes: 29 additions & 1 deletion views/Ngo_login.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,25 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/admin_css.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<title> NGO Login</title>
</head>
<body>
<!-- Dark Mode -->
<button id="darkModeToggle" class="btn btn-dark">
<i id="darkModeIcon" class="fas fa-sun"></i>
</button>

<!----------------------- Main Container -------------------------->

<div class="container d-flex justify-content-center align-items-center min-vh-100">

<!----------------------- Login Container -------------------------->

<div class="row border rounded-5 p-3 bg-white shadow box-area">
<div class="row border rounded-5 p-3 bg-white shadow box-area custom-box">

<!--------------------------- Left Box ----------------------------->

Expand Down Expand Up @@ -74,6 +79,29 @@

</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const darkModeToggle = document.getElementById('darkModeToggle');
const darkModeIcon = document.getElementById('darkModeIcon');
const body = document.body;
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Function to toggle dark mode
function toggleDarkMode() {
const isDark = body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDark);
darkModeIcon.className = isDark ? 'fas fa-moon' : 'fas fa-sun'; // Change icon based on mode
}
// Set initial mode based on localStorage
if (isDarkMode) {
toggleDarkMode();
}
// Event listener for dark mode toggle button
darkModeToggle.addEventListener('click', toggleDarkMode);
});
</script>
</body>
</html>
34 changes: 31 additions & 3 deletions views/User_singUp.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>User Signup Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/admin_css.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">

<style>
Expand Down Expand Up @@ -88,12 +90,15 @@ body {
</style>
</head>
<body>

<!-- Dark Mode -->
<button id="darkModeToggle" class="btn btn-dark">
<i id="darkModeIcon" class="fas fa-sun"></i>
</button>
<section class="container">
<header class="header">User Signup Form</header>
<br>
<hr>
<form action="/User_singUp" class="form" method="POST">
<form action="/User_singUp" class="form custom-box" method="POST">
<div class="input-box">
<label>Full Name</label>
<input type="text" name="fname" placeholder="Enter full name" required />
Expand Down Expand Up @@ -143,7 +148,30 @@ body {
<br>
</form>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
const darkModeToggle = document.getElementById('darkModeToggle');
const darkModeIcon = document.getElementById('darkModeIcon');
const body = document.body;
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Function to toggle dark mode
function toggleDarkMode() {
const isDark = body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDark);
darkModeIcon.className = isDark ? 'fas fa-moon' : 'fas fa-sun'; // Change icon based on mode
}
// Set initial mode based on localStorage
if (isDarkMode) {
toggleDarkMode();
}
// Event listener for dark mode toggle button
darkModeToggle.addEventListener('click', toggleDarkMode);
});
</script>
<script src="js/index.js"></script>
</body>
</html>
31 changes: 30 additions & 1 deletion views/admin_login.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,25 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/admin_css.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<title> Admin Login</title>
</head>
<body>
<!-- Dark Mode -->
<button id="darkModeToggle" class="btn btn-dark">
<i id="darkModeIcon" class="fas fa-sun"></i>
</button>

<!----------------------- Main Container -------------------------->

<div class="container d-flex justify-content-center align-items-center min-vh-100">

<!----------------------- Login Container -------------------------->

<div class="row border rounded-5 p-3 bg-white shadow box-area">
<div class="row border rounded-5 p-3 bg-white shadow box-area custom-box">

<!--------------------------- Left Box ----------------------------->

Expand Down Expand Up @@ -74,6 +79,30 @@

</div>
</div>
<!-- Custom JavaScript for dark mode -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const darkModeToggle = document.getElementById('darkModeToggle');
const darkModeIcon = document.getElementById('darkModeIcon');
const body = document.body;
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Function to toggle dark mode
function toggleDarkMode() {
const isDark = body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', isDark);
darkModeIcon.className = isDark ? 'fas fa-moon' : 'fas fa-sun'; // Change icon based on mode
}
// Set initial mode based on localStorage
if (isDarkMode) {
toggleDarkMode();
}
// Event listener for dark mode toggle button
darkModeToggle.addEventListener('click', toggleDarkMode);
});
</script>
</body>
</html>
Loading

0 comments on commit 8531b9f

Please sign in to comment.