设计系统【免费下载链接】catppuccin Soothing pastel theme for the high-spirited!项目地址https://gitcode.com/gh_mirrors/ca/catppuccin点击查看免费下载Catppuccin 是一套社区驱动的柔和粉彩pastel主题由 4 个 flavorLatte、Frappé、Macchiato、Mocha构成每个 flavor 提供 26 种颜色。本文基于仓库 docs/style-guide.md 全文系统讲解如何正确地使用这套调色板从界面背景与排版的基础配色到终端的 ANSI 颜色映射与生成公式再到代码编辑器中的语法高亮、彩虹高亮、Diff 与调试配色。读完本文你将掌握为任意应用port编写符合 Catppuccin 官方规范的主题所需的全部分配规则与落地方法。前置知识四种 Flavor 与 26 色体系在深入使用规范之前先理解调色板本身的结构。根据 README.md 与 docs/specs.md 的说明四种 flavorLatte浅色、Frappé、Macchiato、Mocha深色每个 flavor 都是温暖的、令人舒缓的配色旨在成为低对比度与高对比度主题之间的中间地带每种 flavor 含 26 个标签labels其中 14 个彩色标签Rosewater、Flamingo、Pink、Mauve、Red、Maroon、Peach、Yellow、Green、Teal、Sky、Sapphire、Blue、Lavender与 12 个灰阶标签Text、Subtext 1、Subtext 0、Overlay 2/1/0、Surface 2/1/0、Base、Mantle、Crust两个子调色板每个 flavor 由单色子调色板紫色-灰色与极浅薰衣草色的不同明度层次通常用于 UI 组件和同类色子调色板覆盖彩虹色系的彩色标签通常用于语法元素组成。26 色的完整 Hex/RGB/HSL 数值可查阅 README.md 中的 Palette 章节。这套灰阶管 UI、彩色管语法的分工正是下文所有分配规则的设计出发点背景与界面的层次感交给灰阶标签语义与语法的可辨识度交给彩色标签。通用使用规范背景与排版的基础配色本节对应 style-guide 的General Usage部分是任何 port 的起点。官方明确提示docs/style-guide.md文本颜色只是指导性建议某些场景需要偏离下述规则例如彩色背景上的text。可读性永远排在第一位请结合具体情况自行判断。背景色分层从主面板到浮层Catppuccin 用一组灰阶标签构造界面的深度主面板最亮/最暗次级面板与表面元素依次退后浮层Overlay用于叠加信息。功能使用颜色背景面板Background PaneBase次级面板Secondary PanesCrust、Mantle表面元素Surface ElementsSurface 0、Surface 1、Surface 2浮层OverlaysOverlay 0、Overlay 1、Overlay 2实践中可以这样理解分层逻辑窗口/主视图用Base侧边栏、状态栏等次级区域用比Base更靠边的Crust/Mantle卡片、输入框、按钮等表面元素从Surface 0到Surface 2逐级抬高而 tooltip、下拉菜单、遮罩等浮层信息落在Overlay 0–2。以 Mocha 为例Hex 见 README.mdBase #1e1e2e→Crust #11111b→Surface 0 #313244→Overlay 0 #6c7086明度逐级变化层次一目了然。排版色彩正文、标题、链接与状态文本类标签同样遵循明确的分配规则功能使用颜色正文Body CopyText主标题Main HeadlineText副标题、标签Sub-Headlines, LabelsSubtext 0、Subtext 1弱化文字SubtleOverlay 1强调色之上的文字On AccentBase链接、URLBlue成功SuccessGreen警告WarningsYellow错误ErrorsRed标签、胶囊Tags, PillsBlue选区背景Selection BackgroundOverlay 220%–30% 透明度光标CursorRosewater几个值得注意的细节正文与主标题都用Text通过字重而非颜色来区分层级这与 Catppuccinminimal and flat的设计风格一致On Accent 使用Base当文字需要落在彩色/强调背景上时反转为背景色以保证对比度选区背景必须加透明度20%–30% 的Overlay 2而不是直接使用不透明色块这是保持柔和观感的关键语义色固定成功Green、警告Yellow、错误Red全生态统一避免每个 port 各自发挥。终端配色规范style-guide 的Terminals部分给出了终端模拟器Terminal Emulator的完整颜色映射这是制作终端类 port如各种 shell、TUI 工具主题的直接依据。所有终端颜色都来自 26 色体系但具体映射随 flavor 略有差异下表已按官方规范逐项列出。窗口颜色功能LatteFrappéMacchiatoMocha光标CursorRosewaterRosewaterRosewaterRosewater光标文字Cursor TextBaseCrustCrustCrust活动窗口边框Active BorderLavenderLavenderLavenderLavender非活动窗口边框Inactive BorderOverlay 0Overlay 0Overlay 0Overlay 0响铃边框Bell BorderYellowYellowYellowYellow注意Cursor Text在 Latte 中映射为Base而在三个深色 flavor 中映射为Crust——这是因为浅色主题Latte的光标与文字需要更高的区分度官方在深色主题中统一选用了最深的Crust。常规 ANSI 颜色color0–color7ANSI 槽位LatteFrappé / Macchiato / Mochacolor0BlackSubtext 1Surface 1color1RedRedRedcolor2GreenGreenGreencolor3YellowYellowYellowcolor4BlueBlueBluecolor5MagentaPinkPinkcolor6CyanTealTealcolor7WhiteSurface 2Subtext 0彩色槽位color1–6在四个 flavor 中一致地映射到彩虹色系的同名标签而黑color0与白color7两个槽位被借用为灰阶标签且 Latte 与深色 flavor 的映射刻意相反——Latte 把 Black 映射到较深的Subtext 1、把 White 映射到较浅的Surface 2深色 flavor 则反之。这种对调是为了在明暗不同的底色上都保持文字与终端默认前景/背景的合理对比。亮色 ANSI 颜色color8–color15ANSI 槽位LatteFrappé / Macchiato / Mochacolor8Bright BlackSubtext 0Surface 2color9Bright RedBright RedBright Redcolor10Bright GreenBright GreenBright Greencolor11Bright YellowBright YellowBright Yellowcolor12Bright BlueBright BlueBright Bluecolor13Bright MagentaBright PinkBright Pinkcolor14Bright CyanBright TealBright Tealcolor15Bright WhiteSurface 1Subtext 1亮色槽位的彩色部分color9–14同样四个 flavor 一致黑/白两个亮色槽位color8、color15继续沿用Latte 与深色 flavor 对调灰阶标签的规律。扩展颜色与语法高亮color16–17、Mark 1–3终端除标准 16 色外还有两个扩展槽位以及用于语法高亮的三个 Mark 组槽位映射color16Peachcolor17RosewaterMark 1 / Mark 1 TextLavender / Base深色 flavor 为 CrustMark 2 / Mark 2 TextMauve / Base深色 flavor 为 CrustMark 3 / Mark 3 TextSapphire / Base深色 flavor 为 Crust三个 Mark 组在明暗 flavor 间同样存在 Text 颜色反转Latte 中 Mark 上的文字用Base深色 flavor 用Crust规则与光标文字一致。ANSI 亮色的生成公式style-guide 在脚注中给出了亮色Bright系列的技术细节这对实现/校验 port 的自动生成逻辑非常关键。官方提示亮色并不一定比普通色更亮而是更粗体bold、更饱和saturated。除black与white外ANSI 亮色是基于对应普通色自动计算生成的公式基于 OKLCH 色彩空间其中color指基础色的颜色对象参数Mocha / Macchiato / FrappéLatteLightnesscolor.lightness * 0.94color.lightness * 1.09Chromacolor.chroma 8不变Huecolor.hue 2color.hue 2可以看到深色 flavor 通过降低明度、提升彩度、微调色相得到更浓郁饱和的亮色而 Latte 由于本身是浅色主题改为提升明度以保持亮色在浅色背景上的可辨识度。blackcolor0/color8与whitecolor7/color15则不走公式直接做灰阶标签映射槽位Mocha / Macchiato / FrappéLatteBlack (0)Surface 1Subtext 1Black (8)Surface 2Subtext 0White (7)Subtext 0Surface 2White (15)Subtext 1Surface 1仓库中 assets/palette/circles/ansi/ 目录下的 64 个*_ansi_*.png色块正是这 16 槽位 × 4 flavor 的计算/映射结果的可视化对照可用于核对 port 中的具体取值。代码编辑器配色规范style-guide 的Code Editors部分是篇幅最长、也最需要结合编辑器能力灵活取舍的一节。官方特别声明该部分仍在完善中work-in-progress且不同编辑器的主题能力不同请结合主色定义自行判断docs/style-guide.md。语言默认语法配色以下为跨语言通用的语法元素分配四 flavor 一致语法元素颜色关键字KeywordMauve字符串StringsGreen符号、原子Symbols, AtomsRed转义序列、正则Escape Sequences, RegexPink注释CommentsOverlay 2常量、数字Constants, NumbersPeach运算符OperatorsSky括号、分隔符Braces, DelimitersOverlay 2方法、函数Methods, FunctionsBlue参数ParametersMaroon内建对象BuiltinsRed类、接口、注解、元数据、枚举、类型Yellow枚举变体Enum VariantsTeal属性Property如 JSON 键Blue属性Attributes如 XML 风格属性Yellow宏MacrosRosewater这套映射的核心理念语法角色绑定固定颜色。例如凡是类型/类一律 Yellow凡是属性键一律 Blue保证用户在不同语言间切换时获得一致的色彩认知。Overlay 2同时用于注释和括号/分隔符说明官方刻意让这两类低频信息保持低调。通用元素编辑器界面元素的分配功能颜色光标CursorRosewater光标行Cursor LineText10% 透明度行号Line NumbersOverlay 1活动行号Active Line NumberLavender普通链接 / 已访问链接 / 悬停链接Blue / Lavender / Sky搜索前景 / 搜索背景Text / Teal活动搜索前景 / 活动搜索背景Text / Red错误ErrorsRed警告WarningsYellow、Peach信息InformationTeal注意链接三态与搜索两态都做了有意的状态区分普通链接 Blue → 已访问 Lavender → 悬停 Sky普通搜索用 Teal 背景活动搜索项则用 Red 背景突出。错误/警告/信息三态与通用规范中的语义色保持一致。彩虹高亮Rainbow Highlights用于括号、标题等希望按彩虹序列循环着色的场景序号颜色Color #1RedColor #2PeachColor #3YellowColor #4GreenColor #5SapphireColor #6Lavender彩虹序列从暖色Red向冷色Lavender过渡六色构成一个完整的可见光谱循环。作为对照assets/palette/demo.png 顶部色带也直观呈现了同源的彩虹顺序。彩虹参数与局部变量Rainbow Parameters Local Variables用于参数的彩虹配色不是直接使用纯色而是与 Text 按 60% 比例混合序号颜色Color #160% Text / Red 混合Color #260% Text / Yellow 混合Color #360% Text / Green 混合Color #460% Text / Teal 混合Color #560% Text / Blue 混合Color #660% Text / Mauve 混合混合后的结果就是 assets/palette/circles/semantic/ 目录下的*_semantic_*.png色块每 flavor 6 个。这一设计让参数/局部变量在保持彩虹可区分性的同时明度更贴近正文、不抢主体代码的风头。Diff 与 Merge功能颜色Diff 头Diff HeaderBlue索引元数据Index MetadataOverlay 2文件路径标记File Path MarkersPinkHunk 头Hunk HeaderPeach变更文本背景Changed Text BGBlue10%–20% 透明度变更行背景Changed Line BGBlue15%–25% 透明度新增文本背景Inserted Text BGGreen10%–20% 透明度新增行背景Inserted Line BGGreen15%–25% 透明度删除文本背景Removed Text BGRed10%–20% 透明度删除行背景Removed Line BGRed15%–25% 透明度与通用规范一致新增/删除沿用 Green/Red 语义色且所有 diff 背景都强制半透明文本背景透明度低于行背景既保留 diff 信息的醒目程度又不遮蔽底色、维持粉彩主题的柔和观感。调试相关功能颜色断点图标Breakpoint IconRed断点行Breakpoint Line透明Transparent执行中断点行Breakpoint Line During ExecutionYellow15% 透明度断点图标沿用语义红当前执行到的断点行以 15% 透明度的 Yellow 提亮与光标行、选区背景的低透明度高亮手法保持一致。将规范落地从色板到 port上述表格是权威参照落地时还需把颜色名映射为具体的十六进制值。每个 flavor 的 26 色完整数值Hex/RGB/HSL都在 README.md 的 Palette 章节逐色列出例如 Mocha 的关键色标签HexBase#1e1e2eCrust#11111bSurface 1#45475aSubtext 1#bac2deText#cdd6f4Rosewater#f5e0dcLavender#b4befeRed / Green / Yellow#f38ba8/#a6e3a1/#f9e2af以一个简化的主题配置片段为例将本文的规范映射为可执行配置以 Mocha 为例{ flavor: mocha, editor: { background: #1e1e2e, foreground: #cdd6f4, cursor: #f5e0dc, cursorLine: rgba(205, 214, 244, 0.1), selection: rgba(147, 153, 178, 0.25), lineNumber: #7f849c, activeLineNumber: #b4befe }, syntax: { keyword: #cba6f7, string: #a6e3a1, number: #fab387, function: #89b4fa, comment: #9399b2, type: #f9e2af }, terminal: { color0: #45475a, color1: #f38ba8, color2: #a6e3a1, color8: #585b70, color15: #bac2de, color16: #fab387, color17: #f5e0dc } }若你想基于这套规范为某个应用创建正式的 port可遵循 docs/port-creation.md 的流程以官方模板起步、将预览图放入assets/优先.webp、仓库名使用lower-kebab-case、描述格式为 emojiSoothing pastel theme forapp name提交前请确保你的配色逐项对照本文的分配表特别是 ANSI 槽位、透明度和明暗 flavor 的差异项。延伸阅读docs/specs.md调色板的性质与结构flavor、子调色板定义docs/port-creation.md创建与提交 Catppuccin port 的完整工作流docs/README.mdCatppuccin 文档总览README.md四种 flavor 的 26 色完整数值与设计哲学assets/palette/circles/各标签、ANSI 槽位、semantic 混合色的色块可视化赞分享设计系统【免费下载链接】catppuccin Soothing pastel theme for the high-spirited!项目地址https://gitcode.com/gh_mirrors/ca/catppuccin点击查看免费下载相关推荐MXC性能基准测试各后端性能对比分析MXC性能基准测试各后端性能对比分析 MXCGitHub推荐项目精选是一款基于策略驱动的分层隔离与容器化工具提供了多种后端实现以满足不同场景的隔离需求。LOTSA数据集预训练赋能Moirai-1.0-R-Large为何能成为通用时间序列模型LOTSA数据集预训练赋能Moirai 1.0 R Large为何能成为通用时间序列模型 Moirai 1.0 R Large是Salesforce推出的通开发者工具设计系统终极指南如何3分钟搞定yuzu模拟器版本管理难题终极指南如何3分钟搞定yuzu模拟器版本管理难题 还在为yuzu模拟器版本更新而烦恼吗每次都要手动搜索、下载、解压既浪费时间又容易出错今天我要分享一个游戏开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考