diff --git a/src/pyj/book_list/main.pyj b/src/pyj/book_list/main.pyj
index b52de2eb9a..1a32478853 100644
--- a/src/pyj/book_list/main.pyj
+++ b/src/pyj/book_list/main.pyj
@@ -14,7 +14,7 @@ from utils import safe_set_inner_html
 
 from book_list.constants import book_list_container_id, read_book_container_id, INIT_ENDPOINT
 from book_list.library_data import fetch_init_data, update_library_data, url_books_query
-from book_list.theme import get_color, get_font_family
+from book_list.theme import get_color, get_font_family, css_for_variables
 from book_list.router import update_window_title, set_default_mode_handler, apply_url, set_mode_handler, on_pop_state
 from book_list.globals import get_db, set_session_data
 from book_list.ui import apply_url_state as book_list_mode_handler
@@ -66,7 +66,7 @@ def init_ui():
     translations = get_translations()
     install(translations)
     remove_initial_progress_bar()
-    document.head.appendChild(E.style(get_widget_css()))
+    document.head.appendChild(E.style(css_for_variables() + '\n\n' + get_widget_css()))
     set_css(document.body, background_color=get_color('window-background'), color=get_color('window-foreground'))
     document.body.appendChild(E.div())
     document.body.lastChild.appendChild(E.div(id=book_list_container_id, style='display: none'))
diff --git a/src/pyj/book_list/theme.pyj b/src/pyj/book_list/theme.pyj
index 31cb080acf..42b913eec4 100644
--- a/src/pyj/book_list/theme.pyj
+++ b/src/pyj/book_list/theme.pyj
@@ -50,9 +50,16 @@ DEFAULT_FONTS = {
     'main': 'sans-serif'
 }
 
+def css_for_variables():
+    ans = v'[]'
+    for k in DEFAULT_COLORS:
+        val = DEFAULT_COLORS[k]
+        ans.push(f'--calibre-color-{k}: {val};')
+    return ':root { ' + ans.join('\n') + '}'
+
 
 def get_color(name):
-    return DEFAULT_COLORS[name]
+    return f'var(--calibre-color-{name})'
 
 
 def color_to_rgba(color):
diff --git a/src/pyj/viewer-main.pyj b/src/pyj/viewer-main.pyj
index 3662bab613..64a45b77cd 100644
--- a/src/pyj/viewer-main.pyj
+++ b/src/pyj/viewer-main.pyj
@@ -10,7 +10,7 @@ import initialize  # noqa: unused-import
 from ajax import ajax, workaround_qt_bug
 from book_list.globals import get_session_data, set_session_data
 from book_list.library_data import library_data
-from book_list.theme import get_color
+from book_list.theme import get_color, css_for_variables
 from dom import get_widget_css, set_css
 from modals import create_modal_container
 from qt import from_python, to_python
@@ -399,7 +399,7 @@ if window is window.top:
     document.body.appendChild(E.div(id='view'))
     window.onerror = onerror
     create_modal_container()
-    document.head.appendChild(E.style(get_widget_css()))
+    document.head.appendChild(E.style(css_for_variables() + '\n\n' + get_widget_css()))
     set_css(document.body, background_color=get_color('window-background'), color=get_color('window-foreground'))
     setTimeout(def():
             window.onpopstate = on_pop_state