主题实验室

在这里调试 BrutxUI 的核心视觉令牌。选择一个内置主题作为基底，调整色彩、边框、圆角和硬阴影，通过产品预览、组件矩阵、对比度检查和 token 覆盖率确认主题质量，然后复制生成的 CSS 到你的项目中。

Theme Lab

调出属于你的 BrutxUI 主题

选择基底主题，调节色彩、边框、圆角和硬阴影，右侧预览会局部响应，复制的 CSS 可以直接粘贴到使用 BrutxUI 的项目里。

实时预览

Classic / light

主要次要强调

启动控制台

产品控制台预览，用来判断主题在真实界面里的整体气质。

上线

收入

42.8K

本周 +18%

活跃

1,284

用户在线

阴影

4px

硬偏移

账户状态风险

brutal-studio.io

hello@brutx.dev

健康低

mono-labs.dev

ops@brutx.dev

试用高

组件矩阵

快速扫一眼常用组件状态是否清晰。

DefaultPrimarySuccessDanger

信息表面

提示、卡片和徽标都继承本地主题变量。

危险表面

破坏性颜色对比度在下方检查。

色板

Base

BG: #ffffff

FG: #000000

Muted

BG: #f3f4f6

FG: #4B5563

Primary

BG: #FF6B6B

FG: #000000

Secondary

BG: #4ECDC4

FG: #000000

Accent

BG: #FFE66D

FG: #000000

Destructive

BG: #EF476F

FG: #ffffff

Success

BG: #7FB069

FG: #000000

Info

BG: #4A90D9

FG: #ffffff

质量检查

6/8 通过，2 个偏低

CSS 覆盖率 52/52 tokens

light 和 dark 输出都覆盖完整。

正文

fg / bg

通过

21.0:1

target 4.5:1

柔和文本

mutedForeground / muted

通过

6.9:1

target 4.5:1

主强调色文本

primaryForeground / primary

通过

7.6:1

target 4.5:1

辅助色文本

secondaryForeground / secondary

通过

10.9:1

target 4.5:1

强调色文本

accentForeground / accent

通过

16.8:1

target 4.5:1

危险色文本

destructiveForeground / destructive

偏低

3.6:1

target 4.5:1

成功色文本

successForeground / success

通过

8.3:1

target 4.5:1

信息色文本

infoForeground / info

偏低

3.3:1

target 4.5:1

生成的 CSS

复制到项目 CSS 中即可使用 `.theme-custom`。

.theme-custom {
    --brutal-border-width: 3px;
    --brutal-border-color: #000000;
    --brutal-shadow-offset-x: 4px;
    --brutal-shadow-offset-y: 4px;
    --brutal-shadow-color: #000000;
    --brutal-radius: 0px;
    --brutal-bg: #ffffff;
    --brutal-fg: #000000;
    --brutal-primary: #FF6B6B;
    --brutal-primary-foreground: #000000;
    --brutal-secondary: #4ECDC4;
    --brutal-secondary-foreground: #000000;
    --brutal-accent: #FFE66D;
    --brutal-accent-foreground: #000000;
    --brutal-destructive: #EF476F;
    --brutal-destructive-foreground: #ffffff;
    --brutal-success: #7FB069;
    --brutal-success-foreground: #000000;
    --brutal-muted: #f3f4f6;
    --brutal-muted-foreground: #4B5563;
    --brutal-ring: #000000;
    --brutal-pressed-offset: 2px;
    --brutal-info: #4A90D9;
    --brutal-info-foreground: #ffffff;
    --brutal-overlay: rgba(0, 0, 0, 0.5);
    --brutal-placeholder: #9CA3AF;
}

.dark .theme-custom,
.theme-custom.dark {
    --brutal-border-width: 3px;
    --brutal-border-color: #ffffff;
    --brutal-shadow-offset-x: 4px;
    --brutal-shadow-offset-y: 4px;
    --brutal-shadow-color: #ffffff;
    --brutal-radius: 0px;
    --brutal-bg: #141414;
    --brutal-fg: #ffffff;
    --brutal-primary: #FF6B6B;
    --brutal-primary-foreground: #000000;
    --brutal-secondary: #4ECDC4;
    --brutal-secondary-foreground: #000000;
    --brutal-accent: #FFE66D;
    --brutal-accent-foreground: #000000;
    --brutal-destructive: #EF476F;
    --brutal-destructive-foreground: #ffffff;
    --brutal-success: #7FB069;
    --brutal-success-foreground: #000000;
    --brutal-muted: #1e1e1e;
    --brutal-muted-foreground: #9CA3AF;
    --brutal-ring: #ffffff;
    --brutal-pressed-offset: 2px;
    --brutal-info: #3B82F6;
    --brutal-info-foreground: #ffffff;
    --brutal-overlay: rgba(0, 0, 0, 0.7);
    --brutal-placeholder: #6B7280;
}

使用生成的 CSS

将生成的 .theme-custom 代码粘贴到你的全局样式文件中，然后把类名应用到根容器：

html

<div class="theme-custom">
    <!-- Your app -->
</div>

如果你的应用使用暗色模式，请在同一个元素或上层元素加上 .dark：

html

<html class="dark">
    <body>
        <div class="theme-custom">
            <!-- Your app -->
        </div>
    </body>
</html>

这个实验室只生成 CSS 变量，不会修改 useTheme() 的内置主题类型。

主题实验室 ​

调出属于你的 BrutxUI 主题

Classic / light

启动控制台

组件矩阵

信息表面

危险表面

使用生成的 CSS ​

主题实验室

使用生成的 CSS