Navbar is adding light class by default
Author: alexandernstCreated Jun 28, 2024Updated Sep 9, 2025
Labelsbug
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the bug
The <Navbar> component ( https://github.com/react-bootstrap/react-bootstrap/blob/71c332b3ac5f3803373943b422be3e9fa1382f05/src/Navbar.tsx#L142 ) is adding the light class by default. Imho this shouldn't work that way because that is forcing light mode on the component, despite some other color mode (dark for example) being used at the <html> level.
Expected behavior
The navbar component shouldn't be forcing any default color modes, just like the rest of the components (for example, the Pagination).
To Reproduce
- Use
<Navbar>
Reproducible Example
https://codesandbox.io/s/pensive-pike-zy5dhl?file=/src/App.js
Screenshots
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of React-Bootstrap are you using?
2.10.3
What version of Bootstrap are you using?
5.3.3
Additional context
No response
Source: react-bootstrap/react-bootstrap