ToC editor: Dark mode: Fix colors in location selection panel not dark

This commit is contained in:
Kovid Goyal 2021-05-09 13:39:54 +05:30
parent 26b8d40b12
commit 57fc7739d3
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
2 changed files with 49 additions and 9 deletions

View File

@ -4,10 +4,13 @@
*
* Distributed under terms of the GPLv3 license
*/
/*jshint esversion: 6 */
(function() {
"use strict";
var com_id = "COM_ID";
var com_counter = 0;
var dark_css = CSS;
var settings = SETTINGS;
function onclick(event) {
// We dont want this event to trigger onclick on this element's parent
@ -37,8 +40,8 @@
}
function find_blocks() {
for (let elem of document.body.getElementsByTagName('*')) {
style = window.getComputedStyle(elem);
for (let elem of document.body.getElementsByTagName('*')) {
var style = window.getComputedStyle(elem);
if (style.display === 'block' || style.display === 'flex-box' || style.display === 'box') {
elem.classList.add("calibre_toc_hover");
elem.onclick = onclick;
@ -46,8 +49,34 @@
}
}
var style = document.createElement('style');
style.innerText = 'body { background-color: white }' + '.calibre_toc_hover:hover { cursor: pointer !important; border-top: solid 5px green !important }' + '::selection {background:#ffff00; color:#000;}';
document.documentElement.appendChild(style);
find_blocks();
function apply_body_colors(event) {
if (document.documentElement) {
if (settings.bg) document.documentElement.style.backgroundColor = settings.bg;
if (settings.fg) document.documentElement.style.color = settings.fg;
}
if (document.body) {
if (settings.bg) document.body.style.backgroundColor = settings.bg;
if (settings.fg) document.body.style.color = settings.fg;
}
}
function apply_css() {
var css = '';
var border_shade = settings.is_dark_theme ? 'lightGreen' : 'green';
css += '.calibre_toc_hover:hover { cursor: pointer !important; border-top: solid 5px ' + border_shade + ' !important }\n\n';
if (settings.link) css += 'html > body :link, html > body :link * { color: ' + settings.link + ' !important; }\n\n';
if (settings.is_dark_theme) { css += dark_css; }
var style = document.createElement('style');
style.textContent = css;
document.body.appendChild(style);
}
apply_body_colors();
function apply_all() {
apply_css();
apply_body_colors();
find_blocks();
}
document.addEventListener("DOMContentLoaded", apply_all);
})();

View File

@ -7,7 +7,7 @@ import json
from qt.core import (
QFrame, QGridLayout, QIcon, QLabel, QLineEdit, QListWidget, QPushButton, QSize,
QSplitter, Qt, QUrl, QVBoxLayout, QWidget, pyqtSignal
QSplitter, Qt, QUrl, QVBoxLayout, QWidget, pyqtSignal, QApplication, QPalette
)
from qt.webengine import QWebEnginePage, QWebEngineScript, QWebEngineView
@ -33,10 +33,21 @@ class Page(QWebEnginePage): # {{{
self.loadFinished.connect(self.show_frag)
s = QWebEngineScript()
s.setName('toc.js')
s.setInjectionPoint(QWebEngineScript.InjectionPoint.DocumentReady)
s.setInjectionPoint(QWebEngineScript.InjectionPoint.DocumentCreation)
s.setRunsOnSubFrames(True)
s.setWorldId(QWebEngineScript.ScriptWorldId.ApplicationWorld)
s.setSourceCode(P('toc.js', allow_user_override=False, data=True).decode('utf-8').replace('COM_ID', self.com_id))
js = P('toc.js', allow_user_override=False, data=True).decode('utf-8').replace('COM_ID', self.com_id, 1)
pal = QApplication.instance().palette()
settings = {
'is_dark_theme': QApplication.instance().is_dark_theme,
'bg': pal.color(QPalette.ColorRole.Window).name(),
'fg': pal.color(QPalette.ColorRole.WindowText).name(),
'link': pal.color(QPalette.ColorRole.Link).name(),
}
js = js.replace('SETTINGS', json.dumps(settings), 1)
dark_mode_css = P('dark_mode.css', data=True, allow_user_override=False).decode('utf-8')
js = js.replace('CSS', json.dumps(dark_mode_css), 1)
s.setSourceCode(js)
self.scripts().insert(s)
def javaScriptConsoleMessage(self, level, msg, lineno, msgid):