03-10-2024, 12:21 PM | #1 |
Junior Member
Posts: 3
Karma: 10
Join Date: Mar 2024
Device: Thorium Reader MacOS
|
Preview and media query
I've recently incorporated media queries into an ePub to account for light and dark mode on Apple Books.
My OS (Mac Sonoma) is in dark mode, and I have Sigil set change to Dark Preview. However, Preview still only responds to a light mode media query, e.g. Code:
@media (prefers-color-scheme: light) { p { color: black } } @media (prefers-color-scheme: dark) { p { color: white } } The queries work in Apple Books, but it would be great to have Preview respond to this feature, saving having to reload the epub into Apple Books for small fixes. |
03-10-2024, 02:30 PM | #2 |
Sigil Developer
Posts: 8,109
Karma: 5450184
Join Date: Nov 2009
Device: many
|
I will look into this but Preview's background and text are controlled by the css code you inject.
Preview is not a full fledged e-reader. There is an Preview Icon to rapidly cycle through multiple user controllable css stylesheets for Preview to quickly "preview" pages in both light and dark modes. FWIW, some images do not look good no matter the media queries settings under both light and dark mode. So epubs are normally designed for one mode or the other as very few real ereaders can handle both. |
03-10-2024, 04:41 PM | #3 |
Junior Member
Posts: 3
Karma: 10
Join Date: Mar 2024
Device: Thorium Reader MacOS
|
How do I cycle through different stylesheets? I've created two new ones for light and dark background, added to the Styles folder, and linked them in <head>.
Last edited by ajaffary; 03-10-2024 at 04:44 PM. |
03-10-2024, 05:48 PM | #4 |
Sigil Developer
Posts: 8,109
Karma: 5450184
Join Date: Nov 2009
Device: many
|
They are not meant to be part of the epub itself. You create standalone css stylesheets and add them to your Sigil preferences folder.
See this thread ... https://www.mobileread.com/forums/sh...d.php?t=347604 most info on Page 3 of that thread. The icon to cycle is on Preview itself. Last edited by KevinH; 03-10-2024 at 05:52 PM. |
03-10-2024, 11:00 PM | #5 |
Junior Member
Posts: 3
Karma: 10
Join Date: Mar 2024
Device: Thorium Reader MacOS
|
This is great, thank you for your help.
|
03-11-2024, 12:37 AM | #6 |
Wizard
Posts: 1,605
Karma: 7999999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
03-11-2024, 06:04 AM | #7 |
Grand Sorcerer
Posts: 27,965
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
We have evidence of two anyway.
|
03-11-2024, 06:30 AM | #8 |
Guru
Posts: 771
Karma: 2297170
Join Date: Jan 2017
Location: Poland
Device: Various
|
I make no secret of the fact that this function is useful. I usually use the dark mode in the UI and have a cream-yellow colour in the preview pane, as white is too glaring to the eyes. The alternative styles allow me to quickly check other settings.
I use it at least once a week. |
03-11-2024, 08:39 AM | #9 |
Grand Sorcerer
Posts: 27,965
Karma: 198535232
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
I was joking. It just seemed humorous to me that Reuben claimed evidence of "many others" from a single poster announcing their enthusiasm for the newly discovered feature.
|
03-12-2024, 12:13 AM | #10 |
Wizard
Posts: 1,605
Karma: 7999999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Well, at least and so far, we are three that claim the feature is useful. And three is a crowd
|
Tags |
apple books, media query |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Is there really a media query for KFX? | nabsltd | Amazon Kindle | 20 | 09-06-2023 08:23 AM |
prefers-color-scheme media query | tozz | Editor | 2 | 02-07-2023 04:47 PM |
Mobigen Why are css media query examples in Amzn Kindle Publishing Guidelines so terrible? | rjnagle | Kindle Formats | 14 | 06-17-2020 02:22 PM |
Kindle Media Query | Macsurfcat | Kindle Formats | 32 | 02-06-2015 10:14 AM |
Color Nook color - media query for Orientation lock | aslam44 | Nook Developer's Corner | 0 | 03-14-2013 03:57 AM |