Skip to content

Commit

Permalink
Make collapse/display templates work in dark mode
Browse files Browse the repository at this point in the history
In dark mode, the display templates still have a light background, and stand
out far too much. This adds CSS to change the `bg-light` class for the collapse
and display templates to the dark-mode colors when `data-bs-theme=dark`.

See jhpyle/docassemble#718 for a discussion on a
suggested fix for a similar issue, which resulted in the suggested workaround
here.
  • Loading branch information
BryceStevenWilley committed Dec 5, 2023
1 parent 99407a3 commit cb68fa8
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion docassemble/ALToolbox/data/static/collapse_template.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,13 @@
.al_collapse_template a.collapsed .pdcaretclosed,
.al_display_template a.collapsed .pdcaretclosed {
display: inline;
}
}

/* An upstream fix for Bootstrap's lack of a dark/light mode neutral style.
See https://github.com/jhpyle/docassemble/pull/718 */
[data-bs-theme=dark] .al_collapse_template .bg-light,
[data-bs-theme=dark] .al_display_template .bg-light,
[data-bs-theme=dark] .al_display_template.bg-light {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

0 comments on commit cb68fa8

Please sign in to comment.