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

Greatly simplified all of the logic; moved the JS to a separate file

Browse source
This commit is contained in:
Sumner Evans 2020-04-16 15:49:09 -06:00
parent a18c421354
commit 582adec6a4
No known key found for this signature in database
GPG key ID: 8904527AB50022FD
11 changed files with 105 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

48
templates/base.html
View file

@ -5,11 +5,7 @@
{% endif %}
<!DOCTYPE html>
<html lang="{{ DEFAULT_LANG }}"
{% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
class="{{ THEME_COLOR|default('light') }}-theme"
{% endif %}
>
<html lang="{{ DEFAULT_LANG }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -33,40 +29,36 @@
{% endif %}
{# DARK THEME STYLES #}
{% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE and not THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR == "dark" %}
<link rel="stylesheet" type="text/css"
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
{% endif %}
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
{# Enable dark mode when media query matches and .light-theme class does not exist on <html> tag #}
<link rel="stylesheet" type="text/css"
{% if THEME_COLOR|default("light") == "dark" %}
media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
{% else %}
media="(prefers-color-scheme: dark)"
{% if THEME_COLOR == "dark" or THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE %}
<link id="dark-theme-style" rel="stylesheet" type="text/css"
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
{% if THEME_COLOR|default("light") == "dark" %}
media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
{% else %}
media="(prefers-color-scheme: dark)"
{% endif %}
{% elif THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR|default("light") == "light" %}
disabled="disabled"
{% endif %}
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-not-overridden.min.css">
{% endif %}
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
{# Enable dark mode when .dark-theme class exists on <html> tag #}
<link rel="stylesheet" type="text/css"
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-has-class.min.css">
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme.min.css">
{% endif %}
{# PYGMENTS STYLES #}
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR == "dark" %}
<link rel="stylesheet" type="text/css"
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or THEME_COLOR_ENABLE_USER_OVERRIDE or THEME_COLOR == "dark" %}
<link id="pygments-dark-theme" rel="stylesheet" type="text/css"
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
{% if THEME_COLOR|default("light") == "dark" %}
media="(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)"
{% else %}
media="(prefers-color-scheme: dark)"
{% endif %}
{% elif THEME_COLOR_ENABLE_USER_OVERRIDE and THEME_COLOR|default("light") == "light" %}
disabled="disabled"
{% endif %}
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/pygments/{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE or 'monokai' }}.min.css">
{% endif %}
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %}
<link rel="stylesheet" type="text/css"
<link id="pygments-light-theme" rel="stylesheet" type="text/css"
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
{% if THEME_COLOR|default("light") == "dark" %}
media="(prefers-color-scheme: light)"
@ -143,7 +135,11 @@
{% include "partial/gtm.html" %}
{% endif %}
</head>
<body>
<body
{% if not THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
class="{{ THEME_COLOR|default('light') }}-theme"
{% endif %}
>
{% if GOOGLE_TAG_MANAGER %}
{% include "partial/gtm_noscript.html" %}
{% endif %}

58
templates/partial/flex.html
View file

@ -12,57 +12,11 @@
light_url='<a href="javascript:void(0)" onclick="theme.switch(`light`)">light</a>',
browser_url='<a href="javascript:void(0)" onclick="theme.switch(`browser`)">browser</a>'|safe)
}}
{% endif %}
</p>
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
<script>
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
{% if THEME_COLOR|default("light") == "dark" %}
const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)');
{% else %}
const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
{% endif %}
{% endif %}
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 %}
}
// 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();
}
detectThemeAndSwitchStyle();
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
{% endif %}
<script id="dark-theme-script"
src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/dark_theme/dark_theme.min.js"
data-enable-auto-detect-theme="{{ THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE|default('false') }}"
data-default-theme="{{ THEME_COLOR|default('light') }}"
type="text/javascript">
</script>
{% endif %}
</p>