| name | naive-ui-design-color |
| description | Color design specifications for Naive UI. Invoke when user needs to understand the color palette, main colors, semantic colors, or neutral colors used in Naive UI. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Color Design Specifications
Naive UI uses a carefully designed color system with primary green color and semantic colors for different states, providing a consistent look and feel for the products you build.
When to Use
- Understanding the color system
- Applying brand colors correctly
- Using semantic colors (success, warning, error, info)
- Working with neutral colors for text and backgrounds
- Creating themed components
Primary Color
The main color of Naive UI is a vibrant green (#18a058) that conveys freshness and growth.
| Color | CSS Variable | Light Theme | Dark Theme | Usage |
|---|
| Primary | --primary-color | #18a058 | #63e2b7 | Main brand color |
| Primary Hover | --primary-color-hover | #36ad6a | #7fe7c4 | Hover state |
| Primary Pressed | --primary-color-pressed | #0c7a43 | #5acea7 | Active/pressed state |
| Primary Suppl | --primary-color-suppl | #36ad6a | rgb(42, 148, 125) | Supplementary |
Semantic Colors
Semantic colors are used in different scenarios to convey meaning.
Success
| CSS Variable | Light Theme | Dark Theme | Usage |
|---|
--success-color | #18a058 | #63e2b7 | Success operations |
--success-color-hover | #36ad6a | #7fe7c4 | Hover state |
--success-color-pressed | #0c7a43 | #5acea7 | Active state |
--success-color-suppl | #36ad6a | rgb(42, 148, 125) | Supplementary |
Info
| CSS Variable | Light Theme | Dark Theme | Usage |
|---|
--info-color | #2080f0 | #70c0e8 | Information operations |
--info-color-hover | #4098fc | #8acbec | Hover state |
--info-color-pressed | #1060c9 | #66afd3 | Active state |
--info-color-suppl | #4098fc | rgb(56, 137, 197) | Supplementary |
Warning
| CSS Variable | Light Theme | Dark Theme | Usage |
|---|
--warning-color | #f0a020 | #f2c97d | Warning operations |
--warning-color-hover | #fcb040 | #f5d599 | Hover state |
--warning-color-pressed | #c97c10 | #e6c260 | Active state |
--warning-color-suppl | #fcb040 | rgb(240, 138, 0) | Supplementary |
Error
| CSS Variable | Light Theme | Dark Theme | Usage |
|---|
--error-color | #d03050 | #e88080 | Error/danger operations |
--error-color-hover | #de576d | #e98b8b | Hover state |
--error-color-pressed | #ab1f3f | #e57272 | Active state |
--error-color-suppl | #de576d | rgb(208, 58, 82) | Supplementary |
Text Colors
Naive UI uses a hierarchical text color system for visual clarity.
Light Theme
| CSS Variable | Value | Usage |
|---|
--text-color-base | #000 | Base text color |
--text-color-1 | rgb(31, 34, 37) | Primary text - headings, important content |
--text-color-2 | rgb(51, 54, 57) | Secondary text - body content |
--text-color-3 | rgb(118, 124, 130) | Tertiary text - captions, hints |
--text-color-disabled | rgba(0, 0, 0, 0.24) | Disabled text |
--placeholder-color | rgba(0, 0, 0, 0.24) | Placeholder text |
--placeholder-color-disabled | rgba(0, 0, 0, 0.18) | Disabled placeholder |
Dark Theme
| CSS Variable | Value | Usage |
|---|
--text-color-base | #fff | Base text color |
--text-color-1 | rgba(255, 255, 255, 0.9) | Primary text |
--text-color-2 | rgba(255, 255, 255, 0.82) | Secondary text |
--text-color-3 | rgba(255, 255, 255, 0.52) | Tertiary text |
--text-color-disabled | rgba(255, 255, 255, 0.38) | Disabled text |
--placeholder-color | rgba(255, 255, 255, 0.38) | Placeholder text |
--placeholder-color-disabled | rgba(255, 255, 255, 0.28) | Disabled placeholder |
Background Colors
Light Theme
| CSS Variable | Value | Usage |
|---|
--base-color | #fff | Base background |
--body-color | #fff | Body background |
--card-color | #fff | Card background |
--modal-color | #fff | Modal background |
--popover-color | #fff | Popover background |
--table-color | #fff | Table background |
--hover-color | rgb(243, 243, 245) | Hover state background |
--pressed-color | rgb(237, 237, 239) | Pressed state background |
--action-color | rgb(250, 250, 252) | Action area background |
--input-color | #fff | Input background |
Dark Theme
| CSS Variable | Value | Usage |
|---|
--base-color | #000 | Base background |
--body-color | rgb(16, 16, 20) | Body background |
--card-color | rgb(24, 24, 28) | Card background |
--modal-color | rgb(44, 44, 50) | Modal background |
--popover-color | rgb(72, 72, 78) | Popover background |
--table-color | rgb(24, 24, 28) | Table background |
--hover-color | rgba(255, 255, 255, 0.09) | Hover state background |
--pressed-color | rgba(255, 255, 255, 0.05) | Pressed state background |
--action-color | rgba(255, 255, 255, 0.06) | Action area background |
--input-color | rgba(255, 255, 255, 0.1) | Input background |
Border & Divider Colors
| CSS Variable | Light Theme | Dark Theme | Usage |
|---|
--border-color | rgb(224, 224, 230) | rgba(255, 255, 255, 0.24) | Default border |
--divider-color | rgb(239, 239, 245) | rgba(255, 255, 255, 0.09) | Divider lines |
Using Theme Variables
In CSS (with n-element)
<template>
<n-config-provider :theme="theme">
<n-card>
<n-el
tag="span"
style="
color: var(--primary-color);
transition: 0.3s var(--cubic-bezier-ease-in-out);
"
>
Styled with theme variables
</n-el>
</n-card>
</n-config-provider>
</template>
In JavaScript (with useThemeVars)
<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>
<template>
<div :style="{ color: themeVars.primaryColor }">
Primary color text
</div>
</template>
CSS Variables Summary
:root {
--primary-color: #18a058;
--primary-color-hover: #36ad6a;
--primary-color-pressed: #0c7a43;
--success-color: #18a058;
--info-color: #2080f0;
--warning-color: #f0a020;
--error-color: #d03050;
--text-color-1: rgb(31, 34, 37);
--text-color-2: rgb(51, 54, 57);
--text-color-3: rgb(118, 124, 130);
--base-color: #fff;
--body-color: #fff;
--card-color: #fff;
--modal-color: #fff;
--border-color: rgb(224, 224, 230);
--divider-color: rgb(239, 239, 245);
}
Best Practices
- Use CSS Variables: Always use predefined color variables via
useThemeVars() or var(--xxx) for consistency
- Semantic Colors: Use appropriate semantic colors for their intended purpose
- Text Hierarchy: Use text color variables to establish visual hierarchy
- Dark Mode Support: Colors automatically adjust when using dark theme
- Customization: Override theme variables via
n-config-provider to match your brand
- State Colors: Use hover/pressed variants for interactive elements
Related Resources
