bb Monokai

A dark Monokai palette for bb, terminal included.

bb draws itself from CSS custom properties, so a theme is just a stylesheet. This plugin adds one: bb Monokai, a dark palette built on a five-step grounds ramp, a single off-white text ladder, and one accent that always means interactive.

It reaches past the app chrome: the terminal, the diff viewer, the file tree's git-status column, inline code, and the syntax tokens inside diffs and file previews all draw from the same palette rather than keeping bb's defaults.

Install

From the marketplace — add this repository once, then install by name:

bb marketplace add git:github.com/smsunarto/bb-plugins
bb plugin install monokai
bb theme set plugin:monokai:bb-monokai

bb resolves the newest monokai/vX.Y.Z tag and builds the plugin from it against your bb, so the bundle always matches the host it runs on. bb plugin update monokai follows the same release line. If another marketplace you have added publishes a monokai, spell it monokai@smsunarto.

From source — clone the repo and install the plugin as a local path source. This is also how you install a change that is not released yet:

git clone https://github.com/smsunarto/bb-plugins.git
cd bb-plugins
bun install
bun run --filter '@smsunarto/bb-plugin-monokai' build
bb plugin install ./plugins/monokai
bb theme set plugin:monokai:bb-monokai

The source path needs Bun and the bb CLI. It installs the plugin as a local path source, so bb reads the files in place: edit, rebuild, reload, with no reinstall.

Usage

Installing the plugin only adds the palette. The bb theme set line above is what selects it. You can also switch in bb under Settings → Appearance → Palette.

Disabling or removing the plugin returns bb to the default palette.

Choose Inter (Default) or SF Pro under Settings → bb Monokai → UI font. While bb Monokai is the selected palette, the choice applies to the full interface at desktop and mobile widths. Code, diff bodies, and the terminal keep the Berkeley Mono stack. Git diff and smart-embed headers, including their file paths, use the selected UI font. The terminal uses BerkeleyMono Nerd Font Mono at size 13 with 1.4 line height and a #181818 background, matching the Ghostty cursor-monokai setup. A plugin content script applies these settings to existing and new xterm terminals, including the WebGL renderer, without a BB core update. It restores the previous typography when Monokai is deselected or unloaded. Each time it changes or restores a terminal's typography, it has bb resend the terminal size to the shell, so full-screen programs reflow without a pane resize. The adapter uses guarded React-ref and xterm-addon discovery. If a future BB version changes those private attachments, it leaves the terminal untouched.

The in-app notification center now uses the same Monokai surfaces and states as the rest of bb, including its selected row, controls, dividers, and desktop card. On desktop, transient toasts also use a compact Codex-inspired layout at the top center of the focused conversation: rounded cards, a subtle border, quiet icons, and an inline dismiss button. Compact layouts keep bb's native drawer and toast geometry. Undo, links, dismissal, and stacking keep bb's existing behavior. This is a theme-only CSS override. Switching palettes restores bb's placement. Desktop browsers without CSS anchor positioning center toasts over the viewport instead. Native browser and operating-system banners from bb's push-notifications plugin are system-owned and cannot be restyled by a bb theme.

Requirements

• bb 0.42+. The live UI-font setting uses the app overlay added in bb 0.42.
• bb set to dark appearance. The palette only restyles .dark; light mode keeps bb's defaults.
• Optional: Berkeley Mono. It is not bundled. Install it yourself and the type stack picks it up. Without it, code falls back to ui-monospace, Menlo, then monospace. The terminal uses its own stack: BerkeleyMono Nerd Font Mono, then Berkeley Mono, then monospace.
• Optional: SF Pro. bb uses the Apple system font on Apple platforms. Other platforms need SF Pro installed or use the generic sans-serif fallback.

The palette

| Role | Value | Where it lands | | ------------------- | ---------------- | ----------------------------------------- | | Chrome / content | #181818 | sidebars, terminal, code, diffs | | Conversation | #151515 | main agent conversation | | Elevated surface | #1D1D1D opaque | popovers and tooltips | | Subtle layer | ink at 4% | cards, inputs, dropdown triggers | | Control layer | ink at 6% | user messages, composer, headers, actions | | Hover layer | ink at 8% | controls, rows, inline code | | Selected layer | ink at 14% | primary actions and selected rows | | Active layer | ink at 20% | pressed controls and primary hover | | Control edge | ink at 12% | fields, buttons, pane boundaries | | Ink | #E3E3DD | text and neutral layer source | | Accent | #88C0D0 | links, mentions, search matches | | Success / added | #3FA266 | feedback | | Warning / attention | #F1B467 | feedback | | Danger / removed | #E34671 | feedback | | Merged | #B267E6 | feedback |

In-flow components composite the same alpha layer over their actual parent. A field in a card therefore remains distinct without a card-specific color. Borders clip the fill to the padding box, so two alpha layers do not stack under the edge. Menus, code, terminals, and explicit solid fallbacks remain opaque where they must hide content beneath them.

Cursor measurements and token mapping explain the reference and how to rerun the browser composition audit.

One meaning per hue. A color never does two jobs. Text is one white at four alphas (100 / 74 / 55 / 30 %), each annotated inline with its measured contrast ratio against the ground it sits on.

What it restyles

| Surface | Notes | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | App chrome | panes, panels, sidebar, menus, buttons, mention pills, focus rings | | Conversation links | medium-weight accent text with a globe glyph (an envelope for mail) and an alpha-derived rounded hover surface | | Agent replies | Fluid prose (14px at 1512px, ~15px at 2560px) in the Codex app's markdown geometry, fenced blocks with a labeled header, task checkboxes, full-strength activity rows | | Terminal | all 16 ANSI colors plus 16 companion foreground tokens, one per ANSI background | | Diff viewer | addition / deletion / modified colors, gutter number grounds and role-colored numbers | | Diff headers | Diffs.com-style file headers with change-kind icons in the side panel. Open in editor is hidden there | | Syntax tokens | the Cursor Monokai TextMate layer, in diffs and file previews | | Monaco editor | the same code theme, plus JavaScript and TypeScript tokens for declarations, calls, types, and parameters | | File tree | the git-status column — added, untracked, renamed, modified, deleted, ignored | | Inline code | soft yellow #EED996 on the 8% hover layer. Fenced blocks use the sugar-high token set on #181818 | | Composer stop button | repainted to the danger hue | | Notifications | in-app history center and desktop transient toasts |

Syntax tokens

Token colors are not a CSS surface — Shiki writes an inline style on every span inside a shadow root. bb 0.38 answers that with a manifest field that picks the Shiki theme, so the plugin ships one: themes/bb-monokai-code.json, the same TextMate layer as the Cursor Monokai editor theme. One hue per kind — pink machinery, cyan structure, green callables, yellow literals, purple constants, orange parameters, gray commentary, white for everything else.

Only the dark side is declared, so light mode keeps bb's pierre-light. A diff has no language server behind it, so this is the TextMate layer alone: tokens an editor colors from semantic tokens (a plain parameter, a declaration in bold) stay at their TextMate color here.

Troubleshooting

The app still looks the same. The palette has to be selected. Run bb theme set plugin:monokai:bb-monokai, or pick bb Monokai under Settings → Appearance → Palette.

Only part of the app changed. Check that bb is in dark appearance. In light mode the palette contributes fonts only.

Some surfaces stay off-palette. CSS cannot reach them:

• File-type icons. Their 13 source swatches are declared on :host, so all 48 language icons collapse to a single color.
• Terminal cursor blink and selection alpha remain controlled by the host.
• Mermaid diagrams keep a hardcoded Inter font. Colors follow the palette on the next render.
• The favicon tint comes from a fixed list, with no CSS involved.
• Built-in bb plugin panels (tasks, docs, github, workflows, memory) ship their own bundles with raw scale colors.
• The desktop find bar (Cmd+F). Electron draws it outside the page.

Develop from source

Install from source as shown under Install. The shipped CSS is generated from the TypeScript palette and a selector-focused template:

$EDITOR plugins/monokai/scripts/generate-theme.ts
$EDITOR plugins/monokai/scripts/bb-monokai.template.css
bun run --filter '@smsunarto/bb-plugin-monokai' generate:theme
bun run --filter '@smsunarto/bb-plugin-monokai' check
bb plugin reload monokai

The palette in generate-theme.ts is the only color registry: every surface takes a role name, never a hex. themes/bb-monokai.css and themes/bb-monokai-code.json are generated; do not edit them. The syntax layer's scope map lives in scripts/code-theme-rules.json, also in role names.

The generator rejects stale output, unknown roles, off-contract colors, missing tokens, wrong role mappings, illegible pairs, and a chrome-only role on a syntax token. The plugin build runs that check automatically.

Re-apply with bb theme set plugin:monokai:bb-monokai if the palette does not refresh.

To review the palette contract outside bb, start its local Storybook:

bun run --filter '@smsunarto/bb-plugin-monokai' storybook

The catalog imports the generated theme stylesheet, so regeneration updates the stories without a second token source. It previews the palette and component states; live bb remains the integration check for shadow-DOM surfaces and host styles.