Feature Request: Add Dark/Light Mode Toggle on Home Page #1010
Description
Feature Request: Add Dark/Light Mode Toggle on Home Page
Description
Currently, the Home page does not include a Dark/Light mode toggle, which can make the user experience inconsistent with other pages that support theme switching. Adding a toggle will allow users to switch between dark mode and light mode based on their preference.
Proposed Solution
Add a theme toggle button on the Home page navbar that allows users to switch between dark and light themes. The selected theme should be saved in localStorage so that the user's preference persists across page reloads and navigation.
Expected Behavior
A toggle button/icon appears in the Home page navbar.
Clicking the button switches between dark mode and light mode.
The selected theme is stored in localStorage.
The theme remains the same when the page is refreshed or revisited.
The toggle design should match the existing ExpenseFlow UI styling.
Possible Implementation
HTML (Navbar Toggle Button)
🌙
CSS Example
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
body.light-mode {
background-color: #ffffff;
color: #000000;
}
JavaScript
const toggleBtn = document.getElementById("theme-toggle");
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
});
window.onload = () => {
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
document.body.classList.add("dark-mode");
}
};
Benefits
Improves accessibility and user comfort
Provides consistent theming across the website
Enhances user experience, especially for night-time use
Aligns with modern UI standards