🎨 Cockpit 配色体系预览

语义化颜色

--background
页面背景
--card
卡片背景
--secondary
次级背景
--accent
悬停状态
--brand
品牌强调
--border
边框颜色

Slate 灰色色阶

slate-1
slate-2
slate-3
slate-4
slate-5
slate-6
slate-7
slate-8
slate-9
slate-10
slate-11
slate-12

Teal 品牌色阶

teal-1
teal-2
teal-3
teal-4
teal-5
teal-6
teal-7
teal-8
teal-9
teal-10
teal-11
teal-12

状态颜色

成功 / 新增
错误 / 删除
警告 / 修改
信息 / 链接

组件示例

按钮
输入框
状态标签
✓ 成功 ✗ 错误 ⚠ 警告 ℹ 信息
标签页
目录树
最近浏览
Git 变更
Git 历史
标签内容区域
列表
选中项目
这是选中状态的样式
普通项目
悬停时显示高亮背景
另一个项目
次要文字使用 muted 色
文件树 (Git 状态)
📁 src
📄 App.tsx M
📄 index.ts A
📄 old.ts D
Diff 视图
1 function hello() {
2 - console.log("Hello");
3 + console.log("Hello, World!");
4 }

与 VS Code Dark 对比

VS Code Default Dark
📁 src
📄 App.tsx
const app = "hello";
Cockpit Theme
📁 src
📄 App.tsx
const app = "hello";