jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Switch theme when preferred color scheme changes

Browse source
This commit is contained in:
Tyler Mandry 2025-03-07 23:10:41 -07:00 • committed by Eric Huss
parent 7a1977a78c
commit 8835bdc47e
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/theme/book.js
View file

@ -346,12 +346,20 @@ aria-label="Show hidden lines"></button>';
// ignore error.
}
if (theme === null || theme === undefined || !themeIds.includes(theme)) {
return default_theme;
if (typeof default_dark_theme === 'undefined') {
// A customized index.hbs might not define this, so fall back to
// old behavior of determining the default on page load.
return default_theme;
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? default_dark_theme
: default_light_theme;
} else {
return theme;
}
}
var previousTheme = default_theme;
function set_theme(theme, store = true) {
let ace_theme;
@ -383,8 +391,6 @@ aria-label="Show hidden lines"></button>';
});
}
const previousTheme = get_theme();
if (store) {
try {
localStorage.setItem('mdbook-theme', theme);
@ -395,13 +401,17 @@ aria-label="Show hidden lines"></button>';
html.classList.remove(previousTheme);
html.classList.add(theme);
previousTheme = theme;
updateThemeSelected();
}
// Set theme
const theme = get_theme();
const query = window.matchMedia("(prefers-color-scheme: dark)");
query.onchange = function(event) {
set_theme(get_theme(), false);
};
set_theme(theme, false);
// Set theme.
set_theme(get_theme(), false);
themeToggleButton.addEventListener('click', function() {
if (themePopup.style.display === 'block') {

6
src/theme/index.hbs
View file

@ -53,10 +53,11 @@
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}}
<!-- Provide site root to javascript -->
<!-- Provide site root and default themes to javascript -->
<script>
const path_to_root = "{{ path_to_root }}";
const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
const default_light_theme = "{{ default_theme }}";
const default_dark_theme = "{{ preferred_dark_theme }}";
</script>
<!-- Start loading toc.js asap -->
<script src="{{ resource "toc.js" }}"></script>
@ -81,6 +82,7 @@
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
let theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }