137 lines
4.5 KiB
HTML
137 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ page.title }}</title>
|
|
<base href="{{{ page_url }}}">
|
|
<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
|
|
<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
|
|
<link rel="stylesheet" href="/_assets/colors.css">
|
|
<link rel="stylesheet" href="/_assets/theme-animation.css">
|
|
<link rel="stylesheet" href="/_assets/typography.css">
|
|
<link rel="stylesheet" href="/_assets/structure.css">
|
|
<link rel="stylesheet" href="/_assets/forms-inputs.css">
|
|
<link rel="stylesheet" href="/_assets/figures.css">
|
|
<link rel="stylesheet" href="/_assets/prism.css">
|
|
<link rel="stylesheet" href="/_assets/breadcrumb.css">
|
|
<link rel="stylesheet" href="/_assets/color-theme-preview.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<p>This page can be used to preview all of the built-in color themes.</p>
|
|
<p>Select a color theme to see the sample content below in that theme.</p>
|
|
|
|
<select id="color-theme-selector">
|
|
{{# theme_groups.light.length }}
|
|
<optgroup label='Themes labeled: "light"'>
|
|
{{# theme_groups.light }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.light }}
|
|
</optgroup>
|
|
{{/ theme_groups.light.length }}
|
|
{{# theme_groups.dark.length }}
|
|
<optgroup label='Themes labeled: "dark"'>
|
|
{{# theme_groups.dark }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.dark }}
|
|
</optgroup>
|
|
{{/ theme_groups.dark.length }}
|
|
{{# theme_groups.high_contrast.length }}
|
|
<optgroup label='Themes labeled: "high_contrast"'>
|
|
{{# theme_groups.high_contrast }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.high_contrast }}
|
|
</optgroup>
|
|
{{/ theme_groups.high_contrast.length }}
|
|
{{# theme_groups.low_contrast.length }}
|
|
<optgroup label='Themes labeled: "low_contrast"'>
|
|
{{# theme_groups.low_contrast }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.low_contrast }}
|
|
</optgroup>
|
|
{{/ theme_groups.low_contrast.length }}
|
|
{{# theme_groups.monochrome.length }}
|
|
<optgroup label='Themes labeled: "monochrome"'>
|
|
{{# theme_groups.monochrome }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.monochrome }}
|
|
</optgroup>
|
|
{{/ theme_groups.monochrome.length }}
|
|
{{# theme_groups.greyscale.length }}
|
|
<optgroup label='Themes labeled: "greyscale"'>
|
|
{{# theme_groups.greyscale }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.greyscale }}
|
|
</optgroup>
|
|
{{/ theme_groups.greyscale.length }}
|
|
{{# theme_groups.protanopia_safe.length }}
|
|
<optgroup label='Themes labeled: "protanopia_safe"'>
|
|
{{# theme_groups.protanopia_safe }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.protanopia_safe }}
|
|
</optgroup>
|
|
{{/ theme_groups.protanopia_safe.length }}
|
|
{{# theme_groups.deuteranopia_safe.length }}
|
|
<optgroup label='Themes labeled: "deuteranopia_safe"'>
|
|
{{# theme_groups.deuteranopia_safe }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.deuteranopia_safe }}
|
|
</optgroup>
|
|
{{/ theme_groups.deuteranopia_safe.length }}
|
|
{{# theme_groups.tritanopia_safe.length }}
|
|
<optgroup label='Themes labeled: "tritanopia_safe"'>
|
|
{{# theme_groups.tritanopia_safe }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.tritanopia_safe }}
|
|
</optgroup>
|
|
{{/ theme_groups.tritanopia_safe.length }}
|
|
{{# theme_groups.all.length }}
|
|
<optgroup label="All Themes">
|
|
{{# theme_groups.all }}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{{/ theme_groups.all }}
|
|
</optgroup>
|
|
{{/ theme_groups.all.length }}
|
|
</select>
|
|
|
|
<noscript>
|
|
<p>This preview requires JavaScript to work</p>
|
|
</noscript>
|
|
|
|
<script>
|
|
const select = document.getElementById('color-theme-selector');
|
|
select.value = window.matchMedia('(prefers-color-scheme: dark)') ? 'Minimal Dark' : 'Minimal Light';
|
|
document.body.setAttribute('data-color-theme', select.value);
|
|
|
|
setTimeout(() => {
|
|
document.body.setAttribute('data-color-transition-enabled', '');
|
|
}, 10);
|
|
|
|
select.addEventListener('change', () => {
|
|
const new_theme = select.value;
|
|
|
|
if (new_theme) {
|
|
document.body.setAttribute('data-color-theme', new_theme);
|
|
}
|
|
|
|
else {
|
|
document.body.removeAttribute('data-color-theme');
|
|
}
|
|
});
|
|
</script>
|
|
</header>
|
|
|
|
{{> breadcrumb.html }}
|
|
|
|
<main>
|
|
{{> .content }}
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="left">Built with docs2website at <time datetime="{{ build_time.iso }}">{{ build_time.rfc2822 }}</time></p>
|
|
<p class="right">Copyright 2023 James Brumond</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |