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

added a toggle button #315

Closed
wants to merge 1 commit into from
Closed

added a toggle button #315

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
31 changes: 14 additions & 17 deletions darkMode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
const checkbox = document.getElementById('checkbox')
const modeLabel = document.getElementById('mode-label')
// Get the toggle checkbox
const toggleSwitch = document.getElementById('toggleDarkMode');

// Check if dark mode is already enabled
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
checkbox.checked = true
modeLabel.textContent = 'Dark Mode'
// Check if user has previously selected dark mode
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
toggleSwitch.checked = true;
}

// Add event listener for toggle switch
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('theme', 'dark')
modeLabel.textContent = 'Dark Mode'
// Event listener for the dark mode toggle
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('darkMode', 'enabled');
} else {
document.documentElement.setAttribute('data-theme', 'light')
localStorage.setItem('theme', 'light')
modeLabel.textContent = 'Light Mode'
document.body.classList.remove('dark-mode');
localStorage.setItem('darkMode', 'disabled');
}
})
});
61 changes: 61 additions & 0 deletions darkmode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* Default light mode styles */
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
text-align: center;
padding: 50px};

/* Toggle switch styling */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(26px);
}

/* Dark mode styles */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
15 changes: 11 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="darkMode.css">

</head>

<body>
Expand Down Expand Up @@ -51,10 +53,14 @@
<li><a href="#others">Others</a></li>
<li class="login"><a href="login/login.html">Login</a></li>
<!-- Theme Toggle -->
<li><label class="switch">
<input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
<span class="slider"></span>
</label></li>
<li><div class="container">
<h1>Dark Mode Toggle Example</h1>
<label class="switch">
<input type="checkbox" id="toggleDarkMode">
<span class="slider"></span>
</label>
</div>
</li>
</ul>
<!-- Hamburger Menu Icon -->
<img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
Expand Down Expand Up @@ -544,6 +550,7 @@ <h2>Contact Us</h2>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src='darkMode.js'></script>

<script>
window.embeddedChatbotConfig = {
Expand Down
16 changes: 8 additions & 8 deletions pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@

## Type of PR
- **Add X in the box to specify the improvement type.**
- [X] Bug fix
- [ ] Feature enhancement
- [ ] Bug fix
- [X] Feature enhancement
- [ ] Documentation update
- [ ] Other (specify): ___________


## Description
This pull request aims to [briefly describe what the pull request does, e.g., "add a new feature," "fix a bug," "improve documentation," etc.].
This pull request aims to add a new feature{dark mode switch}

## Screenshots / Videos (if applicable)
**Before:**
- [Describe the state before the changes, e.g., "The section headings in the footer were misaligned, leading to an inconsistent and cluttered appearance."]
- Dark mode feature was lacking

**After:**
- [Describe the state after the changes, e.g., "The section headings in the footer are now properly aligned, providing a clean and professional look."]
- Dark moade toggle button added with corresponding changes

## Checklist
- **Add X in the box to specify.**
- [X] I have performed a self-review of my code.
- [ ] I have tested the changes thoroughly before submitting this pull request.
- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
- [ ] I have commented my code, particularly in hard-to-understand areas.
- [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
[Provide any additional context about the changes, such as specific challenges you faced or decisions you made. This can help reviewers understand the rationale behind your changes.]
Expand Down