feat(shadcn): light-dark support

[mfteuscher]

light-dark() gained base support from all major browsers in 2024, and it makes for really clean CSS syntax. This update shouldn't conflict with the planned move to OKLCH.

The updated PostCSS plugin updater will migrate existing color variables in the :root and .dark blocks to just the :root inside the light-dark() function. If a color variable only exists in the :root or .dark blocks, they will be ignored. Non-color variables will also be ignored, since light-dark() only supports CSS colors. Any new variables added will use the light-dark() function, as long as both a light and dark variant are provided.

• Code updated
• Tested locally
• Passing all tests

The code is currently not passing all tests. I wanted to confirm that this wasn't already being implemented before putting in the work of getting all the tests passing

@shadcn, is this PR something you're interested in merging, or are you already working on this, making this PR unnecessary?

Example

It turns this

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(240 5.9% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 10% 3.9%);
  --chart-1: hsl(12 76% 61%);
  --chart-2: hsl(173 58% 39%);
  --chart-3: hsl(197 37% 24%);
  --chart-4: hsl(43 74% 66%);
  --chart-5: hsl(27 87% 67%);
  --radius: 0.6rem;
}

.dark {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);
  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);
}

into this

:root {
  --background: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
  --foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
  --card: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
  --card-foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
  --popover: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
  --popover-foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
  --primary: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
  --primary-foreground: light-dark(hsl(0 0% 98%), hsl(240 5.9% 10%));
  --secondary: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
  --secondary-foreground: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
  --muted: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
  --muted-foreground: light-dark(hsl(240 3.8% 46.1%), hsl(240 5% 64.9%));
  --accent: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
  --accent-foreground: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
  --destructive: light-dark(hsl(0 84.2% 60.2%), hsl(0 62.8% 30.6%));
  --destructive-foreground: light-dark(hsl(0 0% 98%), hsl(0 0% 98%));
  --border: light-dark(hsl(240 5.9% 90%), hsl(240 3.7% 15.9%));
  --input: light-dark(hsl(240 5.9% 90%), hsl(240 3.7% 15.9%));
  --ring: light-dark(hsl(240 10% 3.9%), hsl(240 4.9% 83.9%));
  --chart-1: light-dark(hsl(12 76% 61%), hsl(220 70% 50%));
  --chart-2: light-dark(hsl(173 58% 39%), hsl(160 60% 45%));
  --chart-3: light-dark(hsl(197 37% 24%), hsl(30 80% 55%));
  --chart-4: light-dark(hsl(43 74% 66%), hsl(280 65% 60%));
  --chart-5: light-dark(hsl(27 87% 67%), hsl(340 75% 55%));
  --radius: 0.6rem;
}

[vercel]

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

A member of the Team first needs to authorize it.

[shadcn]

I'm looking into this as well. Definitely interested in merging this.

Any issues with @custom-variant dark (&:is(.dark *));?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview		Feb 22, 2025 8:29am
v4	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 22, 2025 8:29am

[shadcn]

@mfteuscher heads up: the changes should be made (and tested) in apps/v4. I'm going to upgrade apps/www later.

[mfteuscher]

Ok, I'll make sure changes are made and tested in apps/v4. Thanks

[mfteuscher]

@shadcn finished up all the work on this update, and after looking through the v4 app, there don't appear to be any issues with the @custom-variant directive. Everything looks like it's supposed to. All tests are passing too. Let me know if there's anything else I can do for this PR.