feat(theme): add Dracula dark theme

[Ayce45]

Description

This PR adds the official Dracula palette as a built-in dark theme for Bruno. Users can activate it from the theme dropdown in the status bar or from Preferences → Display → Theme.

The new theme follows the same structure as the existing nord and catppuccin-* themes:

• packages/bruno-app/src/themes/dark/dracula.js — theme tokens. Validated against ossSchema (all 39 required top-level keys present, identical shape to nord.js).
• packages/bruno-app/src/themes/index.js — import + themeRegistry entry with mode: 'dark' and display name Dracula.

Palette (official Dracula spec, https://spec.draculatheme.com):

Role	Hex
Background	#282a36
Current Line	#44475a
Foreground	#f8f8f2
Comment	#6272a4
Cyan	#8be9fd
Green	#50fa7b
Orange	#ffb86c
Pink	#ff79c6
Purple	#bd93f9
Red	#ff5555
Yellow	#f1fa8c

HTTP method colors follow the Dracula spec for syntax highlighting: GET → Green, POST → Pink, PUT → Yellow, DELETE → Red, PATCH → Orange, OPTIONS → Cyan, HEAD → Purple.

Screenshots

Theme selector in Preferences → Display → Theme (Dracula selected, purple focus border):

A request tab against https://draculatheme.com rendered with the new theme — sidebar, tabs, request URL bar, response pane and syntax highlighting all pick up the Dracula palette:

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Summary by CodeRabbit

• New Features
  • Added Dracula dark theme option with complete styling across the application interface, including editor, sidebar, modals, tables, buttons, and notification elements.

[coderabbitai]

Walkthrough

This PR introduces a new Dracula dark theme module for the Bruno app, complete with a comprehensive color palette, UI component styling across multiple domains (inputs, sidebars, tabs, tables, modals, buttons, console), and CodeMirror token mappings. The theme is then registered in the application's theme registry.

Changes

Cohort / File(s)	Summary
Dracula Theme Definition packages/bruno-app/src/themes/dark/dracula.js	New 663-line theme module with official Dracula palette, semantic color aliases, comprehensive UI styling across branding, typography, shadows, borders, surfaces, inputs, sidebars, tabs, lists, tables, modals, buttons, console, and CodeMirror token mappings with rgba alpha variants.
Theme Registry Update packages/bruno-app/src/themes/index.js	Imported and registered the new Dracula theme in the themes map and themeRegistry export with metadata (id: 'dracula', name: 'Dracula', mode: 'dark').

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• PR #6633: Adds CodeMirror styling that consumes the theme-driven codemirror color properties defined in this Dracula theme's CODEMIRROR_TOKENS map.

Suggested labels

size/M

Suggested reviewers

• bijin-bruno
• lohit-bruno

Poem

🦇 Darkness descends with elegant grace,
Dracula's palette finds its rightful place,
Colors semantic, tokens precise,
A shadowy theme both coded and nice! 🌙

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(theme): add Dracula dark theme' is clear, concise, and directly summarizes the main change—adding a new Dracula dark theme to the application.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/bruno-app/src/themes/dark/dracula.js (1)

319-324: Nit: empty string for button.close.hoverBorder.

hoverBorder: '' will serialize to an empty CSS value if used in a template literal like border: ${theme.button.close.hoverBorder};. If peer themes use 'transparent' here, align for consistency; otherwise ignore.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/bruno-app/src/themes/dark/dracula.js` around lines 319 - 324, The
hoverBorder field for the close button is set to an empty string which can
serialize to an invalid/empty CSS value; update button.close.hoverBorder in the
dracula theme to use a proper value (e.g., 'transparent') to match other themes
and avoid empty CSS when used like border: ${theme.button.close.hoverBorder};.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/bruno-app/src/themes/dark/dracula.js`:
- Around line 319-324: The hoverBorder field for the close button is set to an
empty string which can serialize to an invalid/empty CSS value; update
button.close.hoverBorder in the dracula theme to use a proper value (e.g.,
'transparent') to match other themes and avoid empty CSS when used like border:
${theme.button.close.hoverBorder};.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c13bdd2b-49aa-438d-8245-2dcf5732cf9b

📥 Commits

Reviewing files that changed from the base of the PR and between c4dc0bc and 656d8ea.

📒 Files selected for processing (2)

• packages/bruno-app/src/themes/dark/dracula.js
• packages/bruno-app/src/themes/index.js