feat(ui): force-enable dark mode and add blurred gradients #3289
Conversation
rohitpaulk
force-pushed
the
force-enable-dark-mode-gradients
branch
from
44edd53 to
ba0414e
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Test Results 1 files ±0 1 suites ±0 10m 36s ⏱️ + 1m 13s For more details on these errors, see this check. Results for commit d494afe. ± Comparison against base commit cbc9038. ♻️ This comment has been updated with latest results. |
❌ 1 Tests Failed:
View the full list of 1 ❄️ flaky test(s)
To view more test analytics, go to the Test Analytics Dashboard |
rohitpaulk
force-pushed
the
force-enable-dark-mode-gradients
branch
from
ba0414e to
95e60ea
Compare
| get isEnabled(): boolean { | ||
| return this.currentRouteSupportsDarkMode && (this.#currentRouteRequiresDarkMode || this.#isEnabledViaPreferences || this.isEnabledTemporarily); | ||
| return true; | ||
| // return this.currentRouteSupportsDarkMode && (this.#currentRouteRequiresDarkMode || this.#isEnabledViaPreferences || this.isEnabledTemporarily); |
There was a problem hiding this comment.
Bug: Dark mode forced on light-only routes
The isEnabled getter now hardcodes true, forcing dark mode on all routes including those that only support light mode. Routes with RouteColorScheme.Light (the default) will display dark mode styling even though they may lack proper dark mode support. The commented-out original logic suggests this is temporary development code that was accidentally committed.
Always enable dark mode by overriding isEnabled to true in the dark-mode service to simplify theming during development. Add three layered, animated blurred gradient backgrounds to the catalog page for enhanced visual appeal. The gradients use overlapping colored circles with spin animations and blur effects for a dynamic look.
Introduce fixed blurred gradient overlays to the course overview and track pages to enhance visual appeal and maintain design consistency. Remove the previously commented out gradient from the catalog page as it is no longer used. Also update the track page’s dark mode background and border colors to darker shades for improved contrast and visual coherence with the new gradients.
Refactor the course card component to enhance layout structure by moving the lock icon opacity styles to a child wrapper. This improves visual consistency when hovering. Update skeleton states for logo and text to match new layout. Remove redundant elements and streamline the flexbox setup to better support responsive design and interactions.
rohitpaulk
force-pushed
the
force-enable-dark-mode-gradients
branch
from
92372a7 to
b69ffac
Compare
Update course-card to apply distinct dark background colors based on the locked state. Adjust opacity of card content when the lock icon is shown to visually indicate restricted access. These changes improve the user experience by clearly differentiating locked and unlocked courses at a glance.
Add the 'grow' class to the card container div so the course card content properly expands within its parent. This improves layout consistency and ensures that opacity and hover effects work as intended.
Update the background hover color for locked course cards in dark mode to improve visual feedback and distinguish locked state more clearly. This change enhances user experience by providing a subtle hover highlight when the lock icon is shown.
Update the background color of track cards in dark mode to use a semi-transparent shade, enhancing visual consistency and readability. This change adjusts the dark mode bg color from solid to bg-gray-925/70.
Bundle ReportChanges will increase total bundle size by 5.72kB (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: client-array-pushAssets Changed:
Files in
Files in
|
Always enable dark mode by overriding isEnabled to true in the
dark-mode service to simplify theming during development.
Add three layered, animated blurred gradient backgrounds to the catalog
page for enhanced visual appeal. The gradients use overlapping colored
circles with spin animations and blur effects for a dynamic look.
Note
Always enable dark mode and add animated blurred gradient backgrounds across key pages; refine course/track card dark styles and layout.
trueinservices/dark-mode.isEnabled.templates/catalog.hbs,templates/course-overview.hbs, andtemplates/track.hbs.components/course-card/index.hbs:components/tracks-page/track-card/index.hbs:/70opacity.templates/track.hbs: switch section background todark:bg-gray-950and adjust dark border colors.Written by Cursor Bugbot for commit d494afe. This will update automatically on new commits. Configure here.