Skip to content

feat(theme-toggle): add a theme toggle button to the DashboardLayout dropdown menu. - #97

Open
d3precatedDev wants to merge 2 commits into
studyield:developfrom
d3precatedDev:feat/dark-mode-toggle
Open

feat(theme-toggle): add a theme toggle button to the DashboardLayout dropdown menu.#97
d3precatedDev wants to merge 2 commits into
studyield:developfrom
d3precatedDev:feat/dark-mode-toggle

Conversation

@d3precatedDev

Copy link
Copy Markdown

Description

Adds a dark mode toggle button to the dropdown menu of the dashboard layout.

Type of Change

  • New feature (non-breaking change that adds functionality)
  • Refactoring (no functional changes)

Related Issues

Closes #38

Changes Made

  • Context & Hook: Created UseTheme.ts containing the ThemeProvider context and the useTheme hook to centralize theme management.
  • App Wrapper: Wrapped the root application with ThemeProvider in main.tsx.
  • Settings Page: Integrated the new hook in AppearanceSettingsPage.tsx, replacing the local theme state and system media queries.
  • Toggle Component: Created a dynamic ThemeToggleButton.tsx component supporting multiple display variants (standard and menu item).
  • Dashboard Layout: Added the toggle button as a menu item in the DashboardLayout.tsx dropdown.

Screenshots / Videos

studyield-dark studyield-light

Testing

  • I have tested these changes locally

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • My changes generate no new warnings
  • I have checked that my changes don't introduce any security vulnerabilities

- Add useTheme hook and ThemeProvider
- Support light, dark, and system modes
- Persist theme selection in localStorage
- Integrate provider into main application
- Refactor appearance settings to use hook
- Create ThemeToggleButton component with animations
- Support multiple variants: icon, menu, and default
- Integrate theme switching into DashboardLayout
- Add support for dark and light mode transitions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant