# 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.

- Skill: `majiayu000/openwebf-host-theming-sync` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/openwebf-host-theming-sync`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/openwebf-host-theming-sync/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/openwebf-host-theming-sync

---


# 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:
- [reference.md](reference.md)
- [doc-queries.md](doc-queries.md)
- [examples.md](examples.md)