GSSoC 25enhancementgood first issuelevel 3
仓库指标
- 星标
- (14 个星标)
- PR 合并指标
- (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.