Back to skills
extension
Category: Development & EngineeringNo API key required

openwebf-host-theming-sync

Sync theming between Flutter and WebF (automatic theme sync, prefers-color-scheme, dark mode patterns). Use when the user mentions theme sync, dark mode, prefers-color-scheme, CSS variables, or WebF theming from MaterialApp.

personAuthor: jakexiaohubgithub

OpenWebF Host: Theming Sync

Instructions

  1. Determine desired behavior: automatic sync vs manual overrides.
  2. Use MCP docs to confirm how theme synchronization works by default and safe patterns.
  3. Provide concrete patterns for:
    • CSS prefers-color-scheme
    • JS/React theme toggles
    • Flutter-driven theme propagation
  4. Offer templates where applicable:
    • host/theme-sync-materialapp
    • app/theming-prefers-color-scheme-css
    • app/theming-matchmedia-listener

More: