Add fallback theme styles for browsers without light-dark() support

[Srishti-j18]

Issue summary

I was exploring the guide repo’s theming implementation. We currently rely on the modern light-dark() color function for theme rendering, which is great for supported browsers.

In supported browsers (tested in Chrome), this works correctly. In older browesrs (e.g. Edge) versions, theme colors render incorrectly, and dark mode is not displayed as expected.

I’ve attached screen-video showing:

Correct behavior in a supported browser (CSS.supports(...) returns true)
Incorrect rendering in older Edge where support is missing (CSS.supports(...) returns false)

screen-recording-2026-03-26-at-115415-pm_jFoyaQec.mp4

Why this matters
Most users are on updated browsers, but there are still compatibility gaps in older versions. Without fallback styles, parts of the UI can appear broken.

Proposed solution
Add a fallback block for unsupported browsers, for example:

@supports not (color: light-dark(#000, #fff)) { ... }

Use baseline static light/dark token values in that block.

I tested this fallback approach locally, and it fixes the incorrect rendering in older Edge.

Steps to reproduce

test it with any browser which doesn't support the light-dark() CSS function
source: https://caniuse.com/mdn-css_types_color_light-dark

Additional information

No response

Can be reproduced

Not confirmed

Technical details

• Browser: Chrome, Edge
• Browser version: Edge 95 and 111

Working on this

Needs confirmation
Should we add a fallback block for older browser versions?