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.resources import finalize_resources, unserialize_html
from read_book.settings import ( from read_book.settings import (
apply_colors, apply_font_size, apply_settings, apply_stylesheet, opts, apply_colors, apply_font_size, apply_settings, apply_stylesheet, opts,
update_settings set_color_scheme_class, update_settings
) )
from read_book.shortcuts import ( from read_book.shortcuts import (
create_shortcut_map, keyevent_as_shortcut, shortcut_for_key_event 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: if data.color_scheme and data.color_scheme.foreground and data.color_scheme.background:
opts.color_scheme = data.color_scheme opts.color_scheme = data.color_scheme
apply_colors() apply_colors()
set_color_scheme_class()
def content_loaded(self): def content_loaded(self):
document.documentElement.style.overflow = 'hidden' document.documentElement.style.overflow = 'hidden'
if self.is_titlepage and not opts.cover_preserve_aspect_ratio: if self.is_titlepage and not opts.cover_preserve_aspect_ratio:
document.body.classList.add('cover-fill') document.body.classList.add('cover-fill')
document.body.classList.add(f'calibre-viewer-{layout_style()}') document.body.classList.add(f'calibre-viewer-{layout_style()}')
set_color_scheme_class()
if self.reference_mode_enabled: if self.reference_mode_enabled:
start_reference_mode() start_reference_mode()
self.last_window_width, self.last_window_height = scroll_viewport.width(), scroll_viewport.height() 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.')), 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' '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'), 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.cover_preserve_aspect_ratio = v'!!settings.cover_preserve_aspect_ratio'
opts.bg_image_fade = settings.bg_image_fade or 'transparent' opts.bg_image_fade = settings.bg_image_fade or 'transparent'
opts.paged_wheel_scrolls_by_screen = v'!!settings.paged_wheel_scrolls_by_screen' opts.paged_wheel_scrolls_by_screen = v'!!settings.paged_wheel_scrolls_by_screen'
opts.is_dark_theme = v'!!settings.is_dark_theme'
update_settings() update_settings()
@ -48,6 +49,15 @@ def apply_colors():
ss.textContent = text 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(): def apply_stylesheet():
sid = 'calibre-browser-viewer-user-stylesheet' sid = 'calibre-browser-viewer-user-stylesheet'
style = document.getElementById(sid) style = document.getElementById(sid)