rstudio / rstudio/bslib

Default border/box-shadow on cards is barely visible in dark mode

Open
#1,232 0 comments 0 reactions 0 assignees View on GitHub

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"))
light-mode card
# dark mode
bslib::page_fillable("data-bs-theme" = "dark", bslib::card("Card body"))
dark-mode card

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
old dark-mode card in issue 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.