Disabling highlight.js breaks switching between light and dark mode #4045
Description
When using the mkdocs theme, disabling the highlighting of source code with highlight.js (highlightjs: false) breaks switching between light and dark mode.
Steps to reproduce:
- Run
mkdocs init. - Add the following to
mkdocs.yml:theme: name: mkdocs color_mode: auto user_color_mode_toggle: true highlightjs: false
- Run
mkdocs serve. - Try to toggle between light and dark mode, either with the button on the page or with the browser's web developer tools.
Expected result:
The appearance of the page changes.
Actual result:
The appearance of the page doesn't changes. The following error is logged in the browser console:
Uncaught TypeError: can't access property "disabled", hljs_dark is null
setColorMode http://127.0.0.1:8000/js/darkmode.js:10
<anonymous> http://127.0.0.1:8000/js/darkmode.js:43
Fix:
diff --git a/mkdocs/themes/mkdocs/js/darkmode.js b/mkdocs/themes/mkdocs/js/darkmode.js
index 30be990..d49d7d3 100644
--- a/mkdocs/themes/mkdocs/js/darkmode.js
+++ b/mkdocs/themes/mkdocs/js/darkmode.js
@@ -3,12 +3,14 @@ function setColorMode(mode) {
var hljs_light = document.getElementById('hljs-light'),
hljs_dark = document.getElementById('hljs-dark');
document.documentElement.setAttribute('data-bs-theme', mode);
- if (mode == 'dark') {
- hljs_light.disabled = true;
- hljs_dark.disabled = false;
- } else {
- hljs_dark.disabled = true;
- hljs_light.disabled = false;
+ if (hljs_light && hljs_dark) {
+ if (mode == 'dark') {
+ hljs_light.disabled = true;
+ hljs_dark.disabled = false;
+ } else {
+ hljs_dark.disabled = true;
+ hljs_light.disabled = false;
+ }
}
}