Skip to content

Add btn-theme default style, gray active item, menu shadow, and dark-mode btn-dark border - #19

Merged
MikeAlhayek merged 4 commits into
mainfrom
ma/btn-theme-gray-active-shadow
Oct 4, 2026
Merged

MikeAlhayek merged 4 commits into
mainfrom
ma/btn-theme-gray-active-shadow

Conversation

@MikeAlhayek

Copy link
Copy Markdown
Member

Summary

Make the default look match a stock Bootstrap 5.3 select in light and dark modes.

  • btn-theme style (new, now the default style). Renders light in light mode and dark in dark mode by following Bootstrap's CSS variables. This is the themed behavior the default btn-light had before.
  • btn-light is stock again. It stays light in dark mode. Use btn-theme (or omit style) to follow the color mode.
  • btn-dark border in dark mode. The toggle previously blended into the page because its border matched its background; it now uses --bs-border-color, like a native dark-mode input.
  • Gray active item. The selected item is highlighted with --bs-secondary-bg (hover --bs-tertiary-bg) instead of the primary blue. Override --bs-dropdown-link-active-bg / --bs-dropdown-link-active-color on .bootstrap-select .dropdown-menu to restore the primary highlight.
  • Menu drop shadow. The open menu uses --bs-box-shadow.

The Select all / Deselect all buttons follow btn-theme as well.

Breaking-ish

Anyone relying on data-style="btn-light" to follow dark mode should switch to btn-theme (or drop data-style). Default users see no change except the gray highlight and shadow.

Test plan

  • New tests/e2e/theme-styles.spec.js covers the default style, btn-theme in both modes, btn-light in dark mode, btn-dark border, shadow and the gray active item.
  • Existing e2e suite passes (31 tests, run against installed Chrome).
  • npm run lint clean.
  • Visually checked light and dark.

Docs (options.mdx, examples.mdx) and the changelog are updated.

🤖 Generated with Claude Code

@MikeAlhayek
MikeAlhayek merged commit 9f17f2f into main Oct 4, 2026
4 checks passed
@MikeAlhayek
MikeAlhayek deleted the ma/btn-theme-gray-active-shadow branch October 4, 2026 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant