docs(ui): add dark theme for storybook docs

[cylewaitforit]

🔗 Linked issue

Related: #1964

🧭 Context

This adds the dark theme to the docs pages in the npmx storybook.

Note

Because there are not any component docs pages in the storybook currently, to view the canvas change with the theme selection, check the preview of #1964 where autodocs have been turned on for button stories.
https://698b88d5157d89f1f33a6c21-ieffcbxthf.chromatic.com/?path=/docs/components-button-buttonbase--docs

📚 Description

This allows the docs to be viewed with the default npmx theme and retains the theme switcher capabilities for the story canvas portion of the docs.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 18, 2026 10:18pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 10:18pm
npmx-lunaria	Ignored		Mar 18, 2026 10:18pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 782a4824-90ea-4680-9e5a-460a608d9c42

📥 Commits

Reviewing files that changed from the base of the PR and between d45844a and 0d6dd3d.

📒 Files selected for processing (2)

• .storybook/manager.ts
• .storybook/storybook-welcome.mdx

🚧 Files skipped from review as they are similar to previous changes (1)

• .storybook/storybook-welcome.mdx

---

📝 Walkthrough

Walkthrough

Replaces an in-file Storybook theme with a new module .storybook/theme.ts exporting npmxDark and wires it into manager and preview configs. Adds logic in manager.ts to hide the toolbar for stories tagged hide-toolbar when viewing docs. Adds .storybook/preview-head.html to set the docs-story canvas background via a CSS variable. Adds an MDX welcome page and updates the stories glob in main.ts to include .storybook/*.mdx. No exported API signatures were changed.

Possibly related PRs

• docs(ui): add storybook theme addon #1713: Modifies Storybook theming/configuration files (preview/main) and how themes are applied — strong overlap in theme/config changes.
• feat: add storybook #1270: Updates Storybook preview/main setup and theme wiring; shares code-level overlap with the preview and main configuration edits.

Suggested reviewers

• danielroe
• JReinhold

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the addition of dark theme to Storybook docs pages and referencing the related issue #1964.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

Migrating from UI to YAML configuration.

Use the @coderabbitai configuration command in a PR comment to get a dump of all your UI settings in YAML format. You can then edit this YAML file and upload it to the root of your repository to configure CodeRabbit programmatically.

[alexdln]

@cylewaitforit theme switcher doesn't work on the welcome page :(
Can you check please? It seems that for some reason data-theme attr is not applied there

In other parts lgtm

[cylewaitforit]

@cylewaitforit theme switcher doesn't work on the welcome page :( Can you check please? It seems that for some reason data-theme attr is not applied there

In other parts lgtm

@alexdln Good point, that could be pretty confusing. So definitely worth addressing.

The theme switcher switches the theme for the story previews not for the "story manager". So on the welcome doc page it had nothing to switch because it isn't displaying any stories.

While I'd love to get an npmxLight theme for the storybook manager as well, I haven't figured out yet how storybook can switch between those.

What I did figure out was a way to say with tags that a particular docs page doesn't need to show the toolbar. 0d6dd3d

Let me know if that seems like a viable solution for now.