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;
+ }
}
}
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:
mkdocs init.mkdocs.yml:mkdocs serve.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:
Fix: