mirror of
https://github.com/kovidgoyal/calibre.git
synced 2025-07-09 03:04:10 -04:00
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:
parent
4ea2bd2a90
commit
e9b09b0066
@ -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()
|
||||||
|
@ -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'),
|
||||||
)
|
)
|
||||||
|
@ -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)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user