diff --git a/packages/tailwindcss-language-server/tests/colors/colors.test.js b/packages/tailwindcss-language-server/tests/colors/colors.test.js
index 2a584591..f39ee1d9 100644
--- a/packages/tailwindcss-language-server/tests/colors/colors.test.js
+++ b/packages/tailwindcss-language-server/tests/colors/colors.test.js
@@ -353,3 +353,38 @@ defineTest({
])
},
})
+
+defineTest({
+ name: 'colors that use light-dark() resolve to their light color',
+ fs: {
+ 'app.css': css`
+ @import 'tailwindcss';
+ @theme {
+ --color-primary: light-dark(#ff0000, #0000ff);
+ }
+ `,
+ },
+ prepare: async ({ root }) => ({ c: await init(root) }),
+ handle: async ({ c }) => {
+ let textDocument = await c.openDocument({
+ lang: 'html',
+ text: '
',
+ })
+
+ expect(c.project).toMatchObject({
+ tailwind: {
+ version: '4.0.0',
+ isDefaultVersion: true,
+ },
+ })
+
+ let colors = await c.sendRequest(DocumentColorRequest.type, {
+ textDocument,
+ })
+
+ expect(colors).toEqual([
+ //
+ { range: range(0, 12, 0, 22), color: color(1, 0, 0, 1) },
+ ])
+ },
+})
diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index d0427bf9..4b0d3b84 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -66,6 +66,7 @@ function getColorsInString(state: State, str: string): (culori.Color | KeywordCo
str = replaceCssVarsWithFallbacks(state, str)
str = removeColorMixWherePossible(str)
+ str = resolveLightDark(str)
let possibleColors = str.matchAll(colorRegex)
@@ -280,3 +281,9 @@ function removeColorMixWherePossible(str: string) {
return culori.formatRgb({ ...parsed, alpha })
})
}
+
+const LIGHT_DARK_REGEX = /light-dark\(\s*(.*?)\s*,\s*.*?\s*\)/g
+
+function resolveLightDark(str: string) {
+ return str.replace(LIGHT_DARK_REGEX, (_, lightColor) => lightColor)
+}
diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index fc2f7469..6e8e0867 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,7 @@
## Prerelease
-- Nothing yet!
+- Show light color swatch from light-dark() functions ([#1199](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1199))
## 0.14.4