Default border/box-shadow on cards is barely visible in dark mode
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 569
- Forks
- 72
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 5
Description
Card borders (or maybe box shadows) are barely visible in dark mode. In light mode, the border/shadow is easy for me to see.
Examples:
# light mode
bslib::page_fillable("data-bs-theme" = "light", bslib::card("Card body"))
# dark mode
bslib::page_fillable("data-bs-theme" = "dark", bslib::card("Card body"))
For the dark-mode card, if I put my face right up to my screen I can see there's a border that's slightly darker than the background. I found an old issue though that has a screenshot of a dark-mode card, and there the border is lighter than the background and easier for me to see:
https://github.com/rstudio/bslib/issues/771
Could the default border/shadow for dark-mode cards be changed to be lighter than the background, as in the above screenshot? I'd prefer that it be even lighter than it is in that screenshot, but everybody's eyes and contrast sensitivity are different and I'm not a UI expert.
Session Info
─ Session info ───────────────────────────────────────────────────────── setting value version R version 4.5.1 (2025-06-13 ucrt) os Windows 11 x64 (build 22631) system x86_64, mingw32 ui RStudio language (EN) collate English_United States.utf8 ctype English_United States.utf8 tz America/Los_Angeles date 2025-09-24 rstudio 2025.05.1+513 Mariposa Orchid (desktop) pandoc NA quarto ERROR: Unknown command "TMPDIR=C:/Users/DMuenz1/AppData/Local/Temp/Rtmp0MqTxg/file1f30336c10ac". Did you mean command "uninstall"? @ C:\\PROGRA~1\\RStudio\\RESOUR~1\\app\\bin\\quarto\\bin\\quarto.exe
─ Packages ─────────────────────────────────────────────────────────────
package * version date (UTC) lib source
bslib 0.9.0.9000 2025-09-24 [1] Github (rstudio/bslib@220fa5d)
cachem 1.1.0 2024-05-16 [1] CRAN (R 4.5.1)
cli 3.6.3 2024-06-21 [1] CRAN (R 4.4.1)
devtools 2.4.5 2022-10-11 [1] CRAN (R 4.5.1)
digest 0.6.37 2024-08-19 [1] CRAN (R 4.5.1)
ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.5.1)
evaluate 1.0.4 2025-06-18 [1] CRAN (R 4.5.1)
fastmap 1.2.0 2024-05-15 [1] CRAN (R 4.5.1)
fs 1.6.6 2025-04-12 [1] CRAN (R 4.5.1)
glue 1.8.0 2024-09-30 [1] CRAN (R 4.5.1)
htmltools 0.5.8.1 2024-04-04 [1] CRAN (R 4.5.1)
htmlwidgets 1.6.4 2023-12-06 [1] CRAN (R 4.5.1)
httpuv 1.6.16 2025-04-16 [1] CRAN (R 4.5.1)
jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.5.1)
jsonlite 2.0.0 2025-03-27 [1] CRAN (R 4.5.1)
knitr 1.50 2025-03-16 [1] CRAN (R 4.5.1)
later 1.4.2 2025-04-08 [1] CRAN (R 4.5.1)
lifecycle 1.0.4 2023-11-07 [1] CRAN (R 4.5.1)
magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.5.1)
memoise 2.0.1 2021-11-26 [1] CRAN (R 4.5.1)
mime 0.13 2025-03-17 [1] CRAN (R 4.5.0)
miniUI 0.1.2 2025-04-17 [1] CRAN (R 4.5.1)
pillar 1.11.0 2025-07-04 [1] CRAN (R 4.5.1)
pkgbuild 1.4.8 2025-05-26 [1] CRAN (R 4.5.1)
pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.5.1)
pkgload 1.4.0 2024-06-28 [1] CRAN (R 4.5.1)
profvis 0.4.0 2024-09-20 [1] CRAN (R 4.5.1)
promises 1.3.3 2025-05-29 [1] CRAN (R 4.5.1)
purrr 1.1.0 2025-07-10 [1] CRAN (R 4.5.1)
R6 2.6.1 2025-02-15 [1] CRAN (R 4.5.1)
Rcpp 1.1.0 2025-07-02 [1] CRAN (R 4.5.1)
remotes 2.5.0 2024-03-17 [1] CRAN (R 4.5.1)
rlang 1.1.6 2025-04-11 [1] CRAN (R 4.5.1)
rstudioapi 0.17.1 2024-10-22 [1] CRAN (R 4.5.1)
sass 0.4.10 2025-04-11 [1] CRAN (R 4.5.1)
sessioninfo 1.2.3 2025-02-05 [1] CRAN (R 4.5.1)
shiny 1.11.1 2025-07-03 [1] CRAN (R 4.5.1)
tibble 3.3.0 2025-06-08 [1] CRAN (R 4.5.1)
urlchecker 1.0.1 2021-11-30 [1] CRAN (R 4.5.1)
usethis 3.1.0 2024-11-26 [1] CRAN (R 4.5.1)
vctrs 0.6.5 2023-12-01 [1] CRAN (R 4.5.1)
xfun 0.52 2025-04-02 [1] CRAN (R 4.5.1)
xtable 1.8-4 2019-04-21 [1] CRAN (R 4.5.1)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the light- and dark-mode examples using bslib::page_fillable() and bslib::card(), then inspect the Bootstrap/SCSS card styling used by bslib. Identify the default dark-mode border or box-shadow value and adjust it for clearer contrast while preserving light-mode behavior; verify the result against the screenshots and the earlier issue 771.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, r, scss
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100