AgentSkillsCN

openwebf-host-theming-sync

在Flutter和WebF之间同步主题（自动主题同步、prefers-color-scheme、暗模式模式）。当用户提到主题同步、暗模式、prefers-color-scheme、CSS变量或来自MaterialApp的WebF主题时使用。

SKILL.md
--- frontmatter
name: openwebf-host-theming-sync
description: 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.
allowed-tools: Read, Grep, Glob, Bash, Edit, Write, mcp__openwebf__docs_search, mcp__openwebf__docs_get_section, mcp__openwebf__templates_get, mcp__openwebf__templates_render

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: