ByteNoteByteNote
字

字节笔记本

2026年2月23日

Tangerine - 温暖优雅的 shadcn/ui 橙色主题

#前端技术

Tangerine 是一款温暖优雅的 shadcn/ui 主题，采用橙色作为主色调，搭配浅灰色背景，营造出清新舒适的视觉体验。该主题由 @mike 设计，目前在 ShadcnThemer 平台上获得 5 个星标收藏。

主题特色

Tangerine 主题以橙色（Tangerine）为核心色彩，这是一种介于红色和黄色之间的温暖色调，能够给用户带来活力和友好的感觉。主题特点包括：

  • 温暖的主色调：使用橙色作为主色，传递积极、热情的品牌形象
  • 浅色友好背景：浅灰蓝色背景（#EFEFEF 附近）减少视觉疲劳
  • 高对比度文字：深色文字确保良好的可读性
  • 圆润的边角设计：0.625rem 的圆角半径，现代感十足
  • 完整的暗色模式：提供配套的深色主题变体

安装方法

你可以通过 shadcn CLI 直接安装此主题：

使用 pnpm

bash
pnpm dlx shadcn@latest add https://shadcnthemer.com/r/themes/44dec9b0-4404-4ded-9c7f-8f2a74a18efb.json

使用 npm

bash
npx shadcn@latest add https://shadcnthemer.com/r/themes/44dec9b0-4404-4ded-9c7f-8f2a74a18efb.json

使用 yarn

bash
yarn dlx shadcn@latest add https://shadcnthemer.com/r/themes/44dec9b0-4404-4ded-9c7f-8f2a74a18efb.json

使用 bun

bash
bunx shadcn@latest add https://shadcnthemer.com/r/themes/44dec9b0-4404-4ded-9c7f-8f2a74a18efb.json

CSS 变量配置

如果你希望手动集成主题，可以将以下 CSS 代码添加到你的 index.css 文件中：

浅色模式

css
:root {
  --background: oklch(0.9383 0.0042 236.4993);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3211 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.3211 0 0);
  --primary: oklch(0.6397 0.1720 36.4421);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9670 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.5510 0.0234 264.3637);
  --accent: oklch(0.9119 0.0222 243.8174);
  --accent-foreground: oklch(0.3791 0.1378 265.5222);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --border: oklch(0.9022 0.0052 247.8822);
  --input: oklch(0.9700 0.0029 264.5420);
  --ring: oklch(0.6397 0.1720 36.4421);
  --radius: 0.625rem;
}

深色模式

css
.dark {
  --background: oklch(0.2598 0.0306 262.6666);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.3106 0.0301 268.6365);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.2900 0.0249 268.3986);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.6397 0.1720 36.4421);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.3095 0.0266 266.7132);
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.3095 0.0266 266.7132);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.3380 0.0589 267.5867);
  --accent-foreground: oklch(0.8823 0.0571 254.1284);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --border: oklch(0.3843 0.0301 269.7337);
  --input: oklch(0.3843 0.0301 269.7337);
  --ring: oklch(0.6397 0.1720 36.4421);
}

色彩分析

Tangerine 主题使用 OKLCH 色彩空间，这是一种基于人眼感知的颜色模型，能够提供更一致和可预测的色彩表现。

主色调

  • 主色（Primary）: oklch(0.6397 0.1720 36.4421) - 温暖的橙色调
  • 色度（Chroma）: 0.1720 - 适中的饱和度，既鲜艳又不刺眼
  • 色相（Hue）: 36.44° - 橙色区域，偏向橙红色

背景色

  • 浅色背景: oklch(0.9383 0.0042 236.4993) - 接近白色的浅灰蓝色
  • 深色背景: oklch(0.2598 0.0306 262.6666) - 深蓝灰色

文字色

  • 浅色模式文字: oklch(0.3211 0 0) - 深灰色，无色彩倾向
  • 深色模式文字: oklch(0.9219 0 0) - 接近白色的浅灰色

适用场景

Tangerine 主题特别适合以下类型的应用：

  • 电商平台：橙色能够刺激购买欲望，提升转化率
  • 食品餐饮：温暖的色调与美食内容相得益彰
  • 生活方式应用：传递积极、健康的生活态度
  • 创意工具：激发用户的创造力和灵感
  • 社交应用：友好的色彩促进用户互动

组件预览

该主题包含完整的 shadcn/ui 组件样式，包括：

  • 按钮（Button）：主色按钮醒目突出，次要按钮柔和协调
  • 卡片（Card）：白色卡片在浅色背景上层次分明
  • 表单输入（Input）：清晰的边框和聚焦状态
  • 日历（Calendar）：选中日期的橙色高亮显示
  • 表格（Table）：清晰的行列分隔，悬停效果
  • 对话框（Dialog）：优雅的弹出层设计
  • 下拉菜单（Dropdown）：流畅的展开动画

与其他主题对比

相比于 shadcn/ui 默认的 Zinc 主题，Tangerine 提供了：

特性TangerineZinc（默认）
主色调橙色锌灰色
情感传达温暖、活力中性、专业
适用场景消费级应用企业级应用
视觉冲击力强弱
品牌辨识度高低

自定义建议

如果你想基于 Tangerine 进行个性化调整，可以考虑：

  1. 调整主色饱和度：增加色度值（第二个参数）让颜色更鲜艳，或降低让颜色更柔和
  2. 修改圆角大小：调整 --radius 变量改变整体风格
  3. 更换强调色：保持主色不变，修改 --accent 变量添加辅助色
  4. 微调背景色：调整背景色的色相和明度，匹配品牌调性

相关资源

总结

Tangerine 是一款精心设计的 shadcn/ui 主题，通过温暖的橙色调为应用注入活力和友好感。无论是构建电商平台、社交应用还是创意工具，这个主题都能为你的项目带来独特的视觉识别度。通过 ShadcnThemer 平台，你可以轻松安装和使用这个主题，也可以作为基础进行进一步的个性化定制。

前端技术
上一篇

Tailwind CSS Cheat Sheet - 在线速查工具

下一篇

Tangerine - 温暖优雅的 shadcn/ui 橙色主题

分享: