Има ли начин да се установи дали тъмната тема е активна в iBooks от EPUB?

iBooks добавя атрибут __ibooks_internal_theme към елемента :root (html) със стойност, която се променя с избраната тема.

Продължете с това:

:root[__ibooks_internal_theme*="Sepia"]    
:root[__ibooks_internal_theme*="Night"]

Можете да намерите повече подробности в GitHub: theme-detect.css

В крайна сметка ще добавя подробности за CSS ограниченията за трите теми.

Изчислени стилове

Можете да опитате да направите window.getComputedStyle(document.body).backgroundColor. Това не е тествано.

РЕДАКТИРАНЕ: Относно getComputedStyle, моята грешка - цветът на фона (ако приемем, че това е, което iBooks използва) НЕ се наследява, така че getComputedStyle няма да ви купи нищо. Тъй като стилизирането на HTML елемента има различни нива на поддръжка (HTML4 технически не позволява дори стилов атрибут на HTML елемента AFAIK), теоретично е възможно вашият трик с наследяването да не е проработил. Бих се придържал към a

alert(document.documentElement.style.backgroundColor);

и виж какво ще изскочи. Друг подход с груба сила е да направите a

alert(document.documentElement.outerHTML);

Ще получите огромно количество неща в полето за предупреждение, но то трябва да се превърти вместо вас и може да успеете да видите нещо полезно там.

FWIW, Readium очевидно прави нощен режим с фонов цвят от rgb(20,20,20) на html елемента.

Медийни заявки

Съобщава се, че Apple е въвела собствени медийни заявки „paginated“ и „nonpaginated“, за да открие дали потребителят използва новия режим на превъртане в iBooks 3.0. Възможно е да е въвела медийна заявка за тъмната тема (всъщност наречена „нощ“), но аз само предполагам. По какъвто и да е начин, доколкото ми е известно, няма начин да се изброят медийни заявки и затова ще бъде процес на чисти проби и грешки, опитвайки се да го намерите.

Без помощта на iBooks можете да добавите друг css за нощен режим. Просто добавете този етикет вътре в

<link rel="stylesheet" href="/bgnightmode.css" class="night" />

Друго решение е да направите Custom Media Queries във вашия css файл:

/* Sepia */
@media sepia {
* { color: #000000; }
body { background-color: #eae4d3; }
}

/* Black */
@media black {
* { color: #ffffff; }
body { background-color: #000000; color: #ffffff; }
}

/* White */
@media white {
* { color: #000000; }
body { background-color: #ffffff; }
}