fix(docs): respect dark theme in badge style dropdown

[BittuBarnwal7479]

🔗 Linked issue

#2885

🧭 Context

📚 Description

The Badge Style dropdown on the Badges page does not fully respect the active dark theme. When opened in dark mode, the dropdown menu appears with light styling, causing inconsistent appearance and reduced readability. The dropdown should match the active theme for a consistent user experience.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jul 4, 2026 4:05am
npmx.dev	Ready	Preview, Comment	Jul 4, 2026 4:05am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Jul 4, 2026 4:05am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 85460847-160a-45c2-b68c-0fecdf188256

📥 Commits

Reviewing files that changed from the base of the PR and between 604dc92 and be3fd49.

📒 Files selected for processing (1)

• docs/app/components/BadgeGeneratorParameters.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Improved dark mode appearance of Badge Generator style options to enhance visibility and consistency when using dark mode.

Walkthrough

In BadgeGeneratorParameters.vue, the v-for-rendered <option> elements inside the "Badge Style" <select> now include a class="dark:bg-gray-900" attribute for dark-mode background styling. The surrounding template block was reformatted without altering control flow or bindings.

Changes

Badge Style Dropdown Dark Mode

Layer / File(s)	Summary
Dark mode class on Badge Style options docs/app/components/BadgeGeneratorParameters.vue	Each <option> generated from the styles array now carries class="dark:bg-gray-900". Template block whitespace was also reformatted with no logic changes.

Possibly Related Issues

• Badge Style dropdown does not respect dark theme #2885: This PR directly addresses the dark theme styling issue reported for the Badge Style dropdown by adding class="dark:bg-gray-900" to the same <option> elements in BadgeGeneratorParameters.vue.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding dark theme support to the badge style dropdown component.
Description check	✅ Passed	The description is directly related to the changeset, explaining the dark theme issue in the Badge Style dropdown and why the fix is needed.
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.}

[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!

[BittuBarnwal7479]

@gameroman pls review and merge this PR.

[ghostdevv]

I'd like to use appearance: dark (or light) which should be set depending on what theme is being used. The Docus docs have this, but I couldn't find where it was comign from. It doesn't look like it's something they set, but probably should - so we can fix this upstream I think

[BittuBarnwal7479]

I'd like to use appearance: dark (or light) which should be set depending on what theme is being used. The Docus docs have this, but I couldn't find where it was comign from. It doesn't look like it's something they set, but probably should - so we can fix this upstream I think

yes, i had already pushed the fix for this issue in PR #2911 . Since that PR has now been merged, this is already resolved and we can close this PR.

thanks for pointing it out!

[ghostdevv]

I'd like to use appearance: dark (or light) which should be set depending on what theme is being used. The Docus docs have this, but I couldn't find where it was comign from. It doesn't look like it's something they set, but probably should - so we can fix this upstream I think

yes, i had already pushed the fix for this issue in PR #2911 . Since that PR has now been merged, this is already resolved and we can close this PR.

thanks for pointing it out!

ah ok! be careful of accidentally doing that in the future 😅