Naive UI Design Color

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.

Semantic Colors

Semantic colors are used in different scenarios to convey meaning.

Success

Info

Warning

Error

Text Colors

Naive UI uses a hierarchical text color system for visual clarity.

Light Theme

Dark Theme

Background Colors

Light Theme

Dark Theme

Border & Divider Colors

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