From e2c9a16829c2667c1b7b88529cb715a0c561b635 Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Thu, 12 Aug 2021 08:36:42 +0530
Subject: [PATCH] Viewer: Add some CSS variables and classes that allow writing
 calibre specific CSS in ebooks

---
 manual/viewer.rst              | 27 +++++++++++++++++++++++++++
 src/pyj/read_book/settings.pyj |  5 +++++
 2 files changed, 32 insertions(+)

diff --git a/manual/viewer.rst b/manual/viewer.rst
index 80bf47a916..6480df40cd 100644
--- a/manual/viewer.rst
+++ b/manual/viewer.rst
@@ -234,3 +234,30 @@ viewer preferences to force the viewer to break up lines of text in
 :code:`<pre>` tags::
 
     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.
diff --git a/src/pyj/read_book/settings.pyj b/src/pyj/read_book/settings.pyj
index 1624daf404..1b93218630 100644
--- a/src/pyj/read_book/settings.pyj
+++ b/src/pyj/read_book/settings.pyj
@@ -58,6 +58,10 @@ styles_id = 'calibre-color-scheme-style-overrides'
 
 
 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):
         elem.style.color = opts.color_scheme.foreground
         # set background color to transparent so that the users background
@@ -176,6 +180,7 @@ def set_selection_style(style):
 
 
 def set_color_scheme_class():
+    document.documentElement.classList.add('is-calibre-viewer')
     if opts.is_dark_theme:
         document.body.classList.add('calibre-viewer-dark-colors')
         document.body.classList.remove('calibre-viewer-light-colors')