MobileRead Forums - View Single Post - CSS To make illustration images match color schemes

adadadadadadada · 06-07-2025, 05:24 PM

I made this to avoid the jarring white boxes around black and white illustrations when using color schemes. If the text includes full color images those will look weird.

For the Black scheme

Code:

img { filter: invert(1)}

A close match for Sepia (I didnt manage to make one for Sepia dark)

Code:

img { filter: contrast(.6) sepia(2) grayscale(.8)}

A custom "Old paper" scheme (Background:#f8e7c3 Foreground:#544e42)

Code:

img { filter: contrast(.5) sepia(2) grayscale(.3)}

Old paper dark (Background:#35312a Foreground:#c9c3a5)

Code:

img { filter: invert(1) contrast(.6) sepia(2) brightness(.8) grayscale(.3)}

If you want to make it switch when you go between a light and dark scheme you can using body.calibre-viewer-light/dark-colors , but this effects the main text the same way as it does the image, so set the foreground of the scheme to #000000 (black). It does not effect the text in the margins, so those need to set those to those separately.

heres an example using my old paper schemes

Code:

body.calibre-viewer-light-colors {
      filter: contrast(.5) sepia(2) grayscale(.3)}
body.calibre-viewer-dark-colors {
      filter: invert(1) contrast(.6) sepia(2) brightness(.8) grayscale(.3)}

If you want to try your hand at making your own heres an explanation of CSS filters.

06-07-2025, 05:24 PM	#1
adadadadadadada Junior Member Posts: 1 Karma: 10 Join Date: Jun 2025 Device: none	CSS To make illustration images match color schemes I made this to avoid the jarring white boxes around black and white illustrations when using color schemes. If the text includes full color images those will look weird. For the Black scheme Code: img { filter: invert(1)} A close match for Sepia (I didnt manage to make one for Sepia dark) Code: img { filter: contrast(.6) sepia(2) grayscale(.8)} A custom "Old paper" scheme (Background:#f8e7c3 Foreground:#544e42) Code: img { filter: contrast(.5) sepia(2) grayscale(.3)} Old paper dark (Background:#35312a Foreground:#c9c3a5) Code: img { filter: invert(1) contrast(.6) sepia(2) brightness(.8) grayscale(.3)} If you want to make it switch when you go between a light and dark scheme you can using body.calibre-viewer-light/dark-colors , but this effects the main text the same way as it does the image, so set the foreground of the scheme to #000000 (black). It does not effect the text in the margins, so those need to set those to those separately. heres an example using my old paper schemes Code: body.calibre-viewer-light-colors { filter: contrast(.5) sepia(2) grayscale(.3)} body.calibre-viewer-dark-colors { filter: invert(1) contrast(.6) sepia(2) brightness(.8) grayscale(.3)} If you want to try your hand at making your own heres an explanation of CSS filters.