Fluent theme toggle

→ Launch the live demo

What this is

A one-page prototype using @fluentui/react-components — the public, open-source Fluent UI 2 React library — to render a small showcase of components (buttons, form fields, inline feedback, a card) and re-paint them in light or dark mode with a single switch.

Nothing in it is internal to Microsoft. The package is on npm, the source is on GitHub, and the same demo could be built by anyone in an afternoon. I’m hosting it here because the most useful version of it is the version that’s not on a Microsoft surface.

Why I built it

Fluent gets quietly dismissed in design-system conversations. The usual line is “it’s the Microsoft system — it’ll make our product look like Outlook.” The implication is that it’s heavily branded, enterprise-coded, and not really meant for anyone outside that ecosystem.

I don’t think that’s true, and the easiest way to argue otherwise is to show it. So I stripped the context — no Microsoft logo, no internal patterns, no proprietary anything — and let the components speak for themselves. What’s left is a system that:

• Hits AA contrast in both themes by default. The buttons, the message bars, the disabled states — I didn’t tune any of it. The tokens did the work.
• Has a focus ring that’s visible without being loud. Tab through the demo. The ring sits cleanly in both modes; you don’t have to override it.
• Treats labels and hints as first-class on form fields. <Field> exists. You don’t have to compose it out of <label> + helper text + error slot every time.
• Switches themes without component-level conditionals. The toggle flips one provider. Every styled component re-derives from the active token set.

I’m not arguing Fluent is the right choice for every product. I am arguing it should be on the shortlist, and that the perception of “Microsoft = heavy” is doing more rejecting than the system itself deserves.

What to look at

If you only have a minute, do two things:

1. Toggle the switch in the top-right. Notice that nothing flashes, nothing breaks layout, and the contrast holds. That’s the token system doing its job.
2. Tab through the buttons and form fields with your keyboard. The focus ring is the same in both themes. Disabled states are dimmed but still legible. The dropdown opens with the arrow keys and announces options to screen readers.

If you have five minutes, open the page source. The whole demo is one React component (src/components/FluentShowcase.tsx) that imports primitives from the public package. There is no custom theming. The light and dark themes are webLightTheme and webDarkTheme, exactly as they ship.

What’s underneath

• Library: @fluentui/react-components v9 (the current, open-source line)
• Themes: webLightTheme / webDarkTheme from the same package, swapped via <FluentProvider>
• Persistence: the user’s choice is saved to localStorage so the page remembers it; first-time visitors get the OS preference via prefers-color-scheme
• No global CSS overrides. The site’s chrome (nav, footer) is still my own Tailwind layout. The Fluent components are scoped inside the provider and don’t bleed.

What I’d add next

Probably a small Tokens panel — pulling a handful of named tokens (colorBrandBackground, colorNeutralForeground1, borderRadiusMedium) and showing their resolved values in each theme. The point would be the same: the toggle isn’t magic, it’s a token table being read twice.

Source

• Component: src/components/FluentShowcase.tsx
• Page: src/pages/toybox/prototypes/fluent-theme-toggle.astro
• Fluent UI (upstream, open source): https://github.com/microsoft/fluentui

The full source of this site is on GitHub at floramaydc/floramaydc.github.io — fork it, lift the component, ship your own.