<!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>