Added dark mode toggle feature #609
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
houndci-bot
reviewed
Oct 26, 2024
| body.classList.toggle("dark-mode"); | ||
|
|
||
| // Save user preference | ||
| const isDarkMode = body.classList.contains("dark-mode"); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| const body = document.body; | ||
|
|
||
| // Check for saved user preference | ||
| const darkModeEnabled = localStorage.getItem("dark-mode") === "true"; |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| document.addEventListener("DOMContentLoaded", function () { | ||
| const toggleButton = document.getElementById("toggle-button"); | ||
| const toggleIcon = document.getElementById("toggle-icon"); | ||
| const body = document.body; |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| @@ -0,0 +1,23 @@ | |||
| document.addEventListener("DOMContentLoaded", function () { | |||
| const toggleButton = document.getElementById("toggle-button"); | |||
| const toggleIcon = document.getElementById("toggle-icon"); | |||
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| @@ -0,0 +1,23 @@ | |||
| document.addEventListener("DOMContentLoaded", function () { | |||
| const toggleButton = document.getElementById("toggle-button"); | |||
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Title: Add Dark Mode Toggle Feature
Description:
Hey team! This pull request brings a sleek dark mode toggle to the Rails Girls Guides project. Now, users can easily switch between light and dark themes to suit their preferences.
Key Changes:
Header Update: Added a handy toggle button with sun and moon icons to switch between themes.
JavaScript Integration: Included a script to manage dark mode toggling, with preferences saved in localStorage.
CSS Styles: Crafted styles for dark mode, tweaking text and background colors for optimal readability.
Footer Update: Ensured dark mode consistency throughout the site, including the footer.
User Experience:
Easy Toggle: Users can switch themes via a button in the header, making it super accessible.
Persistent Preferences: The chosen theme is saved, so users keep their preference across sessions.