syncfusion-vue-themes

Q: How do I install syncfusion-vue-themes?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-themes in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-themes/ (personal) or .claude/skills/syncfusion-vue-themes/ (project).

by syncfusionFrontend & Design

Use this skill when users need to apply themes, customize appearance, switch dark mode, use CSS variables, configure icons, or modify visual styling for Syncfusion Vue components. Covers icon library, size modes, and Theme Studio integration.

Installs: 64
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-themes

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-vue-themes automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Themes in Syncfusion Vue Components

Syncfusion Vue components provide comprehensive theming support with modern, customizable themes. This skill guides you through applying themes, customizing appearance, implementing dark mode, using CSS variables, managing icons, and creating custom themes for consistent, professional Vue applications.

Documentation and Navigation Guide
Quick Start
Common Patterns

Documentation and Navigation Guide

Built-in Themes

📄 Read: references/built-in-themes.md

Available 10+ themes
Applying themes via npm packages, CDN, or individual component styles
Optimized (lite) CSS files for reduced bundle size

Dark Mode Implementation

📄 Read: references/dark-mode.md

Global dark mode with e-dark-mode class
Per-component dark mode
Runtime theme switching with checkboxes or toggle buttons

CSS Variables Customization

📄 Read: references/css-variables.md

CSS variable structure for each theme (Material 3, Fluent 2, Bootstrap 5.3, Tailwind 3.4)
Customizing primary, success, warning, danger, info colors
Runtime color modification with JavaScript
Theme-specific variable formats (RGB vs hex values)

Icon Library

📄 Read: references/icons.md

Setting up the icon library (npm or CDN)
Using icons with e-icons class
Icon sizing (small, medium, large)
Customizing icon color and appearance
Available icon sets per theme

Size Modes

📄 Read: references/advanced-theming.md

Normal vs touch (bigger) size modes
Enabling size modes globally or per-component
Runtime size mode switching

Advanced Features

📄 Read: references/advanced-theming.md

Styled-components integration
Font customization across all components
Theme Studio for custom theme creation

Migrating Styles from Component Packages to Theme Packages

📄 Read: references/migration-styles.md

Migrate from component packages to theme packages
SCSS & CSS Reference migration to theme packages
Automatic dependency inclusion via index files

Quick Start

Install and Apply a Theme

Step 1: Install Syncfusion Vue Package and theme package

npm install @syncfusion/ej2-vue-buttons @syncfusion/ej2-tailwind3-theme@latest --save

Step 2: Import Theme CSS

Option 1: Import from npm (Recommended)

/* src/App.vue - <style> section */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

Option 2: Use CDN

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues.

To find your installed version:

npm list @syncfusion/ej2-vue-buttons

Then use the matching CDN version:

<!-- index.html -->
<!-- Replace {VERSION} with your installed package version (e.g., 28.1.33, 33.1.44) -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>

<!-- Example: If your package version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

Note: Using npm imports (Option 1) is recommended as it automatically keeps CSS and JavaScript versions in sync.

Common Patterns

Pattern 1: Apply Dark Mode Globally

<template>
  <div>
    <ejs-checkbox 
      label="Enable Dark Mode" 
      :checked="isDarkMode" 
      @change="handleDarkModeToggle"
    />
    <ejs-button cssClass="e-primary">Sample Button</ejs-button>
  </div>
</template>

<script>
import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  components: {
    'ejs-checkbox': CheckBoxComponent,
    'ejs-button': ButtonComponent
  },
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    handleDarkModeToggle(event) {
      this.isDarkMode = event.checked ?? false;
      
      if (this.isDarkMode) {
        document.body.classList.add('e-dark-mode');
      } else {
        document.body.classList.remove('e-dark-mode');
      }
    }
  }
};
</script>

Pattern 2: Customize Primary Color with CSS Variables

For Fluent 2 Theme:

<style>
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}
</style>

For Material 3 Theme (uses RGB values):

<style>
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}
</style>

Pattern 3: Enable Touch Mode Globally

<!-- index.html -->
<body class="e-bigger">
  <div id="app"></div>
</body>

Or per-component:

<ejs-button cssClass="e-bigger">Touch-Friendly Button</ejs-button>

Pattern 4: Use Optimized CSS for Faster Loading

```vue
<style>
/* Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";
</style>

Pattern 5: Use Icons from Syncfusion Library

Install icons package:

You can install either the icons package or the theme package:

npm install @syncfusion/ej2-icons@latest

/* or */

npm install @syncfusion/ej2-tailwind3-theme@latest

Import icon styles:

/* Syncfusion theme package icon styles */
<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";
</style>

/* or */

/* Syncfusion components package icon styles */
<style>
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
</style>

Use icons in components:

<template>
  <span class="e-icons e-cut"></span>
  <span class="e-icons e-medium e-copy"></span>
  <span class="e-icons e-large e-paste"></span>
</template>

FAQ

What does the syncfusion-vue-themes skill do?

How do I install syncfusion-vue-themes?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-themes in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-themes/ (personal) or .claude/skills/syncfusion-vue-themes/ (project).

Which AI agents can use syncfusion-vue-themes?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-vue-themes safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-vue-themes?

It is published by syncfusion in syncfusion/vue-ui-components-skills. It has 64 recorded installs.