syncfusion-javascript-themes
OfficialInstantly customize Syncfusion UI themes
Authorsyncfusion
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Provides a consistent, documented approach to applying and customizing themes for Syncfusion JavaScript controls so developers can avoid mismatched styles, manual CSS edits, and fragile theme swaps across applications.
Core Features & Use Cases
- Theme application: Guidance for importing themes via npm or CDN and choosing combined or per-component styles to minimize bundle size.
- Dark mode management: Patterns for global and per-component dark mode toggles using the e-dark-mode class and runtime persistence.
- CSS variable customization: Instructions for updating theme variables (Material 3 RGB format vs Fluent/Bootstrap/Tailwind hex formats) for brand theming at runtime.
- Icon library and sizing: Setup, sizing utilities, and integration examples for the Syncfusion icon fonts.
- Size modes & Theme Studio: Enable touch-friendly size modes, switch at runtime, and use Theme Studio to export filtered custom themes.
Quick Start
Use the syncfusion-javascript-themes skill to apply a Tailwind 3 theme, enable e-dark-mode for dark appearance, and update the --color-sf-primary CSS variable to your brand color.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: syncfusion-javascript-themes Download link: https://github.com/syncfusion/javascript-ui-controls-skills/archive/main.zip#syncfusion-javascript-themes Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.