opencloud/.agents/skills/naive-ui-design-color/SKILL.md

name, description, metadata

name	description	metadata
naive-ui-design-color	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.	author version jiaiyan 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