diff --git a/src/js/code-viewer.js b/src/js/code-viewer.js index 6479672c9..0a95a34a6 100644 --- a/src/js/code-viewer.js +++ b/src/js/code-viewer.js @@ -26,6 +26,7 @@ /******************************************************************************/ import { dom, qs$ } from './dom.js'; +import { getActualTheme } from './theme.js'; /******************************************************************************/ @@ -45,10 +46,14 @@ const cmEditor = new CodeMirror(qs$('#content'), { }); uBlockDashboard.patchCodeMirrorEditor(cmEditor); -if ( dom.cl.has(dom.html, 'dark') ) { - dom.cl.add('#content .cm-s-default', 'cm-s-night'); - dom.cl.remove('#content .cm-s-default', 'cm-s-default'); -} + +vAPI.messaging.send('dom', { what: 'uiStyles' }).then(response => { + if ( typeof response !== 'object' || response === null ) { return; } + if ( getActualTheme(response.uiTheme) === 'dark' ) { + dom.cl.add('#content .cm-s-default', 'cm-s-night'); + dom.cl.remove('#content .cm-s-default', 'cm-s-default'); + } +}); // Convert resource URLs into clickable links to code viewer cmEditor.addOverlay({ diff --git a/src/js/theme.js b/src/js/theme.js index 0d40b8a7d..3bf837f2a 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -21,8 +21,9 @@ 'use strict'; -function setTheme(theme, propagate = false) { - if ( theme === 'auto' ) { +function getActualTheme(nominalTheme) { + let theme = nominalTheme || 'light'; + if ( nominalTheme === 'auto' ) { if ( typeof self.matchMedia === 'function' ) { const mql = self.matchMedia('(prefers-color-scheme: dark)'); theme = mql instanceof Object && mql.matches === true @@ -32,6 +33,11 @@ function setTheme(theme, propagate = false) { theme = 'light'; } } + return theme; +} + +function setTheme(theme, propagate = false) { + theme = getActualTheme(theme); let w = self; for (;;) { const rootcl = w.document.documentElement.classList; @@ -139,6 +145,7 @@ function setAccentColor( } export { + getActualTheme, setTheme, setAccentColor, };