Preview and media query

ajaffary · 03-10-2024, 12:21 PM

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 }
}

shows text in black. Is it possible to have Sigil's Preview browser access the OS level theme, e.g. prefers-colors-scheme?

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.

KevinH · 03-10-2024, 02:30 PM

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.

ajaffary · 03-10-2024, 04:41 PM

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>.

KevinH · 03-10-2024, 05:48 PM

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.

ajaffary · 03-10-2024, 11:00 PM

This is great, thank you for your help.

RbnJrg · 03-11-2024, 12:37 AM

Quote:

Originally Posted by ajaffary

This is great, thank you for your help.

And to think that Kevin said that only I was going to use that feature...

Since it was incorporated into Sigil I use it every day. And I think not only me but also many others. With the OP we have evidence of that.

DiapDealer · 03-11-2024, 06:04 AM

We have evidence of two anyway.

BeckyEbook · 03-11-2024, 06:30 AM

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.

DiapDealer · 03-11-2024, 08:39 AM

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.

RbnJrg · 03-12-2024, 12:13 AM

Quote:

Originally Posted by DiapDealer

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.

Well, at least and so far, we are three that claim the feature is useful. And three is a crowd

03-10-2024, 12:21 PM	#1
ajaffary 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 } } shows text in black. Is it possible to have Sigil's Preview browser access the OS level theme, e.g. prefers-colors-scheme? 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, 04:41 PM	#3
ajaffary 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
KevinH Sigil Developer Posts: 7,647 Karma: 5433388 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.

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

03-10-2024, 02:30 PM	#2
KevinH Sigil Developer Posts: 7,647 Karma: 5433388 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, 11:00 PM	#5
ajaffary 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, 06:04 AM	#7
DiapDealer Grand Sorcerer Posts: 27,552 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	We have evidence of two anyway.

03-11-2024, 06:30 AM	#8
BeckyEbook Guru Posts: 692 Karma: 2180740 Join Date: Jan 2017 Location: Poland Device: Misc	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
DiapDealer Grand Sorcerer Posts: 27,552 Karma: 193191846 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.

Advert

Advert