How do I change the text color to accomodate dark mode?

[bookgobrrr]

Hi all,

Most of my devices are configured with dark mode and all of the books I have (mostly in .EPUB format) adjust properly with blue links (for table of contents) and white text (on black background). However, one book I have has an illegible dark gray text color when viewing in dark mode.

How can I edit this book so that it adjusts properly to either white text in dark mode and black text in light mode?

Many thanks!

[thiago.eec]

Originally Posted by bookgobrrr

Hi all,

Most of my devices are configured with dark mode and all of the books I have (mostly in .EPUB format) adjust properly with blue links (for table of contents) and white text (on black background). However, one book I have has an illegible dark gray text color when viewing in dark mode.

How can I edit this book so that it adjusts properly to either white text in dark mode and black text in light mode?

Many thanks!

Checkout for the 'Color' property on CSS rules. To get a flexible design, it's better not to define colors. Also, you can use 'Color: inherit'.

[kovidgoyal]

Or use the option in the viewer preferences to always override book colors

[hobnail]

Originally Posted by thiago.eec

Checkout for the 'Color' property on CSS rules. To get a flexible design, it's better not to define colors, or use 'Color: inherit'.

That sounds like you're saying to not use inherit, but that's what the OP should fix in their CSS.

a.text-color {
    color: inherit;
}

[thiago.eec]

Originally Posted by hobnail

That sounds like you're saying to not use inherit, but that's what the OP should fix in their CSS.

a.text-color {
    color: inherit;
}

You're right. It was poorly written. I meant to use 'inherit'.

[bookgobrrr]

Thanks very much for the replies!

Where exactly would I make this change in the css .stylesheet?

[bookgobrrr]

Ok so I changed *all* instances of where I saw "color: rgb(0,0,0);" to read color: inherit;

There were also other some rgb values.

This seemed to have done the trick! Thanks.

Now I just want to find out how to makes images responsive... Any tips on how to make .epub's as adaptable as possible?

[thiago.eec]

Originally Posted by bookgobrrr

Thanks very much for the replies!

Where exactly would I make this change in the css .stylesheet?

You must search you CSS stylesheet for 'color'. Then, for every instance of it, use the value 'inherit'.

Example:

If you find this rule:

p {
   ...
   color: #808080;
   ...
}

Change it to:

p {
   ...
   color: inherit;
   ...
}

[thiago.eec]

Originally Posted by bookgobrrr

Ok so I changed *all* instances of where I saw "color: rgb(0,0,0);" to read color: inherit;

There were also other some rgb values.

This seemed to have done the trick! Thanks.

You figured it out while I was typing.

Originally Posted by bookgobrrr

Now I just want to find out how to makes images responsive... Any tips on how to make .epub's as adaptable as possible?

One good way to have your images adapting to the screen size is to use a value in percentage, like this:

img.big {
   width: 100%;
   height: auto;
}

img.small {
   width: 30%;
   height: auto;
}

You define only the width and let it adjust automatically the height, to avoid distortions.