Theme Transition #109
Theme Transition #109
Conversation
Introduced transition effects to the body, base button, and frosted glass button styles for smoother color and background changes. Removed redundant transition from the main element in page.tsx to avoid overlap. NO. MORE. FLASHBANGS
Introduces granular theme transition classes for backgrounds, borders, and SVG icons to improve UI transitions. Also updates body transition properties for smoother theme changes.
This reverts commit 41d5785.
This reverts commit ec6fc75.
There was a problem hiding this comment.
Pull request overview
This PR implements smooth transitions between light and dark theme modes by centralizing transition logic in globals.css and removing redundant transition classes from individual components to ensure consistent timing across the application.
Key Changes:
- Added centralized theme transition rules in
globals.cssfor all color-related properties - Extracted hardcoded color values to named CSS variables (
--color-pure-whiteand--color-dark-purple) in the theme configuration - Removed component-level transition classes (
transition-all,transition-colors) from 4 components to prevent conflicting timing behavior
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/styles/tailwind.css |
Added new color variables and refactored theme definitions to use named variables instead of inline oklch values |
src/styles/globals.css |
Implemented global transition rules on body and all elements for theme color transitions |
src/features/event/editor/weekday-calendar.tsx |
Removed transition-all class from calendar day buttons |
src/components/text-input-field.tsx |
Changed from transition-all to transition-transform for label animation (preserves transform transitions while removing color transitions) |
src/app/page.tsx |
Removed transition-colors class from main element |
src/app/dashboard/page-client.tsx |
Removed transition class from tab button |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className={cn( | ||
| "absolute origin-[0_0] cursor-text px-1", | ||
| "transition-all duration-200 ease-in-out", | ||
| "transition-transform duration-200 ease-in-out", |
There was a problem hiding this comment.
I don't think this worked, since the placeholder text fades from one place to another.
Screen.Recording.2026-01-06.at.10.21.18.PM.mov
There was a problem hiding this comment.
All the text with the --accent-text color has an instant transition, making it noticeable against everything else.
Screen.Recording.2026-01-06.at.10.23.21.PM.mov
Screen.Recording.2026-01-06.at.10.24.19.PM.mov
There was a problem hiding this comment.
The placeholder text has an instant transition.
Screen.Recording.2026-01-06.at.10.27.45.PM.mov
|
The new transitions really mess with the date popover. Screen.Recording.2026-01-06.at.10.29.32.PM.mov |
|
We discussed that all user-interaction-based transitions should be instant. For example, button hovering: Screen.Recording.2026-01-06.at.10.33.49.PM.movGrid painting: Screen.Recording.2026-01-06.at.10.36.14.PM.movThe same thing happened to hovering options in a dropdown. The one exception might be the dashboard event tile hover shadow, since that was a transition to begin with. |
This pr implements a transition between light mode and dark mode colors. This logic was added to
globals.cssand all instances oftransition-allandtransition-colorwere removed from the rest of the code base to comply with timing.NOTE: using the
*in css might cause a lot of rendering power and CPU usage. This was the only way I found that would apply the transitions at once. If it ends up causing a problem, we will have to resort to manually adding the transition to all components that are not bound bybody(I haven't experienced any issues thus far)