Theme Playground

Debug BrutxUI's core visual tokens here. Choose a built-in theme as your base, adjust colors, borders, radius, and hard shadows, confirm theme quality through product preview, component matrix, contrast check, and token coverage, then copy the generated CSS into your project.

Theme Lab

Craft Your BrutxUI Theme

Pick a base theme, tweak colors, borders, radii and hard shadows. The preview on the right reacts live, and the copied CSS can be pasted directly into any project using BrutxUI.

Live preview

Classic / light

PrimarySecondaryAccent

Launch Console

A product console preview to gauge how the theme feels in a real interface.

Online

Revenue

42.8K

+18% this week

Active

1,284

users online

Shadow

4px

hard offset

AccountStatusRisk

brutal-studio.io

hello@brutx.dev

HealthyLow

mono-labs.dev

ops@brutx.dev

TrialHigh

Component matrix

Quickly check whether common component states read clearly.

DefaultPrimarySuccessDanger

Info surface

Alerts, cards and badges all inherit local theme variables.

Danger surface

Destructive color contrast is checked below.

Swatches

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

Quality check

6/8 passed, 2 low

CSS coverage 52/52 tokens

Both light and dark outputs are fully covered.

正文

fg / bg

Pass

21.0:1

target 4.5:1

柔和文本

mutedForeground / muted

Pass

6.9:1

target 4.5:1

主强调色文本

primaryForeground / primary

Pass

7.6:1

target 4.5:1

辅助色文本

secondaryForeground / secondary

Pass

10.9:1

target 4.5:1

强调色文本

accentForeground / accent

Pass

16.8:1

target 4.5:1

危险色文本

destructiveForeground / destructive

Low

3.6:1

target 4.5:1

成功色文本

successForeground / success

Pass

8.3:1

target 4.5:1

信息色文本

infoForeground / info

Low

3.3:1

target 4.5:1

Generated CSS

Copy into your project CSS to use `.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;
}

Using the Generated CSS

Paste the generated .theme-custom code into your global stylesheet, then apply the class name to the root container:

html

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

If your application uses dark mode, add .dark to the same element or a parent element:

html

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

This playground only generates CSS variables and does not modify the built-in theme types of useTheme().

Theme Playground ​

Craft Your BrutxUI Theme

Classic / light

Launch Console

Component matrix

Info surface

Danger surface

Using the Generated CSS ​

Theme Playground

Using the Generated CSS