diff --git a/resources/toc.js b/resources/toc.js
index 36bc89c32a..8fafa3f49c 100644
--- a/resources/toc.js
+++ b/resources/toc.js
@@ -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);
 })();
diff --git a/src/calibre/gui2/toc/location.py b/src/calibre/gui2/toc/location.py
index 47fdc77e91..072c3c1f83 100644
--- a/src/calibre/gui2/toc/location.py
+++ b/src/calibre/gui2/toc/location.py
@@ -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):