flex/templates/partial/flex.html

53 lines
1.8 KiB
HTML
Raw Normal View History

2019-01-03 00:16:02 +01:00
<p>{{ _('Built with %(pelican_url)s using %(flex_url)s theme',
pelican_url='<a href="http://getpelican.com" target="_blank">Pelican</a>',
2020-04-07 08:22:07 +02:00
flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe) }}
<span class="theme-separator">|</span>
Switch to the
<a href="javascript:void(0)" onclick="switchTheme('dark')">
dark
</a>|<a href="javascript:void(0)" onclick="switchTheme('light')">
light
</a>|<a href="javascript:void(0)" onclick="switchTheme('browser')">
browser
</a>
theme
</p>
<script>
const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
function detectThemeAndSwitchStyle() {
let theme = localStorage.getItem('themeOverride') || 'browser';
if (theme === 'browser') {
theme = darkSchemeWatch.matches ? 'dark' : 'light';
}
2020-04-08 06:16:41 +02:00
console.log(`Switching theme to ${theme}.`)
// Find the pygments CSS file and change it to the theme specified in the
// config.
2020-04-08 05:36:38 +02:00
const pygmentsTheme = theme === 'light'
? '{{ PYGMENTS_STYLE }}'
: '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}'
Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
}
});
2020-04-07 08:22:07 +02:00
if (theme === 'dark') {
2020-04-08 06:16:41 +02:00
document.body.classList.add('dark-theme');
document.body.classList.remove('light-theme');
2020-04-07 08:22:07 +02:00
} else {
2020-04-08 06:16:41 +02:00
document.body.classList.add('light-theme');
document.body.classList.remove('dark-theme');
2020-04-07 08:22:07 +02:00
}
}
function switchTheme(themeOverride) {
localStorage.setItem('themeOverride', themeOverride);
detectThemeAndSwitchStyle();
}
detectThemeAndSwitchStyle();
darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
</script>