Skip to content

feat: Add dark mode theme and dynamic title styling#2072

Open
yashpadaliya08 wants to merge 1 commit intoTusharKesarwani:mainfrom
yashpadaliya08:feature/dark-mode-ui
Open

feat: Add dark mode theme and dynamic title styling#2072
yashpadaliya08 wants to merge 1 commit intoTusharKesarwani:mainfrom
yashpadaliya08:feature/dark-mode-ui

Conversation

@yashpadaliya08
Copy link
Copy Markdown

🛠️ Issue (Number)

Closes # [Insert Issue Number Here]

Description

Added a fully functional Dark Mode feature to improve user experience, accessibility, and visual comfort.

  • Theme Toggle: Added a sun/moon toggle switch (<button>) to the main navigation bar.
  • Dark Mode Styling: Implemented rich .dark-mode CSS classes targeting cards, backgrounds, and text while preserving the original deep blue theme color in the navbar/footer to organically complement the layout and logo.
  • Theme Alignment fix: Refactored the duplicate overlapping header texts (PROJECTS and Projects) to use Flexbox and absolute positioning instead of brittle negative margins. This fundamentally prevents the text misalignment bug currently present on differing screen resolutions.
  • Theme Persistence: Added local storage save/load functionality in script.js so user theme preferences persist across reloads.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • I have made this from my own
  • I have taken help from some online resourses
  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • The title of my pull request is a short description of the requested changes.

ATTACH SCREEN-SHOTS / DEPLOYMENT LINK

image image

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 3, 2026

Deploy Preview for frontendprojects ready!

Name Link
🔨 Latest commit 8162e87
🔍 Latest deploy log https://app.netlify.com/projects/frontendprojects/deploys/69cf4605fcb04400083c0a08
😎 Deploy Preview https://deploy-preview-2072--frontendprojects.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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