Change default image background color in Jupyter Book

Special Topics Publishing
1

Hello everyone,

I am new to Jupyter Book and I am trying to do some simple changes to my website. More specifically, I want to change the background of my light and dark themes.

I managed to successfully do this by adding a custom.css file into the _static folder with the following options:

html[data-theme="light"] {
    body {
        background-color: #b92121;
    }
}

html[data-theme="dark"] {
    body {
        background-color: #261f7c;
    }
}

This worked OK for the body background, but it has a couple of issues:

  1. It does not change the color of the sidebars and the navigation bar.
  2. More importantly, it does change the background color that images inherit from in the light theme, but not in the dark theme.

Here’s how the dark mode looks like (unlike the light theme, where the image’s background matches the body background, here the image’s background inherits from something else):

image
image1584×448 23.7 KB

Wondering if someone can help me figuring out what is the recommended way to change the overall color scheme for light/dark themes, or even better, if you can point me to some documentation where this is covered in detail.

Thanks in advance!