Describe the enhancement
The current EDGEx project lacks a dark mode toggle, which is a widely requested feature to improve accessibility and user experience, especially for low-light environments.
Why is this important?
- Dark mode reduces eye strain for users browsing at night or in dark environments.
- It modernizes the UI and makes the app visually appealing to a broader audience.
- Many modern web apps support dark mode as a standard feature.
Proposed Solution
- Implement a dark mode toggle button (e.g., in the navbar or sidebar).
- Use CSS variables or Tailwind CSS classes to switch between light and dark themes dynamically.
- Store user preference in
localStorage to persist the choice across sessions.
- Optionally, use the user’s OS color scheme preference (
prefers-color-scheme media query) as the default.
- Test responsiveness and readability for both modes on all devices.
Steps to Implement:
- Define CSS variables or Tailwind config for light and dark themes.
- Add a toggle button in the UI that switches themes on click.
- Update the app's root or body class to reflect the current theme.
- Save user preference and load it on page load.
- Ensure all components have styles for both themes.
Describe the enhancement
The current EDGEx project lacks a dark mode toggle, which is a widely requested feature to improve accessibility and user experience, especially for low-light environments.
Why is this important?
Proposed Solution
localStorageto persist the choice across sessions.prefers-color-schememedia query) as the default.Steps to Implement: