feat: Dark mode styling for file block wrapper component (BLO-866)

[matthewlipski]

Summary

This PR adds dark mode styling for the "Add file" button in the file block wrapper element.

Closes#912

Rationale

The light mode styling looks a little out of palce in dark mode.

Changes

See above.

Impact

N/A

Testing

N/A

Screenshots/Video

N/A

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

• Style
  • Enhanced dark theme styling for file-block UI controls with improved visibility and contrast
  • Updated dark mode hover states for file buttons, file names, and file icons for better visual feedback

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Apr 28, 2026 0:21am
blocknote-website	Ready	Preview	Apr 28, 2026 0:21am

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (3)

• tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-chromium-linux.png is excluded by !**/*.png
• tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-firefox-linux.png is excluded by !**/*.png
• tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-webkit-linux.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f05e1197-734d-4bd4-8710-e7064e7b386b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds dark-theme styling to file-block UI controls in Block.css, including darker backgrounds, dimmed text colors, and dark-mode hover state overrides for add-file button and file icon interactions.

Changes

Cohort / File(s)	Summary
Dark Mode File Block Styling packages/core/src/editor/Block.css	Introduces dark-theme visual overrides for [data-file-block] .bn-add-file-button, including background and text color adjustments under .dark class, plus dark-mode hover state changes for buttons, file names, and icons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🌙 Dark shadows dance on buttons bright,
File blocks now dressed for the night,
Hover states shimmer, soft and deep,
In darkness, these UI gems will keep! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title 'feat: Dark mode styling for file block wrapper component (BLO-866)' accurately reflects the main change—adding dark theme styling for the file block component.
Description check	✅ Passed	PR description follows template structure with all major sections present; Summary clearly describes dark mode styling addition for Add file button, Rationale explains visual inconsistency, and all checklist items are marked complete.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch media-block-dark-mode

---

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.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2680

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2680

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2680

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2680

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2680

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2680

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2680

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2680

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2680

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2680

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2680

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2680

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2680

commit: baa5088

[nperez0111]

Looks good @matthewlipski