docs/index.html

<!-- https://stackoverflow.com/a/67983449/8302811 -->

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<style>
			#canvas {
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				position: fixed;
			}

			html, body {
				margin: 0 !important;
				padding: 0 !important;
			}
		</style>
	</head>

	<body>

		<!-- Create the canvas that the C++ code will draw into -->
		<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

		<!-- Allow the C++ to access the canvas element -->
		<script type='text/javascript'>
			//https://stackoverflow.com/a/57795495/8302811
			let dark_mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if(dark_mode) {
				document.body.style.backgroundColor = "black";
			}

			var Module = {
				canvas: ( function () { return document.getElementById( 'canvas' ); } )(),
				// Uncomment this to enable mouse wheel
				// arguments: ["--wheel"]
				arguments: [dark_mode ? "--dark" : "--light"]
			};
		</script>

		<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
		<script async src="./main.js"></script>

	</body>

</html>