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

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. // ignore error.
} }
if (theme === null || theme === undefined || !themeIds.includes(theme)) { 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 { } else {
return theme; return theme;
} }
} }
var previousTheme = default_theme;
function set_theme(theme, store = true) { function set_theme(theme, store = true) {
let ace_theme; let ace_theme;
@ -383,8 +391,6 @@ aria-label="Show hidden lines"></button>';
}); });
} }
const previousTheme = get_theme();
if (store) { if (store) {
try { try {
localStorage.setItem('mdbook-theme', theme); localStorage.setItem('mdbook-theme', theme);
@ -395,13 +401,17 @@ aria-label="Show hidden lines"></button>';
html.classList.remove(previousTheme); html.classList.remove(previousTheme);
html.classList.add(theme); html.classList.add(theme);
previousTheme = theme;
updateThemeSelected(); updateThemeSelected();
} }
// Set theme const query = window.matchMedia("(prefers-color-scheme: dark)");
const theme = get_theme(); query.onchange = function(event) {
set_theme(get_theme(), false);
};
set_theme(theme, false); // Set theme.
set_theme(get_theme(), false);
themeToggleButton.addEventListener('click', function() { themeToggleButton.addEventListener('click', function() {
if (themePopup.style.display === 'block') { 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> <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}} {{/if}}
<!-- Provide site root to javascript --> <!-- Provide site root and default themes to javascript -->
<script> <script>
const path_to_root = "{{ path_to_root }}"; 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> </script>
<!-- Start loading toc.js asap --> <!-- Start loading toc.js asap -->
<script src="{{ resource "toc.js" }}"></script> <script src="{{ resource "toc.js" }}"></script>
@ -81,6 +82,7 @@
<!-- Set the theme before any content is loaded, prevents flash --> <!-- Set the theme before any content is loaded, prevents flash -->
<script> <script>
const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
let theme; let theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; } if (theme === null || theme === undefined) { theme = default_theme; }