feat: add chat appearance settings with multiple color themes#201
Merged
Conversation
|
@dotmantissa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Collaborator
|
@dotmantissa resolve conflicts |
Adds a theme settings modal accessible from the header that lets users customize the chat appearance without a page refresh. - Five color themes: Purple (default), Ocean, Sunset, Forest, Midnight - Dark/Light mode selector moved into the modal for a unified UX - Color preference persists in localStorage across sessions - Theme changes apply instantly by writing CSS custom properties directly onto the document root element, overriding the defaults from globals.css without touching any neutral/layout variables - The existing next-themes dark/light toggle continues to work independently; color themes compose correctly with either mode
dotmantissa
force-pushed
the
main
branch
2 times, most recently
from
3f6ed34 to
8340b9b
Compare
Contributor
Author
|
@SudiptaPaul-31 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Pull Request
🔗 Related Issue
Closes #183
📝 Description
ThemeTogglebutton provided only dark/light switching; there was no way to customize the accent color palette. This PR satisfies the issue requirement to support multiple color themes and persist the preference locally.🚀 Changes Made
New files:
lib/chat-theme.tsx— React context (ChatThemeProvider+useChatTheme) that manages color theme state, persists selection tolocalStorage, and applies the three key CSS custom properties (--primary,--secondary,--accent) as inline styles on the document root so changes are instantcomponents/theme-settings-modal.tsx— Radix Dialog modal with a Mode section (Light/Dark) and a Color Theme section showing three color swatches per option plus a radio-style active indicatorModified files:
app/layout.tsx— Wraps the provider tree withChatThemeProvider(insideThemeProvider, outsideWebSocketProvider)components/header.tsx— Replaces the standaloneThemeTogglewithThemeSettingsModalin both the desktop nav bar and the mobile slide-out drawer🧪 Testing & Validation
Validated:
localStoragepnpm exec tsc --noEmit) passes with zero errorsThe standalone
ThemeTogglecomponent is no longer rendered in the header, but the component file itself (components/theme-toggle.tsx) is kept intact. The new modal surfaces the same dark/light control alongside color theme selection.📸 Screenshots (REQUIRED for UI changes)
📋 Contributor Checklist (MANDATORY)
Closes #183)💡 Notes for Reviewer
lib/chat-theme.tsx— the inline style approach for applying CSS custom properties ondocument.documentElementis intentional; it beats both:rootand.darkclass selectors in specificity, which is how theme changes take effect instantly without needing to add/remove classes or re-render the provider treeuseEffectfires and readslocalStorage). This is acceptable for a chat app behind auth; a<script>tag in<head>could eliminate it if needed later