Cutlery/calibre
1
0
Fork 0
mirror of https://github.com/kovidgoyal/calibre.git synced 2025-07-09 03:04:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Viewer: Add some CSS variables and classes that allow writing calibre specific CSS in ebooks

Browse Source
This commit is contained in:
Kovid Goyal 2021-08-12 08:36:42 +05:30
parent 2644d1f4ec
commit e2c9a16829
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
manual/viewer.rst
View File

@ -234,3 +234,30 @@ viewer preferences to force the viewer to break up lines of text in
:code:`<pre>` tags:: :code:`<pre>` tags::
code, pre { white-space: pre-wrap } code, pre { white-space: pre-wrap }
Designing your book to work well with the calibre viewer
------------------------------------------------------------
The calibre viewer will set the ``is-calibre-viewer`` class on the root
element. So you can write CSS rules that apply only for it. Additionally,
the viewer will set the following classes on the ``body`` element:
``body.calibre-viewer-dark-colors``
Set when using a dark color scheme
``body.calibre-viewer-light-colors``
Set when using a light color scheme
``body.calibre-viewer-paginated``
Set when in paged mode
``body.calibre-viewer-scrolling``
Set when in flow (non-paginated) mode
Finally, you can use the calibre color scheme colors via `CSS variables
<https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties>`_.
The calibre viewer defines the following variables:
``--calibre-viewer-background-color``, ``--calibre-viewer-foreground-color``
and optionally ``--calibre-viewer-link-color`` in color themes that define
a link color.

5
src/pyj/read_book/settings.pyj
View File

@ -58,6 +58,10 @@ styles_id = 'calibre-color-scheme-style-overrides'
def apply_colors(is_content_popup): def apply_colors(is_content_popup):
document.documentElement.setProperty('--calibre-viewer-background-color', opts.color_scheme.background)
document.documentElement.setProperty('--calibre-viewer-foreground-color', opts.color_scheme.foreground)
if opts.color_scheme.link:
document.documentElement.setProperty('--calibre-viewer-link-color', opts.color_scheme.link)
for elem in (document.documentElement, document.body): for elem in (document.documentElement, document.body):
elem.style.color = opts.color_scheme.foreground elem.style.color = opts.color_scheme.foreground
# set background color to transparent so that the users background # set background color to transparent so that the users background
@ -176,6 +180,7 @@ def set_selection_style(style):
def set_color_scheme_class(): def set_color_scheme_class():
document.documentElement.classList.add('is-calibre-viewer')
if opts.is_dark_theme: if opts.is_dark_theme:
document.body.classList.add('calibre-viewer-dark-colors') document.body.classList.add('calibre-viewer-dark-colors')
document.body.classList.remove('calibre-viewer-light-colors') document.body.classList.remove('calibre-viewer-light-colors')