Expose Naive UI theme CSS variables inside custom elements.
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-element
Please help me install this Agent Skill. Skill: n-element Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-element Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-element
Element provides access to Naive UI's theme CSS variables for use in custom elements and to read CSS variables within the theme context.
Wrap your content with n-config-provider to expose theme variables and apply them using CSS variables.
High-intent search queries and answers about installing and using this skill.
You can apply Naive UI theme variables to custom elements by wrapping your content with n-config-provider to expose the theme context, then accessing the CSS variables to style your custom components for consistent theme adaptation.
Yes, you can use the useThemeVars helper to read Naive UI theme values inside Vue custom elements. This allows your components to access and apply the CSS variables dynamically while maintaining reactivity when the theme changes.
To make custom Vue components reactive to Naive UI theme changes, use the n-element approach to access theme CSS variables. Updates apply automatically when the theme switches, ensuring your custom widgets adapt without manual style overrides.
Yes, n-config-provider is required to establish the theme context. You must wrap your custom elements with it to expose the Naive UI theme CSS variables, enabling your custom components to read and apply the current theme values accurately.
No, applying Naive UI CSS variables to custom elements does not add extra styling. It acts as a lightweight pass-through to preserve your existing design while providing theme-aware variable access, ensuring no unwanted CSS overrides are injected.
jiaiyanStandardize Naive UI theming in Vue 3 with n-config-provider and useThemeVars.
anderskevConfigure Tailwind CSS v4 themes using @theme directives and OKLCH colors.
jiaiyanRender gradient text with configurable size and type in Vue 3.
damntreckyProvide over 50 accessible web components for React, Vue, Angular, and Svelte.
