Skip to content

[FEATURE] Add dark mode toggle #2

Description

@devmaster1987

Feature Description

Add a dark mode option to the Dynamic Family Tree application.

Users should be able to switch between the current light theme and a dark theme based on their preference.

Problem

Currently, the application only supports a light theme.

Some users may prefer a darker interface for better readability in low-light environments.

Proposed Solution

Implement a dark mode toggle button in the navigation bar.

The feature should:

  • Add a toggle button in the header/navbar.
  • Switch the complete interface between light and dark themes.
  • Save the user's preference using LocalStorage.
  • Keep the preference after refreshing the page.

Expected Behavior

After clicking the dark mode toggle:

  • Background colors should change.
  • Text colors should remain readable.
  • Cards, buttons, modals, and sections should update properly.
  • User preference should persist after page refresh.

Acceptance Criteria

  • Dark mode toggle button is visible.
  • User can switch between light and dark themes.
  • Theme preference is saved in LocalStorage.
  • Theme remains after browser refresh.
  • All sections support dark mode.
  • No existing functionality is affected.

Additional Information

This issue is suitable for beginner contributors.

Suggested technologies:

  • CSS variables
  • JavaScript DOM manipulation
  • LocalStorage

No external libraries should be added.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    cssCSS and styling related changesdifficulty: easySuitable for beginner contributorsenhancementNew feature or requestgood first issueGood for newcomershelp wantedExtra attention is neededhtmlHTML structure related changesjavascriptJavaScript related changesui/uxUser interface or experience improvements

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions