schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity

Added themeing options

Browse source 
Added THEME_COLOR, THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE, and THEME_COLOR_ENABLE_USER_OVERRIDE options
This commit is contained in:
Sumner Evans 2020-04-15 16:55:28 -06:00
parent 9b3495da5d
commit 904484e2b4
No known key found for this signature in database
GPG key ID: 8904527AB50022FD
4 changed files with 239 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

93
templates/partial/flex.html
View file

@ -1,53 +1,70 @@
<p>{{ _('Built with %(pelican_url)s using %(flex_url)s theme',
pelican_url='<a href="http://getpelican.com" target="_blank">Pelican</a>',
flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe) }}
<p>
{{
_('Built with %(pelican_url)s using %(flex_url)s theme',
pelican_url='<a href="http://getpelican.com" target="_blank">Pelican</a>',
flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe)
}}
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
<span class="footer-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>
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
|<a href="javascript:void(0)" onclick="switchTheme('browser')">
browser
</a>
{% endif %}
theme
{% endif %}
</p>
<script>
const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
<script>
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
{% endif %}
function detectThemeAndSwitchStyle() {
let theme = localStorage.getItem('themeOverride');
if (theme !== 'light' && theme !== 'dark') {
theme = darkSchemeWatch.matches ? 'dark' : 'light';
}
console.log(`Switching theme to ${theme}.`)
// Find the pygments CSS files (there are two, one for each theme) and
// change them both to the theme specified by the user.
const pygmentsTheme = theme === 'light'
? '{{ PYGMENTS_STYLE|default('github') }}'
: '{{ PYGMENTS_STYLE_DARK|default('monokai') }}'
Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
function detectThemeAndSwitchStyle() {
let theme = localStorage.getItem('themeOverride');
if (theme !== 'light' && theme !== 'dark') {
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
theme = darkSchemeWatch.matches ? 'dark' : 'light';
{% else %}
theme = '{{ THEME_COLOR|default("light") }}';
{% endif %}
}
});
const htmlElement = document.getElementsByTagName('html')[0];
if (theme === 'dark') {
htmlElement.classList.add('dark-theme');
htmlElement.classList.remove('light-theme');
} else {
htmlElement.classList.add('light-theme');
htmlElement.classList.remove('dark-theme');
// Find the pygments CSS files (there are two, one for each theme) and
// change them both to the theme specified by the user.
const pygmentsTheme = theme === 'light'
? '{{ PYGMENTS_STYLE|default('github') }}'
: '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE or 'monokai' }}';
Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
}
});
const htmlElement = document.getElementsByTagName('html')[0];
if (theme === 'dark') {
htmlElement.classList.add('dark-theme');
htmlElement.classList.remove('light-theme');
} else {
htmlElement.classList.add('light-theme');
htmlElement.classList.remove('dark-theme');
}
}
function switchTheme(themeOverride) {
localStorage.setItem('themeOverride', themeOverride);
detectThemeAndSwitchStyle();
}
}
function switchTheme(themeOverride) {
localStorage.setItem('themeOverride', themeOverride);
detectThemeAndSwitchStyle();
}
detectThemeAndSwitchStyle();
darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
</script>
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
{% endif %}
</script>
{% endif %}