Добавляет ли iBooks что-то вроде класса CSS или что-то еще, чтобы иметь возможность по-разному стилизовать некоторые разделы книги (в более светлых тонах) при активном ночном режиме?
Есть ли способ определить, активна ли темная тема в iBooks из EPUB?
Ответы (3)
iBooks добавляет атрибут __ibooks_internal_theme к элементу :root (html) со значением, которое меняется в зависимости от выбранной темы.
Продолжайте в том же духе:
:root[__ibooks_internal_theme*="Sepia"]
:root[__ibooks_internal_theme*="Night"]
Более подробную информацию можно найти на GitHub: theme-detect.css
Со временем я добавлю подробности об ограничениях CSS для трех тем.
person
adaptivegarage
schedule
23.11.2014
Хороший. Это было добавлено в обновлении или это было доступно раньше?
- person reitermarkus; 24.11.2014
Я полагаю, что да, и я собираюсь проверить это.
- person adaptivegarage; 25.11.2014
Согласно ответу и комментариям @torazaburo: в ночной теме iBooks устанавливает: цвет фона корня на черный, цвет фона любого другого элемента (включая тело) на прозрачный и цвет на #bebebe. Если вы хотите переопределить его, вы можете еще раз взглянуть на ссылку выше, я обновил ее.
- person adaptivegarage; 25.11.2014
Текущая версия iBooks также включает в себя третью тему под названием Grey. Для этого работает следующий селектор:
:root[__ibooks_internal_theme*="Gray"]
- person RobC; 22.06.2017
Вычисляемые стили
Вы можете попробовать сделать window.getComputedStyle(document.body).backgroundColor. Это не проверено.
РЕДАКТИРОВАТЬ: Что касается getComputedStyle, моя ошибка - цвет фона (при условии, что это то, что использует iBooks) НЕ наследуется, поэтому getComputedStyle ничего вам не купит. Поскольку стиль HTML-элемента имеет разные уровни поддержки (HTML4 технически даже не допускает атрибута стиля в HTML-элементе AFAIK), теоретически возможно, что ваш трюк с наследованием не сработал. я бы застрял в
alert(document.documentElement.style.backgroundColor);
и посмотреть, что всплывет. Другой метод грубой силы заключается в выполнении
alert(document.documentElement.outerHTML);
Вы получите огромное количество информации в окне оповещения, но оно должно прокручиваться для вас, и вы можете увидеть там что-то полезное.
FWIW, Readium, по-видимому, использует ночной режим с фоновым цветом rgb (20,20,20) для элемента html.
Медиа-запросы
Сообщается, что Apple представила собственные медиа-запросы «с разбивкой на страницы» и «без разбивки на страницы», чтобы определить, использует ли пользователь новый режим прокрутки в iBooks 3.0. Возможно, он представил медиа-запрос для темной темы (фактически называемой «ночью»), но я просто предполагаю. В любом случае, насколько мне известно, нет никакого способа перечислить медиа-запросы, и поэтому это был бы процесс чистых проб и ошибок, пытающийся найти его.
person
Community
schedule
18.01.2013
Хорошо, проверил, но не работает. Кажется, что цвет фона не является частью области html.
- person reitermarkus; 19.01.2013
Если вы хотите продолжить эту линию атаки, вы можете попробовать цвет фона какого-либо другого элемента div или поддельного элемента, который вы создаете для этой цели.
- person ; 19.01.2013
Ну, это не сработает, потому что цвет фона будет прозрачным. На самом деле я проверил это с
body background-color, установленным на inherit, чтобы он получил цвет элемента html.
- person reitermarkus; 19.01.2013
Без помощи iBooks можно добавить еще css для ночного режима. Просто добавьте этот тег внутри
<link rel="stylesheet" href="nightmode.css" class="night" />
Другим решением является создание пользовательских медиа-запросов в вашем файле 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; }
}
person
Ronie
schedule
16.01.2013
