Feature: Assign Random Profile Color to Users

[vikas-saini-7]

Description

Assign each user a random color during their register. This color should be saved in the database and used consistently throughout the app — such as in the background of the user's avatar (when no profile picture is uploaded). This behavior is similar to what Google, WhatsApp, and Slack do.

Why is this feature useful?

This improves the visual identification of users in group chats and shared environments. It adds a touch of personalization and ensures that users can still be visually distinguished, even without uploading a profile picture.

How could it work?

• On first regiter, generate a random color from a predefined palette of vibrant and accessible colors.
• Save the assigned color to the user's database record (e.g., user.color).
• Use this color as the background color for:
  • Avatar circles (when profile image is not available)
  • Chat bubbles (optional)

Important:
Please make sure the color:

• Has enough contrast for both light and dark mode (avoid pure black, pure white, or colors that clash)
• Comes from a palette that looks good on various backgrounds

Suggested approach for color generation:

• Use a palette of hand-picked colors (not fully random) to ensure consistent accessibility.
• Store this palette in a utility file.

Here’s an example from WhatsApp and Google:

• Google uses colored avatars with initials when no profile picture is set.
• WhatsApp shows colored icons for users without a display picture.

Additional Information

• You may find libraries like string-to-color or hash-to-color helpful
• Consider using the Avatar component from Shadcn UI
• Ensure the same color is reused each time — avoid changing it on every login

IMPORTANT: make sure to update color in header too! with /room/roomId

If you have questions, feel free to ask in the Discord or reply to this issue.

Looking forward to your contribution!