Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor

Notices

Reply
 
Thread Tools Search this Thread
Old 09-24-2020, 04:40 PM   #1
bookgobrrr
Junior Member
bookgobrrr began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Sep 2020
Device: Kindle, Surface Duo
Post How do I change the text color to accomodate dark mode?

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!
bookgobrrr is offline   Reply With Quote
Old 09-24-2020, 09:09 PM   #2
thiago.eec
Wizard
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 1,019
Karma: 1189271
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by bookgobrrr View Post
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'.

Last edited by thiago.eec; 09-25-2020 at 06:29 AM. Reason: Clarify
thiago.eec is offline   Reply With Quote
Advert
Old 09-24-2020, 09:46 PM   #3
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 44,380
Karma: 23766374
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Or use the option in the viewer preferences to always override book colors
kovidgoyal is offline   Reply With Quote
Old 09-24-2020, 09:49 PM   #4
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 1,556
Karma: 14325282
Join Date: Nov 2019
Device: none
Quote:
Originally Posted by thiago.eec View Post
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.

Code:
a.text-color {
    color: inherit;
}
hobnail is offline   Reply With Quote
Old 09-25-2020, 06:25 AM   #5
thiago.eec
Wizard
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 1,019
Karma: 1189271
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by hobnail View Post
That sounds like you're saying to not use inherit, but that's what the OP should fix in their CSS.

Code:
a.text-color {
    color: inherit;
}
You're right. It was poorly written. I meant to use 'inherit'.
thiago.eec is offline   Reply With Quote
Advert
Old 09-26-2020, 12:47 PM   #6
bookgobrrr
Junior Member
bookgobrrr began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Sep 2020
Device: Kindle, Surface Duo
Thanks very much for the replies!

Where exactly would I make this change in the css .stylesheet?
bookgobrrr is offline   Reply With Quote
Old 09-26-2020, 01:19 PM   #7
bookgobrrr
Junior Member
bookgobrrr began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Sep 2020
Device: Kindle, Surface Duo
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?
bookgobrrr is offline   Reply With Quote
Old 09-26-2020, 01:20 PM   #8
thiago.eec
Wizard
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 1,019
Karma: 1189271
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by bookgobrrr View Post
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:

Code:
p {
   ...
   color: #808080;
   ...
}
Change it to:

Code:
p {
   ...
   color: inherit;
   ...
}
thiago.eec is offline   Reply With Quote
Old 09-26-2020, 01:21 PM   #9
thiago.eec
Wizard
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 1,019
Karma: 1189271
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
Quote:
Originally Posted by bookgobrrr View Post
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.

Quote:
Originally Posted by bookgobrrr View Post
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:

Code:
img.big {
   width: 100%;
   height: auto;
}
Code:
img.small {
   width: 30%;
   height: auto;
}
You define only the width and let it adjust automatically the height, to avoid distortions.

Last edited by thiago.eec; 09-26-2020 at 01:27 PM.
thiago.eec is offline   Reply With Quote
Reply

Tags
color background, text

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Feature Request: Dark Mode menu color/border Katsunami Calibre 3 09-01-2020 05:18 PM
Scroll bar color is dark mode JSWolf Calibre 1 08-03-2020 06:01 AM
CSS text color should be dark blue. Everywhere. nkormanik Calibre 10 05-06-2019 05:29 AM
ePub color text on night mode on iPad larysa Apple Devices 1 11-29-2017 05:54 AM
Change all text color when converting? Steven630 Conversion 4 08-15-2012 08:43 AM


All times are GMT -4. The time now is 04:01 PM.


MobileRead.com is a privately owned, operated and funded community.