skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

naive-ui-dark-mode

Configure dark mode in Naive UI Vue 3 apps with n-config-provider and useOsTheme.

8|3|Updated Mar 13, 2026
Search Tags:#vue3#dark-mode#system-theme#theme-switching#naive-ui#n-config-provider#theme-variables
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill naive-ui-dark-mode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: naive-ui-dark-mode
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/naive-ui-dark-mode
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill naive-ui-dark-mode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Naive UI dark mode skills provide a structured approach to implement dark/light theme switching, follow system preferences, and customize dark theme variables in Naive UI applications, reducing boilerplate and ensuring consistent styling.

Core Features & Use Cases

  • Seamless integration with Naive UI's n-config-provider and useOsTheme for automatic theme adaptation.
  • Manual and system-driven theme switching, including theme overrides and global styles.
  • Guidance for SSR and persistence to remember user preference.

Quick Start

Wrap your app in n-config-provider and toggle between darkTheme and null, optionally using useOsTheme to follow system settings.

Frequently Asked Questions about naive-ui-dark-mode

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

FAQPage Schema
How do I implement dark mode switching in Naive UI with Vue 3?▼

Implement dark mode in Naive UI by wrapping your application in n-config-provider and toggling between darkTheme and null for seamless theme switching across the component tree.

Can Naive UI automatically follow the system theme preference?▼

Yes, Naive UI can follow system theme preferences by utilizing the useOsTheme hook within n-config-provider to automatically detect and apply the user's OS-level dark or light settings.

What is the best way to customize dark theme variables in Naive UI?▼

Customize dark theme variables in Naive UI by applying theme overrides and global styles through n-config-provider, ensuring consistent styling and reducing boilerplate for your Vue 3 project.

Does Naive UI support SSR and persistence for dark mode preferences?▼

Yes, Naive UI dark mode implementation supports SSR and persistence, allowing you to remember user theme preferences across sessions and render correctly on the server side.

How do I integrate manual theme toggles with system-following behavior in Naive UI?▼

Integrate manual and system-driven theme switching in Naive UI by combining useOsTheme with custom toggle logic, allowing users to manually override automatic system preferences while maintaining global styles.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-config-provider

Centralize theme, locale, and component defaults for Naive UI apps.

Community
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic
truongnattruongnat

vue-pro

Orchestrate Vue 3 development workflows with Pinia, Vue Router, and TypeScript.

Community
Advanced
jiaiyanjiaiyan
8

naive-ui-theming

Standardize Naive UI theming in Vue 3 with n-config-provider and useThemeVars.

Community
Intermediate