[FEATURE]: Add Accent Color Customization with Persistent User Preference

[Harini-2811]

🚀 Feature Description

Introduce an Accent Color Picker that allows users to personalize the website by selecting from a curated set of accent colors. The selected accent color should be applied consistently across the UI and persist across browser sessions.

💡 Problem Statement

The application currently uses a fixed accent color, offering the same visual experience to every user. While functional, it lacks personalization and makes the interface feel less interactive. Allowing users to customize the accent color enhances engagement without affecting the existing design or functionality.

📋 Proposed Solution

Implement a lightweight Accent Color Picker that enables users to choose from a predefined palette of colors.

The feature should:

• Display a small selection of predefined accent colors.
• Apply the chosen color globally using CSS variables.
• Update buttons, links, highlights, focus states, and other accent-based UI elements in real time.
• Save the selected color in localStorage.
• Automatically restore the saved preference when the user revisits the website.
• Include a "Reset to Default" option.

🔄 Alternatives Considered

• Using a native color picker (<input type="color">), which offers unlimited customization but may produce colors that don't align with the application's design language.
• Maintaining a fixed accent color, which keeps the UI consistent but doesn't provide any personalization.

A curated palette offers the best balance between flexibility and design consistency.

📸 Mockups/Examples

A simple palette could be placed within the existing theme/settings section.

Example:

🔵 Blue (Default)

🟢 Green

🟣 Purple

🟠 Orange

🔴 Red

Selecting a color immediately updates the application's accent elements and saves the preference.

🎯 Acceptance Criteria

• Users can select an accent color from a predefined palette.
• The selected accent color is applied consistently across accent-based UI elements.
• The selected color persists across page reloads using localStorage.
• A reset option restores the default accent color.
• Existing functionality and responsiveness remain unaffected.

📎 Additional Context

This is a frontend-only enhancement focused on improving personalization and user experience. Using CSS custom properties keeps the implementation scalable and easy to maintain while minimizing changes to existing components.

🏷️ Component

• Frontend (React)
• Backend (Express)
• Python Backend (FastAPI)
• Database
• Documentation
• Other

---

As a GSSoC contributor, I would like to work on this issue.

[Harini-2811]

Hi @Saatvik-GT

Hi! I'd like to work on this feature.

Proposed Approach

• Create a reusable Accent Color Picker with a curated set of predefined colors to ensure visual consistency.
• Use CSS custom properties (variables) so the selected accent color updates globally without requiring changes to individual components.
• Persist the user's selection using localStorage and restore it automatically on subsequent visits.
• Include a "Reset to Default" option to allow users to revert to the original theme.
• Ensure the implementation is responsive, accessible, and integrates seamlessly with the existing UI without affecting current functionality.

This approach keeps the implementation modular, maintainable, and frontend-only. If it aligns with the project's direction, I'd be happy to work on it. Thank you!

[28106]

Hi @Harini-2811, I’d like to work on this feature.

I’ll implement an accent color customization flow with a curated color palette and persistent user preference support. My plan is to manage the selected accent color through CSS variables so the change can be applied consistently across accent-driven UI elements such as buttons, links, highlights, and focus states without requiring heavy component-level changes. I’ll also add localStorage persistence so the chosen accent color is restored automatically across browser sessions, along with a reset option to return to the default theme color.

While implementing it, I’ll make sure the solution integrates cleanly with the existing theme/settings structure, remains responsive, and keeps the overall design system consistent across the application.

[aaniya22]

pls assign this to me under gssoc