Skip to content

Conversation

@SinghSwayam
Copy link

@SinghSwayam SinghSwayam commented Dec 16, 2025

Description

This PR implements a full system-wide Dark Mode for the application (Issue #342). It introduces a ThemeContext for centralized theme management and ensures the app automatically respects the user's system preference on first load.

Key Changes:

  • Theme Context: Created src/Context/ThemeContext.js to manage light/dark state and provide colors to components.
  • Animated Toggle: Integrated @theme-toggles/react (specifically the Expand animation) for a polished UX.
  • System Preference: The app now detects and applies the user's OS color scheme (Light/Dark) by default.
  • Component Updates: Updated Header, Timeline, App, and other components to consume dynamic colors from the new context.

Dependencies Added:

  • @theme-toggles/react (^4.1.0)

Fixes #342

Type of Change:

  • Code
  • User Interface

Code/Quality Assurance Only

  • New feature

How Has This Been Tested?

I have performed manual testing to verify the following scenarios:

  1. Toggle Functionality: Verified that clicking the sun/moon icon successfully toggles the theme.
  2. System Default: Verified that the app correctly loads in Dark Mode if the OS system preference is set to Dark Mode.
  3. Visual Consistency: Checked all text, backgrounds, and cards (Projects, Timeline, Events) to ensure appropriate contrast and visibility in both modes.

Screenshots:
Before:
image
After:
image

Before:
image
After:
image

Before:
image
After:
image

Checklist:

  • My PR follows the style guidelines of this project
  • I have performed a self-review of my own code or materials
  • I have commented my code or provided relevant documentation, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • I have attached link of deployed site : https://anitab-org-github-io.vercel.app/
  • Any dependent changes have been merged

Code/Quality Assurance Only

  • My changes generate no new warnings
  • My PR currently breaks something (fix or feature that would cause existing functionality to not work as expected)
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been published in downstream modules

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.

Implementation of dark mode

1 participant