From e9b09b006693cdcc0f1780b7477703b124622889 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Sun, 15 Dec 2019 16:42:01 +0530 Subject: [PATCH] Viewer: Add a class to indicating if we are using light or dark color scheme. Can be used in the user stylesheet --- src/pyj/read_book/iframe.pyj | 4 +++- src/pyj/read_book/prefs/user_stylesheet.pyj | 3 ++- src/pyj/read_book/settings.pyj | 10 ++++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pyj/read_book/iframe.pyj b/src/pyj/read_book/iframe.pyj index fe9446cdbd..1bba313c8a 100644 --- a/src/pyj/read_book/iframe.pyj +++ b/src/pyj/read_book/iframe.pyj @@ -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() diff --git a/src/pyj/read_book/prefs/user_stylesheet.pyj b/src/pyj/read_book/prefs/user_stylesheet.pyj index 24be315e00..78a0d43bf6 100644 --- a/src/pyj/read_book/prefs/user_stylesheet.pyj +++ b/src/pyj/read_book/prefs/user_stylesheet.pyj @@ -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'), ) diff --git a/src/pyj/read_book/settings.pyj b/src/pyj/read_book/settings.pyj index 004dd02655..bf4cd44af7 100644 --- a/src/pyj/read_book/settings.pyj +++ b/src/pyj/read_book/settings.pyj @@ -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)