Claude Code Plugins

Community-maintained marketplace

Feedback

openwebf-host-theming-sync

@archview-ai/webf-plugin
0
0

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.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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: