feat: add colorSchemePreview setting for light-dark() values

Adds a new setting `tailwindCSS.colorSchemePreview` that controls
whether the light or dark color is shown in previews for CSS
`light-dark()` function values.

- Accepts 'light' (default) or 'dark'
- Useful for developers working primarily in one color scheme
- Added tests for the resolveLightDark function

https://claude.ai/code/session_01Fi6Utr1yb5jk3Xo9yvY567

Author: claude

packages/tailwindcss-language-service/src/documentColorProvider.ts

@@ -25,7 +25,7 @@ export async function getDocumentColors(
   classLists.forEach((classList) => {
     let classNames = getClassNamesInClassList(classList, state.blocklist)
     classNames.forEach((className) => {
-      let color = getColor(state, className.className)
+      let color = getColor(state, className.className, settings.tailwindCSS.colorSchemePreview)
       if (color === null || typeof color === 'string' || (color.alpha ?? 1) === 0) {
         return
       }

packages/tailwindcss-language-service/src/util/color.test.ts

@@ -1,6 +1,6 @@
-import { test, expect } from 'vitest'
+import { test, expect, describe } from 'vitest'
 import namedColors from 'color-name'
-import { findColors } from './color'
+import { findColors, resolveLightDark } from './color'
 
 let table: string[] = []
 
@@ -80,3 +80,53 @@ test('invalid hex', () => {
   expect(findColors(`#7f7f7fz`)).toEqual([])
   expect(findColorsRegex(`#7f7f7fz`)).toEqual([])
 })
+
+describe('resolveLightDark', () => {
+  test('extracts light color by default', () => {
+    const input = 'light-dark(oklch(0.5 0.1 50), oklch(0.8 0.2 60))'
+    expect(resolveLightDark(input)).toBe('oklch(0.5 0.1 50)')
+  })
+
+  test('extracts light color when colorScheme is light', () => {
+    const input = 'light-dark(oklch(0.5 0.1 50), oklch(0.8 0.2 60))'
+    expect(resolveLightDark(input, 'light')).toBe('oklch(0.5 0.1 50)')
+  })
+
+  test('extracts dark color when colorScheme is dark', () => {
+    const input = 'light-dark(oklch(0.5 0.1 50), oklch(0.8 0.2 60))'
+    expect(resolveLightDark(input, 'dark')).toBe('oklch(0.8 0.2 60)')
+  })
+
+  test('handles hex colors', () => {
+    const input = 'light-dark(#ffffff, #000000)'
+    expect(resolveLightDark(input, 'light')).toBe('#ffffff')
+    expect(resolveLightDark(input, 'dark')).toBe('#000000')
+  })
+
+  test('handles rgb colors', () => {
+    const input = 'light-dark(rgb(255 255 255), rgb(0 0 0))'
+    expect(resolveLightDark(input, 'light')).toBe('rgb(255 255 255)')
+    expect(resolveLightDark(input, 'dark')).toBe('rgb(0 0 0)')
+  })
+
+  test('handles multiple light-dark functions in string', () => {
+    const input =
+      'color: light-dark(#fff, #000); background: light-dark(#eee, #111);'
+    expect(resolveLightDark(input, 'light')).toBe(
+      'color: #fff; background: #eee;',
+    )
+    expect(resolveLightDark(input, 'dark')).toBe('color: #000; background: #111;')
+  })
+
+  test('trims whitespace from colors', () => {
+    const input = 'light-dark(  #ffffff  ,   #000000   )'
+    expect(resolveLightDark(input, 'light')).toBe('#ffffff')
+    expect(resolveLightDark(input, 'dark')).toBe('#000000')
+  })
+
+  test('returns input unchanged when no light-dark function', () => {
+    const input = '#ffffff'
+    expect(resolveLightDark(input, 'light')).toBe('#ffffff')
+    expect(resolveLightDark(input, 'dark')).toBe('#ffffff')
+  })
+})

packages/tailwindcss-language-service/src/util/color.ts

@@ -49,19 +49,24 @@ function getKeywordColor(value: unknown): KeywordColor | null {
   return null
 }
 
-function getColorsInString(state: State, str: string): ParsedColor[] {
+function getColorsInString(
+  state: State,
+  str: string,
+  colorScheme: 'light' | 'dark' = 'light',
+): ParsedColor[] {
   if (/(?:box|drop)-shadow/.test(str) && !/--tw-drop-shadow/.test(str)) return []
 
   str = replaceCssVarsWithFallbacks(state, str)
   str = removeColorMixWherePossible(str)
-  str = resolveLightDark(str)
+  str = resolveLightDark(str, colorScheme)
 
   return parseColors(str)
 }
 
 function getColorFromDecls(
   state: State,
   decls: Record<string, string | string[]>,
+  colorScheme: 'light' | 'dark' = 'light',
 ): ParsedColor | null {
   let props = Object.keys(decls).filter((prop) => {
     // ignore content: "";
@@ -104,7 +109,7 @@ function getColorFromDecls(
   const propsToCheck = areAllCustom ? props : nonCustomProps
 
   const colors = propsToCheck.flatMap((prop) =>
-    ensureArray(decls[prop]).flatMap((str) => getColorsInString(state, str)),
+    ensureArray(decls[prop]).flatMap((str) => getColorsInString(state, str, colorScheme)),
   )
 
   // check that all of the values are the same color, ignoring alpha
@@ -137,7 +142,11 @@ function getColorFromDecls(
   return null
 }
 
-function getColorFromRoot(state: State, css: AstNode[]): ParsedColor | null {
+function getColorFromRoot(
+  state: State,
+  css: AstNode[],
+  colorScheme: 'light' | 'dark' = 'light',
+): ParsedColor | null {
   let decls: Record<string, string[]> = {}
 
   walk(css, (node) => {
@@ -171,7 +180,7 @@ function getColorFromRoot(state: State, css: AstNode[]): ParsedColor | null {
     return WalkAction.Continue
   })
 
-  return getColorFromDecls(state, decls)
+  return getColorFromDecls(state, decls, colorScheme)
 }
 
 let isNegative = /^-/
@@ -190,13 +199,17 @@ function isLikelyColorless(className: string) {
   return false
 }
 
-export function getColor(state: State, className: string): ParsedColor | null {
+export function getColor(
+  state: State,
+  className: string,
+  colorScheme: 'light' | 'dark' = 'light',
+): ParsedColor | null {
   if (state.v4) {
     // FIXME: This is a performance optimization and not strictly correct
     if (isLikelyColorless(className)) return null
 
     let css = state.designSystem.compile([className])[0]
-    let color = getColorFromRoot(state, css)
+    let color = getColorFromRoot(state, css, colorScheme)
 
     let prefix = state.designSystem.theme.prefix ?? ''
 
@@ -205,7 +218,7 @@ export function getColor(state: State, className: string): ParsedColor | null {
     if (prefix && !color && !className.startsWith(prefix + ':')) {
       className = `${prefix}:${className}`
       css = state.designSystem.compile([className])[0]
-      color = getColorFromRoot(state, css)
+      color = getColorFromRoot(state, css, colorScheme)
     }
 
     return color
@@ -215,7 +228,7 @@ export function getColor(state: State, className: string): ParsedColor | null {
     if (state.classNames) {
       const item = dlv(state.classNames.classNames, [className, '__info'])
       if (item && item.__rule) {
-        return getColorFromDecls(state, removeMeta(item))
+        return getColorFromDecls(state, removeMeta(item), colorScheme)
       }
     }
 
@@ -244,7 +257,7 @@ export function getColor(state: State, className: string): ParsedColor | null {
         decls[decl.prop] = decl.value
       }
     })
-    return getColorFromDecls(state, decls)
+    return getColorFromDecls(state, decls, colorScheme)
   }
 
   let parts = getClassNameParts(state, className)
@@ -253,7 +266,7 @@ export function getColor(state: State, className: string): ParsedColor | null {
   const item = dlv(state.classNames.classNames, [...parts, '__info'])
   if (!item.__rule) return null
 
-  return getColorFromDecls(state, removeMeta(item))
+  return getColorFromDecls(state, removeMeta(item), colorScheme)
 }
 
 export function getColorFromValue(value: unknown): ParsedColor | null {
@@ -315,10 +328,15 @@ function removeColorMixWherePossible(str: string) {
   })
 }
 
-const LIGHT_DARK_REGEX = /light-dark\(\s*(.*?)\s*,\s*.*?\s*\)/g
+const LIGHT_DARK_REGEX = /light-dark\(\s*([^,]+?)\s*,\s*([^,]+)\s*\)/g
 
-function resolveLightDark(str: string) {
-  return str.replace(LIGHT_DARK_REGEX, (_, lightColor) => lightColor)
+export function resolveLightDark(
+  str: string,
+  colorScheme: 'light' | 'dark' = 'light',
+): string {
+  return str.replace(LIGHT_DARK_REGEX, (_, lightColor, darkColor) =>
+    colorScheme === 'light' ? lightColor.trim() : darkColor.trim(),
+  )
 }
 
 const COLOR_FNS = new Set([

packages/tailwindcss-language-service/src/util/state.ts

@@ -56,6 +56,7 @@ export type TailwindCssSettings = {
   showPixelEquivalents: boolean
   rootFontSize: number
   colorDecorators: boolean
+  colorSchemePreview: 'light' | 'dark'
   lint: {
     cssConflict: DiagnosticSeveritySetting
     invalidApply: DiagnosticSeveritySetting
@@ -195,6 +196,7 @@ export function getDefaultTailwindSettings(): Settings {
       suggestions: true,
       validate: true,
       colorDecorators: true,
+      colorSchemePreview: 'light',
       rootFontSize: 16,
       lint: {
         cssConflict: 'warning',

packages/vscode-tailwindcss/package.json

@@ -222,6 +222,12 @@
           "markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
           "scope": "language-overridable"
         },
+        "tailwindCSS.colorSchemePreview": {
+          "type": "string",
+          "enum": ["light", "dark"],
+          "default": "light",
+          "markdownDescription": "Which color value to preview for `light-dark()` CSS functions."
+        },
         "tailwindCSS.validate": {
           "type": "boolean",
           "default": true,