Cant override Theme shadow.

[Trackhe]

Hello,

i try to build my own theme with dark support via
@custom-variant dark (&:where(.dark, .dark *));
and i try to stick to the newest documentation.
And it works, only for the --shadow dosn't work in dark mode. It Stays blue in my example.
Is it a bug or do i miss something?

i use btw:
"tailwindcss": "^4.1.14",

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* Light Mode */
    --color-background-primary: oklch(0.65 0.0 0);
    --color-background-secondary: oklch(0.825 0.0 0);
    --color-background-tertiary: oklch(1 0.0 0);
  
    --color-text-primary: oklch(0.15 0.0 0);
    --color-text-secondary: oklch(0.3 0.0 0);
  
    --color-border-primary: hsl(0, 0%, 45%);
    
    --color-highlight-primary: hsl(0, 0%, 55%);
    --color-highlight-secondary: hsl(0, 0%, 65%);
  
    --color-error: hsl(0, 84%, 60%);
    --color-warning: hsl(45, 93%, 58%);
    --color-success: hsl(142, 76%, 36%);
    --color-info: hsl(221, 83%, 53%);
  
    --shadow-sm: inset 0 1px 2px #0000ff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-md: inset 0 1px 2px #0000ff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-lg: inset 0 1px 2px #0000ff70, 0 4px 6px #00000030, 0 6px 10px #00000015;


}

@layer theme {
    .dark {
        /* Dark Mode */
        --color-background-primary: oklch(0.0 0.0 0);
        --color-background-secondary: oklch(0.175 0.0 0);
        --color-background-tertiary: oklch(0.35 0.0 0);
      
        --color-text-primary: oklch(0.85 0.0 0);
        --color-text-secondary: oklch(0.7 0.0 0);
      
        --color-border-primary: oklch(0.4 0.0 0);
      
        /* Shadow colors - Dark Mode (Rote Schatten) */
        --shadow-sm: inset 0 1px 2px #de0000ef, 0 1px 2px #0015ff30, 0 2px 4px #00000015;
        --shadow-md: inset 0 1px 2px #e00000f7, 0 2px 4px #00000030, 0 4px 8px #00000015;
        --shadow-lg: inset 0 1px 2px #ff0000, 0 4px 6px #00000030, 0 6px 10px #00000015;
    }
}

[wongjn]

Shadows don't use your CSS variables directly:

.shadow-lg {
  --tw-shadow: inset 0 1px 2px var(--tw-shadow-color, #0000ff70), 0 4px 6px var(--tw-shadow-color, #00000030), 0 6px 10px var(--tw-shadow-color, #00000015);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

See how the shadow value is kind of transposed into the value with some modifications. Notice how the var(--shadow-sm) CSS variable does not exist. Hence why the dark version never overrides the shadow.

Some workarounds:

• Force a CSS variable by "aliasing" another CSS variable. Though this introduces repetition. Also shadow-<color> utilities no longer work.
• Use variables for the shadow colors. Though this means your color tokens will get polluted with shadow colors. You may need multiple color tokens per shadow. Shadow colors are now decoupled from shadow definitions themselves.
• Use light-dark(). Browser support is still fairly new.