skills.rest
archview-ai
archview-aiOFFICIAL
Explore all skills by this author →
GitHub

openwebf-host-theming-sync

Synchronize Flutter and WebF theming via CSS variables and prefers-color-scheme.

Updated Dec 17, 2025
One-click install
npx skills add https://github.com/archview-ai/webf-plugin --skill openwebf-host-theming-sync
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openwebf-host-theming-sync
Source: https://github.com/archview-ai/webf-plugin/tree/main/webf-plugin/skills/openwebf-host-theming-sync
Command: npx skills add https://github.com/archview-ai/webf-plugin --skill openwebf-host-theming-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatic theming synchronization between Flutter and WebF, including support for prefers-color-scheme and CSS variable mappings.

Core Features & Use Cases

  • Automatic theming synchronization by default
  • Support for CSS prefers-color-scheme and user-controlled theme toggles
  • Design-system bridging by mapping Flutter tokens to CSS variables

Quick Start

Implement a single source of truth for theme mode and enable automatic synchronization.

Frequently Asked Questions about openwebf-host-theming-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I synchronize theme changes between Flutter and WebF automatically?▼

Theme synchronization between Flutter and WebF maintains a single source of truth by automatically propagating theme mode changes from Flutter's MaterialApp to WebF components. Enable automatic synchronization to keep both platforms in sync without manual updates.

Can I use CSS prefers-color-scheme with Flutter theming?▼

Yes, CSS prefers-color-scheme works with Flutter theming through WebF. Map Flutter theme tokens to CSS variables and implement prefers-color-scheme listeners to respect both system preferences and Flutter-driven theme changes.

How do I map Flutter theme tokens to CSS variables in WebF?▼

Create CSS variable mappings that correspond to Flutter MaterialApp theme values. Use templates like host/theme-sync-materialapp to bridge design tokens from Flutter into CSS, enabling WebF components to consume the same theme values.

What's the best way to implement theme toggles in a Flutter and WebF app?▼

Implement theme toggles using JavaScript or React listeners that communicate with Flutter's theme state. Use matchmedia listeners and CSS variable updates to reflect user-controlled theme changes across both Flutter and WebF simultaneously.

Do I need to manually override theme synchronization?▼

Automatic synchronization is the default, but manual overrides are supported when needed. Use override patterns for cases where specific WebF components require different theming than the Flutter-driven default.

Related Skills

leonardoteodorooleonardoteodoroo

design-system-patterns

Define design system tokens, theming, and component architecture patterns.

Community
Intermediate
splashkessplashkes

Chowdahh Preferences

Capture stable user preferences from Chowdahh conversations for consistent personalized responses.

Community
Intermediate
SwokingSwoking

symfony-sk:css-component

Standardize CSS/SCSS component styling with BEM naming and CSS variables.

Community
Intermediate
ElPootElPoot

audit-quarantine

Audit quarantine and purge reversibility for duplicated comprobantes, ORS, and receptor flows.

Community
Intermediate