Viewer: Add a class to <body> indicating if we are using light or dark color scheme. Can be used in the user stylesheet

This commit is contained in:
Kovid Goyal 2019-12-15 16:42:01 +05:30
parent 4ea2bd2a90
commit e9b09b0066
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
3 changed files with 15 additions and 2 deletions

View File

@ -35,7 +35,7 @@ from read_book.referencing import (
from read_book.resources import finalize_resources, unserialize_html
from read_book.settings import (
apply_colors, apply_font_size, apply_settings, apply_stylesheet, opts,
update_settings
set_color_scheme_class, update_settings
)
from read_book.shortcuts import (
create_shortcut_map, keyevent_as_shortcut, shortcut_for_key_event
@ -246,12 +246,14 @@ class IframeBoss:
if data.color_scheme and data.color_scheme.foreground and data.color_scheme.background:
opts.color_scheme = data.color_scheme
apply_colors()
set_color_scheme_class()
def content_loaded(self):
document.documentElement.style.overflow = 'hidden'
if self.is_titlepage and not opts.cover_preserve_aspect_ratio:
document.body.classList.add('cover-fill')
document.body.classList.add(f'calibre-viewer-{layout_style()}')
set_color_scheme_class()
if self.reference_mode_enabled:
start_reference_mode()
self.last_window_width, self.last_window_height = scroll_viewport.width(), scroll_viewport.height()

View File

@ -106,7 +106,8 @@ def create_user_stylesheet_panel(container, apply_func, cancel_func):
href='https://www.mobileread.com/forums/showthread.php?t=51500', _('here.')),
' ', _(
'Note that you can use the selectors body.calibre-viewer-paginated and body.calibre-viewer-scrolling'
' to target the Paged and Flow modes.')
' to target the Paged and Flow modes. Similarly, use body.calibre-viewer-light-colors and'
' body.calibre-viewer-dark-colors to target light and dark color schemes.')
),
E.textarea(name='user-stylesheet', style='width: 100%; margin-top: 1ex; box-sizing: border-box; flex-grow: 10'),
)

View File

@ -19,6 +19,7 @@ def update_settings(settings):
opts.cover_preserve_aspect_ratio = v'!!settings.cover_preserve_aspect_ratio'
opts.bg_image_fade = settings.bg_image_fade or 'transparent'
opts.paged_wheel_scrolls_by_screen = v'!!settings.paged_wheel_scrolls_by_screen'
opts.is_dark_theme = v'!!settings.is_dark_theme'
update_settings()
@ -48,6 +49,15 @@ def apply_colors():
ss.textContent = text
def set_color_scheme_class():
if opts.is_dark_theme:
document.body.classList.add('calibre-viewer-dark-colors')
document.body.classList.remove('calibre-viewer-light-colors')
else:
document.body.classList.add('calibre-viewer-light-colors')
document.body.classList.remove('calibre-viewer-dark-colors')
def apply_stylesheet():
sid = 'calibre-browser-viewer-user-stylesheet'
style = document.getElementById(sid)