New Page

I'll quickly verify the full list of Bricks Builder custom-theme CSS variables so the themes are complete, then write them.
Verified against the official Bricks docs — the variable list you posted is the complete Bricks 2.x starter set, so every theme below overrides all of them (nothing left inheriting light values).

How to use

Bricks → Settings → Builder → Builder Mode → Custom → Save.
Paste one file's contents into the Builder Mode (Custom) code field → Save.
Reload the builder.

Only one [data-builder-mode=custom] block can be active at a time, so keep these as separate files and swap the one you want.

The set

File	Vibe	Accent
`warm.css`	Coffee/ember dark, low blue light	Amber `#f0a04b`
`purple.css`	Deep violet, matches your light theme's accent	Violet `#b47cff`
`midnight.css`	Navy blue-black	Blue `#4d8dff`
`forest.css`	Dark moss green	Green `#56d17a`
`ocean.css`	Deep teal	Cyan `#2fd4d4`
`carbon.css`	Neutral grey, no color cast	Blue `#4c9aff`
`oled.css`	True-black monochrome, max contrast	White `#f4f4f5`
`rose.css`	Dark plum / rose	Pink `#ff6f9c`
`cyberpunk.css`	Near-black + neon	Neon cyan `#00f0ff`
`dracula.css`	Dracula palette	`#bd93f9`
`nord.css`	Nord palette, soft & muted	`#88c0d0`
`gruvbox.css`	Retro warm-earth	`#fabd2f`
`tokyo-night.css`	Tokyo Night	`#7aa2f7`
`catppuccin-mocha.css`	Catppuccin Mocha, pastel	`#cba6f7`
`solarized-dark.css`	Solarized Dark	`#268bd2`

`warm.css`

/* Warm — coffee & ember dark. Low blue-light, easy on the eyes at night. */
[data-builder-mode=custom] {
  --builder-bg: #16130f;
  --builder-bg-2: #1e1a15;
  --builder-bg-3: #29231a;
  --builder-bg-4: #372f23;
  --builder-bg-accent: #3a2410;

  --builder-color: #f6f0e6;
  --builder-color-description: #b09a7d;
  --builder-color-accent: #f0a04b;
  --builder-color-accent-inverse: #1a1206;

  --builder-color-knob: #7a6a55;
  --builder-border-color: #33291f;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7cc3f0;
  --builder-bg-class: #16293a;
  --builder-color-component: #c9a2f5;
  --builder-bg-component: #2a1f3d;
  --builder-color-info: #64b6e8;
  --builder-bg-info: #13293a;
  --builder-color-danger: #ff8a80;
  --builder-bg-danger: #3a1714;
  --builder-color-success: #6ede9f;
  --builder-bg-success: #10301f;
  --builder-color-muted: #9c8c78;
  --builder-bg-muted: #262019;

  --builder-canvas-scrollbar-thumb: #4a3f31;
  --builder-canvas-scrollbar-thumb_hover: #7a6a55;
  --builder-canvas-scrollbar-track: #1e1a15;

  --bricks-tooltip-bg: #f6f0e6;
  --bricks-tooltip-text: #16130f;
}

`purple.css`

/* Purple — deep violet dark. Dark counterpart to the default custom theme. */
[data-builder-mode=custom] {
  --builder-bg: #120f1c;
  --builder-bg-2: #191428;
  --builder-bg-3: #221b35;
  --builder-bg-4: #2f2447;
  --builder-bg-accent: #2b1152;

  --builder-color: #f1ecff;
  --builder-color-description: #a294c6;
  --builder-color-accent: #b47cff;
  --builder-color-accent-inverse: #16091f;

  --builder-color-knob: #6e5f96;
  --builder-border-color: #2a2240;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #79c0ff;
  --builder-bg-class: #13253a;
  --builder-color-component: #d0a8ff;
  --builder-bg-component: #2d1a4d;
  --builder-color-info: #7cb8ff;
  --builder-bg-info: #142440;
  --builder-color-danger: #ff8b9a;
  --builder-bg-danger: #3b1420;
  --builder-color-success: #74e2ad;
  --builder-bg-success: #103024;
  --builder-color-muted: #9186ad;
  --builder-bg-muted: #241e33;

  --builder-canvas-scrollbar-thumb: #443a63;
  --builder-canvas-scrollbar-thumb_hover: #6e5f96;
  --builder-canvas-scrollbar-track: #191428;

  --bricks-tooltip-bg: #efe9ff;
  --bricks-tooltip-text: #120f1c;
}

`midnight.css`

/* Midnight — navy blue-black. */
[data-builder-mode=custom] {
  --builder-bg: #0b1020;
  --builder-bg-2: #111832;
  --builder-bg-3: #17203c;
  --builder-bg-4: #212c50;
  --builder-bg-accent: #10294f;

  --builder-color: #e8eefc;
  --builder-color-description: #8b9bc2;
  --builder-color-accent: #4d8dff;
  --builder-color-accent-inverse: #061024;

  --builder-color-knob: #5a6b96;
  --builder-border-color: #1f2848;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #6fd3ff;
  --builder-bg-class: #0d2e42;
  --builder-color-component: #b899ff;
  --builder-bg-component: #241f4a;
  --builder-color-info: #71b7ff;
  --builder-bg-info: #10294f;
  --builder-color-danger: #ff8497;
  --builder-bg-danger: #35141f;
  --builder-color-success: #63dfa8;
  --builder-bg-success: #0c3026;
  --builder-color-muted: #7f8db0;
  --builder-bg-muted: #1a2138;

  --builder-canvas-scrollbar-thumb: #33406b;
  --builder-canvas-scrollbar-thumb_hover: #5a6b96;
  --builder-canvas-scrollbar-track: #111832;

  --bricks-tooltip-bg: #e8eefc;
  --bricks-tooltip-text: #0b1020;
}

`forest.css`

/* Forest — dark moss green. */
[data-builder-mode=custom] {
  --builder-bg: #0d140f;
  --builder-bg-2: #131c15;
  --builder-bg-3: #1a261d;
  --builder-bg-4: #243428;
  --builder-bg-accent: #123423;

  --builder-color: #e9f2e9;
  --builder-color-description: #8fa891;
  --builder-color-accent: #56d17a;
  --builder-color-accent-inverse: #06170d;

  --builder-color-knob: #5c7460;
  --builder-border-color: #1f2c22;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7fc7e8;
  --builder-bg-class: #132b36;
  --builder-color-component: #c3a4ee;
  --builder-bg-component: #262039;
  --builder-color-info: #6fbfd6;
  --builder-bg-info: #122c33;
  --builder-color-danger: #ff8a7a;
  --builder-bg-danger: #341813;
  --builder-color-success: #7ee08d;
  --builder-bg-success: #13301c;
  --builder-color-muted: #86977f;
  --builder-bg-muted: #1c241d;

  --builder-canvas-scrollbar-thumb: #35452f;
  --builder-canvas-scrollbar-thumb_hover: #5c7460;
  --builder-canvas-scrollbar-track: #131c15;

  --bricks-tooltip-bg: #e9f2e9;
  --bricks-tooltip-text: #0d140f;
}

`ocean.css`

/* Ocean — deep teal. */
[data-builder-mode=custom] {
  --builder-bg: #08181c;
  --builder-bg-2: #0d2126;
  --builder-bg-3: #122c33;
  --builder-bg-4: #1a3c45;
  --builder-bg-accent: #0c3b45;

  --builder-color: #e4f4f6;
  --builder-color-description: #85a8ad;
  --builder-color-accent: #2fd4d4;
  --builder-color-accent-inverse: #04191b;

  --builder-color-knob: #4e767c;
  --builder-border-color: #17323a;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7fc4ff;
  --builder-bg-class: #10293f;
  --builder-color-component: #bba6ff;
  --builder-bg-component: #221f42;
  --builder-color-info: #5fd0e8;
  --builder-bg-info: #0c333d;
  --builder-color-danger: #ff8b8b;
  --builder-bg-danger: #37181a;
  --builder-color-success: #5fe0b0;
  --builder-bg-success: #0c3329;
  --builder-color-muted: #7d989c;
  --builder-bg-muted: #142529;

  --builder-canvas-scrollbar-thumb: #2c4d55;
  --builder-canvas-scrollbar-thumb_hover: #4e767c;
  --builder-canvas-scrollbar-track: #0d2126;

  --bricks-tooltip-bg: #e4f4f6;
  --bricks-tooltip-text: #08181c;
}

`carbon.css`

/* Carbon — neutral grey dark, zero color cast. Best for judging client colors. */
[data-builder-mode=custom] {
  --builder-bg: #121212;
  --builder-bg-2: #1a1a1a;
  --builder-bg-3: #242424;
  --builder-bg-4: #303030;
  --builder-bg-accent: #16283b;

  --builder-color: #ededed;
  --builder-color-description: #9a9a9a;
  --builder-color-accent: #4c9aff;
  --builder-color-accent-inverse: #08131f;

  --builder-color-knob: #5c5c5c;
  --builder-border-color: #2b2b2b;
  --builder-placeholder-opacity: .38;

  --builder-color-class: #6cb6ff;
  --builder-bg-class: #16283b;
  --builder-color-component: #c0a0ff;
  --builder-bg-component: #26204a;
  --builder-color-info: #6cb6ff;
  --builder-bg-info: #16283b;
  --builder-color-danger: #ff8a80;
  --builder-bg-danger: #3a1c1a;
  --builder-color-success: #6bdf9a;
  --builder-bg-success: #14301f;
  --builder-color-muted: #8c8c8c;
  --builder-bg-muted: #202020;

  --builder-canvas-scrollbar-thumb: #3d3d3d;
  --builder-canvas-scrollbar-thumb_hover: #5c5c5c;
  --builder-canvas-scrollbar-track: #1a1a1a;

  --bricks-tooltip-bg: #ededed;
  --bricks-tooltip-text: #121212;
}

`oled.css`

/* OLED — true black, monochrome UI, colored status only. Max contrast. */
[data-builder-mode=custom] {
  --builder-bg: #000000;
  --builder-bg-2: #0a0a0a;
  --builder-bg-3: #141414;
  --builder-bg-4: #1f1f1f;
  --builder-bg-accent: #1c1c1c;

  --builder-color: #fafafa;
  --builder-color-description: #8f8f8f;
  --builder-color-accent: #f4f4f5;
  --builder-color-accent-inverse: #000000;

  --builder-color-knob: #3f3f46;
  --builder-border-color: #232326;
  --builder-placeholder-opacity: .35;

  --builder-color-class: #5eb0ff;
  --builder-bg-class: #0d1c2b;
  --builder-color-component: #b98cff;
  --builder-bg-component: #1a1230;
  --builder-color-info: #5eb0ff;
  --builder-bg-info: #0d1c2b;
  --builder-color-danger: #ff7a70;
  --builder-bg-danger: #2b0f0d;
  --builder-color-success: #4ede8f;
  --builder-bg-success: #082418;
  --builder-color-muted: #808080;
  --builder-bg-muted: #171717;

  --builder-canvas-scrollbar-thumb: #2e2e2e;
  --builder-canvas-scrollbar-thumb_hover: #565656;
  --builder-canvas-scrollbar-track: #0a0a0a;

  --bricks-tooltip-bg: #fafafa;
  --bricks-tooltip-text: #000000;
}

`rose.css`

/* Rose — dark plum with rose accents. */
[data-builder-mode=custom] {
  --builder-bg: #171014;
  --builder-bg-2: #1f151b;
  --builder-bg-3: #2b1d24;
  --builder-bg-4: #3a2731;
  --builder-bg-accent: #45142b;

  --builder-color: #f8ecf1;
  --builder-color-description: #bd94a4;
  --builder-color-accent: #ff6f9c;
  --builder-color-accent-inverse: #1b0a12;

  --builder-color-knob: #7d5b68;
  --builder-border-color: #33222b;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #86c5ef;
  --builder-bg-class: #172a38;
  --builder-color-component: #cfa6f7;
  --builder-bg-component: #2b1c3d;
  --builder-color-info: #79bce0;
  --builder-bg-info: #162a36;
  --builder-color-danger: #ff8f84;
  --builder-bg-danger: #3d1a19;
  --builder-color-success: #74dfa6;
  --builder-bg-success: #123024;
  --builder-color-muted: #a08792;
  --builder-bg-muted: #241a1f;

  --builder-canvas-scrollbar-thumb: #4b3340;
  --builder-canvas-scrollbar-thumb_hover: #7d5b68;
  --builder-canvas-scrollbar-track: #1f151b;

  --bricks-tooltip-bg: #f8ecf1;
  --bricks-tooltip-text: #17101
4;
}

⚠️ Fix in rose.css: the last value must be #17101 4 → #171014 (no line break). Corrected line:
  --bricks-tooltip-text: #171014;

`cyberpunk.css`

/* Cyberpunk — near-black with neon accents. High energy, high contrast. */
[data-builder-mode=custom] {
  --builder-bg: #0a0a0f;
  --builder-bg-2: #101019;
  --builder-bg-3: #171725;
  --builder-bg-4: #212134;
  --builder-bg-accent: #08333d;

  --builder-color: #eef0ff;
  --builder-color-description: #8b8bb0;
  --builder-color-accent: #00f0ff;
  --builder-color-accent-inverse: #001215;

  --builder-color-knob: #4a4a70;
  --builder-border-color: #22223a;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #00f0ff;
  --builder-bg-class: #08333d;
  --builder-color-component: #ff2bd6;
  --builder-bg-component: #350c2d;
  --builder-color-info: #33c9ff;
  --builder-bg-info: #0a2b3d;
  --builder-color-danger: #ff3860;
  --builder-bg-danger: #350d18;
  --builder-color-success: #39ff88;
  --builder-bg-success: #06341d;
  --builder-color-muted: #6b6b8a;
  --builder-bg-muted: #1a1a28;

  --builder-canvas-scrollbar-thumb: #2e2e4a;
  --builder-canvas-scrollbar-thumb_hover: #00f0ff;
  --builder-canvas-scrollbar-track: #101019;

  --bricks-tooltip-bg: #eef0ff;
  --bricks-tooltip-text: #0a0a0f;
}

`dracula.css`

/* Dracula — official Dracula palette. */
[data-builder-mode=custom] {
  --builder-bg: #21222c;
  --builder-bg-2: #282a36;
  --builder-bg-3: #343746;
  --builder-bg-4: #44475a;
  --builder-bg-accent: #3b2c52;

  --builder-color: #f8f8f2;
  --builder-color-description: #8b95c4;
  --builder-color-accent: #bd93f9;
  --builder-color-accent-inverse: #21222c;

  --builder-color-knob: #6272a4;
  --builder-border-color: #3b3d4d;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #8be9fd;
  --builder-bg-class: #1e3540;
  --builder-color-component: #ff79c6;
  --builder-bg-component: #40213a;
  --builder-color-info: #8be9fd;
  --builder-bg-info: #1e3540;
  --builder-color-danger: #ff5555;
  --builder-bg-danger: #3d1c22;
  --builder-color-success: #50fa7b;
  --builder-bg-success: #17371f;
  --builder-color-muted: #6272a4;
  --builder-bg-muted: #2b2e3c;

  --builder-canvas-scrollbar-thumb: #44475a;
  --builder-canvas-scrollbar-thumb_hover: #6272a4;
  --builder-canvas-scrollbar-track: #282a36;

  --bricks-tooltip-bg: #f8f8f2;
  --bricks-tooltip-text: #282a36;
}

`nord.css`

/* Nord — soft, low-saturation arctic palette. Easiest on the eyes long-term. */
[data-builder-mode=custom] {
  --builder-bg: #242933;
  --builder-bg-2: #2e3440;
  --builder-bg-3: #3b4252;
  --builder-bg-4: #434c5e;
  --builder-bg-accent: #2e4355;

  --builder-color: #eceff4;
  --builder-color-description: #9aa5b8;
  --builder-color-accent: #88c0d0;
  --builder-color-accent-inverse: #22272f;

  --builder-color-knob: #4c566a;
  --builder-border-color: #3b4252;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #81a1c1;
  --builder-bg-class: #2b3a4a;
  --builder-color-component: #b48ead;
  --builder-bg-component: #3a2f3d;
  --builder-color-info: #88c0d0;
  --builder-bg-info: #26414c;
  --builder-color-danger: #bf616a;
  --builder-bg-danger: #3b2429;
  --builder-color-success: #a3be8c;
  --builder-bg-success: #2c3a2b;
  --builder-color-muted: #7b88a1;
  --builder-bg-muted: #333a48;

  --builder-canvas-scrollbar-thumb: #434c5e;
  --builder-canvas-scrollbar-thumb_hover: #6b7794;
  --builder-canvas-scrollbar-track: #2e3440;

  --bricks-tooltip-bg: #eceff4;
  --bricks-tooltip-text: #2e3440;
}

`gruvbox.css`

/* Gruvbox Dark — retro warm-earth palette. */
[data-builder-mode=custom] {
  --builder-bg: #1d2021;
  --builder-bg-2: #282828;
  --builder-bg-3: #32302f;
  --builder-bg-4: #3c3836;
  --builder-bg-accent: #402d20;

  --builder-color: #ebdbb2;
  --builder-color-description: #a89984;
  --builder-color-accent: #fabd2f;
  --builder-color-accent-inverse: #1d2021;

  --builder-color-knob: #665c54;
  --builder-border-color: #3c3836;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #83a598;
  --builder-bg-class: #2b3a38;
  --builder-color-component: #d3869b;
  --builder-bg-component: #3d2a30;
  --builder-color-info: #8ec07c;
  --builder-bg-info: #2a3628;
  --builder-color-danger: #fb4934;
  --builder-bg-danger: #3f1f1b;
  --builder-color-success: #b8bb26;
  --builder-bg-success: #2f3313;
  --builder-color-muted: #928374;
  --builder-bg-muted: #32302f;

  --builder-canvas-scrollbar-thumb: #504945;
  --builder-canvas-scrollbar-thumb_hover: #7c6f64;
  --builder-canvas-scrollbar-track: #282828;

  --bricks-tooltip-bg: #ebdbb2;
  --bricks-tooltip-text: #1d2021;
}

`tokyo-night.css`

/* Tokyo Night — cool indigo dark. */
[data-builder-mode=custom] {
  --builder-bg: #16161e;
  --builder-bg-2: #1a1b26;
  --builder-bg-3: #24283b;
  --builder-bg-4: #2f334d;
  --builder-bg-accent: #202b45;

  --builder-color: #c0caf5;
  --builder-color-description: #8189b3;
  --builder-color-accent: #7aa2f7;
  --builder-color-accent-inverse: #12131c;

  --builder-color-knob: #414868;
  --builder-border-color: #2a2e42;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7dcfff;
  --builder-bg-class: #16303f;
  --builder-color-component: #bb9af7;
  --builder-bg-component: #2b2340;
  --builder-color-info: #7dcfff;
  --builder-bg-info: #16303f;
  --builder-color-danger: #f7768e;
  --builder-bg-danger: #3a1d27;
  --builder-color-success: #9ece6a;
  --builder-bg-success: #23331c;
  --builder-color-muted: #6b74a0;
  --builder-bg-muted: #232538;

  --builder-canvas-scrollbar-thumb: #343a5c;
  --builder-canvas-scrollbar-thumb_hover: #565f89;
  --builder-canvas-scrollbar-track: #1a1b26;

  --bricks-tooltip-bg: #c0caf5;
  --bricks-tooltip-text: #1a1b26;
}

`catppuccin-mocha.css`

/* Catppuccin Mocha — pastel dark, gentle contrast. */
[data-builder-mode=custom] {
  --builder-bg: #181825;
  --builder-bg-2: #1e1e2e;
  --builder-bg-3: #313244;
  --builder-bg-4: #45475a;
  --builder-bg-accent: #2c2440;

  --builder-color: #cdd6f4;
  --builder-color-description: #9399b2;
  --builder-color-accent: #cba6f7;
  --builder-color-accent-inverse: #1e1e2e;

  --builder-color-knob: #585b70;
  --builder-border-color: #313244;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #89b4fa;
  --builder-bg-class: #1e2a44;
  --builder-color-component: #f5c2e7;
  --builder-bg-component: #3b2438;
  --builder-color-info: #89dceb;
  --builder-bg-info: #17313a;
  --builder-color-danger: #f38ba8;
  --builder-bg-danger: #3a1f28;
  --builder-color-success: #a6e3a1;
  --builder-bg-success: #1f331e;
  --builder-color-muted: #7f849c;
  --builder-bg-muted: #292a3d;

  --builder-canvas-scrollbar-thumb: #45475a;
  --builder-canvas-scrollbar-thumb_hover: #6c7086;
  --builder-canvas-scrollbar-track: #1e1e2e;

  --bricks-tooltip-bg: #cdd6f4;
  --bricks-tooltip-text: #1e1e2e;
}

`solarized-dark.css`

/* Solarized Dark — classic low-contrast blue-green base. */
[data-builder-mode=custom] {
  --builder-bg: #001f27;
  --builder-bg-2: #002b36;
  --builder-bg-3: #073642;
  --builder-bg-4: #0f4552;
  --builder-bg-accent: #04384f;

  --builder-color: #eee8d5;
  --builder-color-description: #93a1a1;
  --builder-color-accent: #268bd2;
  --builder-color-accent-inverse: #ffffff;

  --builder-color-knob: #586e75;
  --builder-border-color: #0b3f4c;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #2aa198;
  --builder-bg-class: #04353a;
  --builder-color-component: #8f93d8;
  --builder-bg-component: #23253f;
  --builder-color-info: #268bd2;
  --builder-bg-info: #052f45;
  --builder-color-danger: #dc322f;
  --builder-bg-danger: #3a1413;
  --builder-color-success: #a5b622;
  --builder-bg-success: #2a3006;
  --builder-color-muted: #839496;
  --builder-bg-muted: #08303a;

  --builder-canvas-scrollbar-thumb: #0f4552;
  --builder-canvas-scrollbar-thumb_hover: #586e75;
  --builder-canvas-scrollbar-track: #002b36;

  --bricks-tooltip-bg: #eee8d5;
  --bricks-tooltip-text: #002b36;
}

Notes & tips for rolling your own

Surface ramp: --builder-bg is the darkest base, then -2, -3, -4 get progressively lighter (panels → inputs → hover/active). Keep 6–10% lightness steps or the UI flattens out.
Tooltips invert: on dark themes set --bricks-tooltip-bg to your light text color and --bricks-tooltip-text to your base bg — that's why every file above flips them relative to your light example.
--builder-color-accent-inverse is the text drawn on top of the accent. Bright/pastel accents (#fabd2f, #cba6f7, #00f0ff) need a dark inverse; deep saturated accents (#268bd2) need #fff.
Placeholder opacity: .33 reads fine on light backgrounds but disappears on dark — .38–.4 is the sweet spot.
Bricks caveat: in custom builder mode the Code element's editor switches to a light color scheme, regardless of how dark the rest of your theme is. Nothing in these variables changes that.
Want a variant? Take any file, keep the status/class/component pairs, and only shift the four --builder-bg* values plus --builder-color-accent — that's 90% of a theme's identity.

New Page

Recherche: Bester Browser für Web Development mit BricksBuilder

New Page

How to use

The set

warm.css

purple.css

midnight.css

forest.css

ocean.css

carbon.css

oled.css

rose.css

cyberpunk.css

dracula.css

nord.css

gruvbox.css

tokyo-night.css

catppuccin-mocha.css

solarized-dark.css

Notes & tips for rolling your own

`warm.css`

`purple.css`

`midnight.css`

`forest.css`

`ocean.css`

`carbon.css`

`oled.css`

`rose.css`

`cyberpunk.css`

`dracula.css`

`nord.css`

`gruvbox.css`

`tokyo-night.css`

`catppuccin-mocha.css`

`solarized-dark.css`