GSSoC 25enhancementgood first issuelevel 3
倉庫指標
- 星標
- (14 顆星)
- PR 合併指標
- (30 天內沒有已合併 PR)
描述
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
localStorageto persist the choice across sessions. - Optionally, use the user’s OS color scheme preference (
prefers-color-schememedia 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.