Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bslib 0.6+ / Bootstrap 5.3+] .navbar-dark class ignored and navbar text is now the wrong colour #2387

Closed
tanho63 opened this issue Dec 21, 2023 · 2 comments · Fixed by #2388
Closed

[bslib 0.6+ / Bootstrap 5.3+] .navbar-dark class ignored and navbar text is now the wrong colour #2387

tanho63 opened this issue Dec 21, 2023 · 2 comments · Fixed by #2388
Labels
front end 🌷 General HTML, CSS, and JS issues

Comments

@tanho63
Copy link
Contributor

tanho63 commented Dec 21, 2023 •
edited
Loading

Hi! Noticed a regression recently when rebuilding a few of my pkgdown sites - the text for a dark navbar header has regressed to being black text against dark header 🙃

Screenshots

nflreadr
ffscrapr

Research

I did some digging and I believe the problem to be related to bslib upgrading to Bootstrap 5.3 as of bslib 0.6.0.
Bootstrap 5.3 docs suggest that .navbar-dark is now deprecated in favour of using a data attribute data-bs-theme="dark", which seems to facilitate client-side light/dark mode switching.

I believe the fix is to update the BS5 navbar template here:

pkgdown/inst/BS5/templates/navbar.html

Lines 1 to 3 in 13d8d62

{{#navbar}}
<nav class="navbar fixed-top navbar-{{{type}}} navbar-expand-lg bg-{{{bg}}}">
<div class="container">
to have the new data-bs-theme attribute instead as well (for backwards-compat with bslib <0.6), e.g.

 {{#navbar}} 
 <nav class="navbar fixed-top navbar-{{{type}}} navbar-expand-lg bg-{{{bg}}}" data-bs-theme="{{{type}}}"> 
   <div class="container">

which should then resolve the problem:

image

Looked briefly at the PR for dark/light mode switching #2338 and I don't believe the proposed fix interferes with it, so I'm also going to go ahead with submitting a PR for expediency (and so I can use that branch as the GHA pkgdown version for my pkgdown sites in the meantime 😀)

Session Info

From recent GHA run here

─ Session info ───────────────────────────────────────────────────────────────
   setting  value
   version  R version 4.3.2 (2023-10-31)
   os       Ubuntu 22.04.3 LTS
   system   x86_64, linux-gnu
   ui       X11
   language (EN)
   collate  C.UTF-8
   ctype    C.UTF-8
   tz       UTC
   date     2023-12-21
   pandoc   2.19.2 @ /usr/bin/pandoc
  
  ─ Packages ───────────────────────────────────────────────────────────────────
   package     * version  date (UTC) lib source
   askpass       1.2.0    2023-09-03 [1] RSPM
   assertthat    0.2.1    2019-03-21 [1] RSPM
   backports     1.4.1    2021-12-13 [1] RSPM
   base        * 4.3.2    2023-11-01 [3] local
   base64enc     0.1-3    2015-07-28 [1] RSPM
   boot          1.3-28.1 2022-11-22 [3] CRAN (R 4.3.2)
   brio          1.1.4    2023-12-10 [1] RSPM
   bslib         0.6.1    2023-11-28 [1] RSPM
   cachem        1.0.8    2023-05-01 [1] RSPM
   callr         3.7.3    2022-11-02 [1] RSPM
   checkmate     2.3.1    2023-12-04 [1] RSPM
   class         7.3-22   2023-05-03 [3] CRAN (R 4.3.2)
   cli           3.6.2    2023-12-11 [1] RSPM
   cluster       2.1.4    2022-08-22 [3] CRAN (R 4.3.2)
   codetools     0.2-19   2023-02-01 [3] CRAN (R 4.3.2)
   compiler      4.3.2    2023-11-01 [3] local
   covr          3.6.4    2023-11-09 [1] RSPM
   crayon        1.5.2    2022-09-29 [1] RSPM
   curl          5.2.0    2023-12-08 [1] RSPM
   data.table    1.14.10  2023-12-08 [1] RSPM
   datasets    * 4.3.2    2023-11-01 [3] local
   desc          1.4.3    2023-12-10 [1] RSPM
   diffobj       0.3.5    2021-10-05 [1] RSPM
   digest        0.6.33   2023-07-07 [1] RSPM
   downlit       0.4.3    2023-06-29 [1] RSPM
   dplyr         1.1.4    2023-11-17 [1] RSPM
   ellipsis      0.3.2    2021-04-29 [1] RSPM
   evaluate      0.23     2023-11-01 [1] RSPM
   fansi         1.0.6    2023-12-08 [1] RSPM
   fastmap       1.1.1    2023-02-24 [1] RSPM
   ffscrapr      1.4.8.16 2023-12-21 [1] local
   fontawesome   0.5.2    2023-08-19 [1] RSPM
   foreign       0.8-85   2023-09-09 [3] CRAN (R 4.3.2)
   fs            1.6.3    2023-07-20 [1] RSPM
   generics      0.1.3    2022-07-05 [1] RSPM
   gh            1.4.0    2023-02-22 [1] RSPM
   gitcreds      0.1.2    2022-09-08 [1] RSPM
   glue          1.6.2    2022-02-24 [1] RSPM
   graphics    * 4.3.2    2023-11-01 [3] local
   grDevices   * 4.3.2    2023-11-01 [3] local
   grid          4.3.2    2023-11-01 [3] local
   highr         0.10     2022-12-22 [1] RSPM
   htmltools     0.5.7    2023-11-03 [1] RSPM
   httptest      4.2.1    2023-06-12 [1] RSPM
   httr          1.4.7    2023-08-15 [1] RSPM
   httr2         1.0.0    2023-11-14 [1] RSPM
   ini           0.3.1    2018-05-20 [1] RSPM
   jquerylib     0.1.4    2021-04-26 [1] RSPM
   jsonlite      1.8.8    2023-12-04 [1] RSPM
   KernSmooth    2.23-22  2023-07-10 [3] CRAN (R 4.3.2)
   knitr         1.45     2023-10-30 [1] RSPM
   lattice       0.21-9   2023-10-01 [3] CRAN (R 4.3.2)
   lazyeval      0.2.2    2019-03-15 [1] RSPM
   lifecycle     1.0.4    2023-11-07 [1] RSPM
   lubridate     1.9.3    2023-09-27 [1] RSPM
   magrittr      2.0.3    2022-03-30 [1] RSPM
   MASS          7.3-60   2023-05-04 [3] CRAN (R 4.3.2)
   Matrix        1.6-1.1  2023-09-18 [3] CRAN (R 4.3.2)
   memoise       2.0.1    2021-11-26 [1] RSPM
   methods     * 4.3.2    2023-11-01 [3] local
   mgcv          1.9-0    2023-07-11 [3] CRAN (R 4.3.2)
   mime          0.12     2021-09-28 [1] RSPM
   nflreadr      1.4.0    2023-09-05 [1] RSPM
   nlme          3.1-163  2023-08-09 [3] CRAN (R 4.3.2)
   nnet          7.3-19   2023-05-03 [3] CRAN (R 4.3.2)
   openssl       2.1.1    2023-09-25 [1] RSPM
   pak           0.7.1    2023-12-12 [2] local
   parallel      4.3.2    2023-11-01 [3] local
   piggyback     0.1.5    2023-07-10 [1] RSPM
   pillar        1.9.0    2023-03-22 [1] RSPM
   pkgbuild      1.4.3    2023-12-10 [1] RSPM
   pkgconfig     2.0.3    2019-09-22 [1] RSPM
   pkgdown       2.0.7    2022-12-14 [1] any (@2.0.7)
   pkgload       1.3.3    2023-09-22 [1] RSPM
   praise        1.0.0    2015-08-11 [1] RSPM
   processx      3.8.3    2023-12-10 [1] RSPM
   ps            1.7.5    2023-04-18 [1] RSPM
   purrr         1.0.2    2023-08-10 [1] RSPM
   R6            2.5.1    2021-08-19 [1] RSPM
   ragg          1.2.7    2023-12-11 [1] RSPM
   rappdirs      0.3.3    2021-01-31 [1] RSPM
   ratelimitr    0.4.1    2018-10-07 [1] RSPM
   rematch2      2.1.2    2020-05-01 [1] RSPM
   rex           1.2.1    2021-11-26 [1] RSPM
   rlang         1.1.2    2023-11-04 [1] RSPM
   rmarkdown     2.25     2023-09-18 [1] RSPM
   rpart         4.1.21   2023-10-09 [3] CRAN (R 4.3.2)
   rprojroot     2.0.4    2023-11-05 [1] RSPM
   sass          0.4.8    2023-12-06 [1] RSPM
   sessioninfo   1.2.2    2021-12-06 [1] any (@1.2.2)
   spatial       7.3-17   2023-07-20 [3] CRAN (R 4.3.2)
   splines       4.3.2    2023-11-01 [3] local
   stats       * 4.3.2    2023-11-01 [3] local
   stats4        4.3.2    2023-11-01 [3] local
   stringi       1.8.3    2023-12-11 [1] RSPM
   stringr       1.5.1    2023-11-14 [1] RSPM
   survival      3.5-7    2023-08-14 [3] CRAN (R 4.3.2)
   sys           3.4.2    2023-05-23 [1] RSPM
   systemfonts   1.0.5    2023-10-09 [1] RSPM
   tcltk         4.3.2    2023-11-01 [3] local
   testthat      3.2.1    2023-12-02 [1] RSPM
   textshaping   0.3.7    2023-10-09 [1] RSPM
   tibble        3.2.1    2023-03-20 [1] RSPM
   tidyr         1.3.0    2023-01-24 [1] RSPM
   tidyselect    1.2.0    2022-10-10 [1] RSPM
   timechange    0.2.0    2023-01-11 [1] RSPM
   tinytex       0.49     2023-11-22 [1] RSPM
   tools         4.3.2    2023-11-01 [3] local
   utf8          1.2.4    2023-10-22 [1] RSPM
   utils       * 4.3.2    2023-11-01 [3] local
   vctrs         0.6.5    2023-12-01 [1] RSPM
   waldo         0.5.2    2023-11-02 [1] RSPM
   whisker       0.4.1    2022-12-05 [1] RSPM
   withr         2.5.2    2023-10-30 [1] RSPM
   xfun          0.41     2023-11-01 [1] RSPM
   xml2          1.3.6    2023-12-04 [1] RSPM
   yaml          2.3.8    2023-12-11 [1] RSPM
  
   [1] /home/runner/work/_temp/Library
   [2] /opt/R/4.3.2/lib/R/site-library
   [3] /opt/R/4.3.2/lib/R/library
@tanho63 tanho63 mentioned this issue Dec 21, 2023
Merged
@tanho63
Copy link
Contributor Author

tanho63 commented Dec 21, 2023

Confirming that the PR branch does solve the issue, e.g. https://ffscrapr.ffverse.com/ now shows up with correct text colours while https://ffsimulator.ffverse.com does not

@tanho63 tanho63 changed the title [bslib 0.6+ / Bootstrap 5.3+] .navbar-dark class ignored and navbar brand is now the wrong colour [bslib 0.6+ / Bootstrap 5.3+] .navbar-dark class ignored and navbar text is now the wrong colour Dec 21, 2023
@jayhesselberth jayhesselberth added the front end 🌷 General HTML, CSS, and JS issues label Dec 21, 2023
peterdesmet added a commit to inbo/movepub that referenced this issue Dec 21, 2023
@peterdesmet
Revert "Fix unreadable text in dark navbar"
be85f95 
Known issue, and adding `type: light` does not help. Will have to wait until pkgdown has fixed r-lib/pkgdown#2387
@jadeynryan jadeynryan mentioned this issue Jan 30, 2024
Closed
@tanho63
Copy link
Contributor Author

tanho63 commented Feb 1, 2024

@jayhesselberth is there anything else I can do to assist with getting this PR through?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
front end 🌷 General HTML, CSS, and JS issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix BS5 navbar template to get navbar.type: dark to work with bslib 0.6+
2 participants
@jayhesselberth @tanho63