Force captions in lightbox to always be white on black

[patrislav1]

The caption shown in the lightbox seems to inherit the currently selected color scheme. So when the light theme (aka default theme) is selected, the lightbox shows a bright black-on-white caption box which can look unpleasant and distract from the image (esp. when the image is low key). Since the lightbox itself always has a black background, it would make a lot of sense to force the lightbox caption to always have white(ish) text on black background, regardless of currently selected color theme. Is there a way to do so, without modifying the source code?

[Lexachoc]

You can modify the css (for example, using extra.css)

load it in the mkdocs.yml

extra_css:
  - stylesheets/extra.css

and then in extra.css

.gdesc-inner {
    background: rgba(0,0,0,.92) !important;
}

.gslide-title, .gslide-desc {
    color: #fff !important;
}

The result:

BTW, if you are using mkdocs-material: see: https://squidfunk.github.io/mkdocs-material/reference/images/?h=images#light-and-dark-mode

You can switch between light and dark mode, and the result will be: Light mode:

Dark mode:

For me, the default color of mkdocs-glightbox works well because I prepare the images with light and dark tones that match the light/dark modes.

[patrislav1]

Thank you! Your CSS example works in default / light mode but doesn't change the colors in dark mode. Is it possible to set the colors to fixed values regardless of selected color scheme?

[Lexachoc]

ah sorry about that! Use the below one instead! (I have also edited my previous reply)

.gdesc-inner {
    background: rgba(0,0,0,.92) !important;
}

.gslide-title, .gslide-desc {
    color: #fff !important;
}

For comparison, I changed the caption background to red so you can see that the background is fixed in both modes:

[psifertex]

It would be better if glightbox rather could just use the page's background colors instead of having to hard code is own single background color. This seems like it would just be a better default.

[patrislav1]

ah sorry about that! Use the below one instead! (I have also edited my previous reply)

Works for me, thanks a lot!