克制 · 深色

Vantablack

纯黑留白

纯黑、浅灰与白,把颜色降到最低。

放进一个真实界面里。

打开该风格详情 ↗

同一套 daisyUI 组件。切换风格会保留你输入的内容;以下操作仅作用于当前样张。

小小工作室Vantablack

留给下一件作品

把好奇心,
做成可以体验的东西。

本地样张

一个新想法

桌上的几件事

3 个想法
作品 / 想法状态完成
观察一件喜欢的作品一段阅读灵感
做一个可玩的页面一个网站制作中
记下这次真实反馈一段阅读已完成

完成情况 1 / 3

无衬线标题 · 0px 圆角 · 32px 间距

网页设计延伸

借的不只是颜色。

用空白、字重和细线区分层级,别让灰字失去对比。

值得试的场景
摄影、作品展示、极简工具。这是我们的适配判断,仍需真实内容验证。
字形与轮廓
无衬线标题与正文,强调清晰的层级。 0px 圆角、32px 内容间距。
迁移时先验证
拿一张已有页面替换主题,观察中文、长标题、表单与状态是否仍清楚;先验证,再扩大范围。

原始色板

取自该主题的 colors.toml。网页按钮文字另按黑白对比选择,组件形状与间距为本图鉴的延伸。

背景background#000000
文字foreground#ffffff
强调accent#8d8d8d
选中selection#1a1a1a
红red#a4a4a4
黄yellow#cecece
绿green#b6b6b6
青cyan#b0b0b0
蓝blue#8d8d8d
紫magenta#9b9b9b

回到 Omarchy 原作

查看主题源码 ↗

以下是官方源码附带的桌面预览与壁纸,不是我们的网页样张,也不是本机运行截图。点击图片查看大图。

Vantablack 官方桌面预览:终端、代码编辑器和文件窗口

官方桌面预览 · 原文件 2560 × 1440

看看官方解锁画面Vantablack 官方解锁画面预览

TAILWIND 4 + DAISYUI 5

把这套风格带走。

CSS 可直接接入 daisyUI;JSON 保留原始色板与我们的网页设计参数,方便迁移到其他组件库。

@import "tailwindcss";
@import "./vantablack.css";
@plugin "daisyui" { themes: false; }

/* 使用 data-theme="omarchy-vantablack" */
/* 圆角自动映射到组件;排版使用 --style-* 变量 */

查看上游原文件 ↗