Skip to content

Conversation

@PhilemonChiro
Copy link

Summary

  • Fix date input visual feedback in Safari dark mode
  • Change --input oklch lightness from 1 to 0.95 in dark mode themes

Problem

In Safari dark mode, when a user deletes part of a date input (day, month, or year), the empty portion should appear muted to indicate it's not set. However, with oklch(1 0 0 / 15%), Safari doesn't render this feedback correctly.

This causes:

  • No visual indication that date parts are missing
  • Broken native browser form validation UX
  • Users thinking a date is set when it's not

Root Cause

Safari has a quirk where oklch(1 0 0 / ...) (exactly 1.0 lightness = pure white) doesn't trigger the expected "empty" styling for date inputs. Using 0.95 (visually similar) fixes this and provides better muted feedback.

Solution

/* Before */
--input: oklch(1 0 0 / 15%);

/* After */  
--input: oklch(0.95 0 0 / 15%);

Files Changed

  • apps/v4/styles/globals.css - base dark mode theme
  • apps/v4/registry/themes.ts - all theme variants (neutral, stone, zinc, slate)

Test plan

  • Tested on Safari macOS in dark mode
  • Verified deleted date parts show muted/grayed styling
  • Confirmed the muted effect is clearly visible

Fixes #9212

Change --input oklch lightness from 1 to 0.98 to fix Safari rendering
issue where deleted date parts don't show visual feedback.
Change --input oklch lightness from 1 to 0.95 in dark mode to fix
Safari rendering issue where deleted date parts don't show visual
feedback.

Updated in both globals.css and themes.ts to cover all theme variants.
@vercel
Copy link
Contributor

vercel bot commented Jan 2, 2026

@PhilemonChiro is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

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.

[bug]: date input broken on Safari

1 participant