Skip to content

Conversation

@djalmaaraujo
Copy link
Contributor

@djalmaaraujo djalmaaraujo commented Nov 19, 2025

Migrate the default dark mode theme to shadcn/ui's "New York" style, aligning with shadcn's updated defaults.

Reference: https://ui.shadcn.com/docs/tailwind-v4#:~:text=We%27re%20deprecating%20the%20default%20style.%20New%20proj
ects%20will%20use%20new%2Dyork.

Theme Changes (Dark Mode):

  • Updated surface colors for better visual hierarchy:
  • --card and --popover: oklch(0.145 0 0)oklch(0.205 0 0) (slightly lighter)
  • --primary: oklch(0.985 0 0)oklch(0.922 0 0) (softer white)
  • Updated border/input styling for transparency-based borders:
  • --border: solid coloroklch(1 0 0 / 10%) (white with 10% opacity)
  • --input: solid coloroklch(1 0 0 / 15%) (white with 15% opacity)
  • --ring: oklch(0.439 0 0)oklch(0.556 0 0) (lighter focus ring)
  • Same updates for --sidebar-border and --sidebar-ring
  • Updated destructive color: oklch(0.396 0.141 25.723)oklch(0.704 0.191 22.216) (more vibrant in dark mode)
  • Updated wrap_with_directive for Tailwind 4 compatibility: CSS variables are no longer wrapped in @layer base

Copy Code Modal Improvements:

  • Updated CSS output to match shadcn.com/themes standard for TailwindCSS 4
  • Added filtering to exclude ruby_ui specific variables (warning, success and their foreground variants) from
    copy output
  • Increased dialog width with responsive boundaries (sm:max-w-lg lg:max-w-xl)
  • Added TailwindCSS 4 compatibility note in modal description

Accessibility Fixes (Homepage):

  • Fixed heading hierarchy for proper document structure:
  • Logo: Changed from h4 to h2
  • HomeView cards: Changed from h3 to h2
  • Updated banner subtitle styling: text-foreground opacity-30text-primary/70 for better contrast

Context

This update follows shadcn/ui's transition to the "New York" theme as their new default. The New York style features:

  • Softer, more subtle color palette in dark mode
  • Transparency-based borders for a modern look
  • Slightly elevated card/popover surfaces for better visual separation

Test Plan

  • Verify dark mode colors render correctly across all components
  • Confirm accessibility improvements with heading structure
  • Test border/input transparency styling in various contexts
  • Test "Copy Code" modal outputs valid TailwindCSS 4 compatible CSS
  • Visual regression testing on homepage and component documentation

@djalmaaraujo djalmaaraujo changed the title New york theme upgrade [WIP] New york theme upgrade Nov 19, 2025
@djalmaaraujo djalmaaraujo changed the title [WIP] New york theme upgrade New york theme upgrade Nov 27, 2025
@djalmaaraujo djalmaaraujo changed the title New york theme upgrade New Default theme: New York Nov 28, 2025
@djalmaaraujo djalmaaraujo marked this pull request as ready for review November 28, 2025 11:28
@djalmaaraujo djalmaaraujo requested a review from cirdes as a code owner November 28, 2025 11:28
Copy link
Contributor

@cirdes cirdes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work, @djalmaaraujo ! New York is now the default theme.

@cirdes cirdes merged commit a6c1388 into main Nov 28, 2025
5 checks passed
@cirdes cirdes deleted the new-york-theme-upgrade branch November 28, 2025 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants