Adaptive Theming

Flutter might live in permanent dark mode while your web bundle still needs to preview both palettes. Use WebF’s bridge to tell JavaScript which theme to render, or rely on CSS variables that resolve at runtime.

Preview inside the docs

The component above toggles CSS custom properties that WebF applies globally. The same approach works in your product: push the preferred theme through a bridge event, update the data-theme attribute on document.documentElement, and let CSS handle the rest.

Implementation notes

1. Define semantic tokens (e.g., --color-surface, --color-primary) instead of hard-coding Tailwind values in CSS.
2. When Flutter switches themes, call webfBridge.invoke('theme:change', { mode: 'dark' }).
3. Inside WebF, listen for that event and update the root dataset so CSS selectors (and frameworks such as Tailwind or Vanilla Extract) can react instantly.

webfBridge.on('theme:change', ({ mode }) => {
  document.documentElement.dataset.theme = mode
})

Because WebF shares the same GPU surface as Flutter, transitions remain smooth even when you animate between palettes.