search

thomaspark / bootswatch

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

nav link color is invisible in dark mode in theme zephyr #1269

Open bkilinc opened 1 year ago

bkilinc commented 1 year ago

In theme zephyr, nav link colors are also dark. This is because CSS variables are not used. Currently nav link color is set as follows;

// Navs
$nav-link-color:                    $body-color !default;
$nav-link-hover-color:              $body-color !default;

it is behaving correct when these lines are changed with

// Navs
$nav-link-color:                    var(--bs-body-color) !default;
$nav-link-hover-color:              var(--bs-body-color) !default;

also a prefix variable should be used. Lumen theme has implemented this correctly.

morph theme has similar problem.

sushantdhiman commented 1 year ago

I am also facing this issue. It seems like

  1. .nav-link color is set to --bs-nav-link-color
  2. --bs-nav-link-color == --bs-navbar-color
  3. With new bootstrap release --bs-navbar-color changed from #fff to rgba(255, 255, 255, 0.55), causing this issue

Not sure if this should be fixed as OP is suggesting, as .nav-link class is used in other components as well like Tabs. I have fixed this issue in my case with following css

/* https://github.com/thomaspark/bootswatch/issues/1269 */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:visited {
  color: var(--bs-white);
}