wok-ui-theme

Name: wok-ui-theme
Availability: InStock
Author: peak

Configure wok-ui theme colors and size tokens with runtime APIs.

Updated Sep 14, 2023

Search Tags:#theming #theme #color #variables #design-token #size #wok-ui

Ready to run

npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-theme

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wok-ui-theme
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-theme
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

wok-ui's Theme module centralizes color and typography tokens, enabling consistent branding and faster UI theming.

Core Features & Use Cases

Central color variable management with setColor and resetColor
Size token control via setSize and resetSize
Runtime CSS variable updates that propagate across components
Use Case: quickly adapt the entire app's theme to match a brand refresh without code changes

Quick Start

Install and configure wok-ui-theme to apply your brand colors and typography across your app.

Frequently Asked Questions about wok-ui-theme

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

FAQPage Schema

How do I apply a consistent color and size theme across wok-ui components?▼

Apply a consistent color and size theme across wok-ui components by using the centralized token system to configure variables that propagate via runtime CSS updates for uniform branding.

What is the best way to dynamically update design tokens during runtime in wok-ui?▼

The best way to dynamically update design tokens during runtime in wok-ui is to use the provided APIs like setColor and setSize, which trigger runtime CSS variable updates that automatically propagate across all active UI components.

How do I reset custom color and size variables back to default values in wok-ui?▼

Reset custom color and size variables back to default values in wok-ui by calling the resetColor and resetSize APIs, which clears your runtime overrides and restores the original baseline design tokens.

Can I adapt my entire app's UI theme to match a brand refresh without changing component code?▼

You can adapt your app's UI theme to match a brand refresh without changing component code by centrally managing color and size tokens, allowing global updates that instantly restyle all wok-ui components at runtime.

How do I retrieve the current color or size token values configured in wok-ui?▼

Retrieve the current color or size token values configured in wok-ui by calling the getColor and getSize APIs, which return the active design tokens currently applied to your application's UI components.

Does wok-ui support centralized typography and size management for consistent branding?▼

wok-ui supports centralized typography and size management for consistent branding through its theme module, which exposes token control APIs to set, reset, and get size variables alongside color configurations.