search

thomaspark / bootswatch

Themes for Bootstrap
https://bootswatch.com
MIT License
14.54k stars 3.67k forks source link

Hover color of navbar is invisible in dark mode #1257

Open itchyny opened 1 year ago

itchyny commented 1 year ago

When the data-bs-theme=dark attribute is added to the html tag, the hover color of navbar remains dark color and the links are invisible. This is likely caused by .navbar[data-bs-theme=dark], where it should be [data-bs-theme=dark] .navbar.

thomaspark commented 1 year ago

Hi @itchyny, can you tell us which theme has this problem and share a screenshot if possible?

itchyny commented 1 year ago

I'm using cosmo theme.

Screenshot 2023-06-14 at 23 14 21 Screenshot 2023-06-14 at 23 20 26
The source code ```html Title

This is the main content.

```
thomaspark commented 1 year ago

I recommend adding a class like .bg-body-tertiary or the attribute data-bs-theme="dark" to the navbar itself as described here in the docs: https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes

itchyny commented 1 year ago

As shown above, color mode styles are controlled by the data-bs-theme attribute. This attribute can be applied to the element, or to any other element or Bootstrap component. If applied to the <html> element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element. https://getbootstrap.com/docs/5.3/customize/color-modes/

I think the attribute of html element should be respected as well. What do you reccomend to implement theme toggle switch?

itchyny commented 1 year ago

Another reference of Bootstrap support for color modes: https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/customize/color-modes.md.

itchyny commented 1 year ago

I noticed the issue is caused not by the selector, but by the hard corded color here. In the Bootstrap upstream, it is rgba(var(--bs-emphasis-color-rgb), 0.8) so it's responsive (ref).

itchyny commented 1 year ago

This is caused by the upstream bug so explained here https://github.com/twbs/bootstrap/pull/38807#issuecomment-1615801140.