naive-ui-design-color

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

1. Use CSS Variables: Always use predefined color variables via useThemeVars() or var(--xxx) for consistency
2. Semantic Colors: Use appropriate semantic colors for their intended purpose
3. Text Hierarchy: Use text color variables to establish visual hierarchy
4. Dark Mode Support: Colors automatically adjust when using dark theme
5. Customization: Override theme variables via n-config-provider to match your brand
6. State Colors: Use hover/pressed variants for interactive elements

---

Related Resources

Resource	Description
useThemeVars	Access theme variables in JavaScript
n-element	Use CSS variables in templates
n-config-provider	Theme customization