From 7fbb69cc6050c1cbf3ffbfce7b47e1d1710afaae Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Wed, 25 Oct 2023 16:20:51 +0000
Subject: [PATCH] Improve downloaded replays

They now support small windows/screens and dark mode.
---
 js/replay-embed.template.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/js/replay-embed.template.js b/js/replay-embed.template.js
index 74ea79744..97b88b574 100644
--- a/js/replay-embed.template.js
+++ b/js/replay-embed.template.js
@@ -79,6 +79,7 @@ var Replays = {
 			log: log.split('\n'),
 			isReplay: true,
 			paused: true,
+			autoresize: true,
 		});
 
 		this.$('.replay-controls-2').html('<div class="chooser leftchooser speedchooser"> <em>Speed:</em> <div><button value="hyperfast">Hyperfast</button><button value="fast">Fast</button><button value="normal" class="sel">Normal</button><button value="slow">Slow</button><button value="reallyslow">Really Slow</button></div> </div> <div class="chooser colorchooser"> <em>Color&nbsp;scheme:</em> <div><button class="sel" value="light">Light</button><button value="dark">Dark</button></div> </div> <div class="chooser soundchooser" style="display:none"> <em>Music:</em> <div><button class="sel" value="on">On</button><button value="off">Off</button></div> </div>');
@@ -207,3 +208,12 @@ var Replays = {
 window.onload = function () {
 	Replays.init();
 };
+
+if (window.matchMedia) {
+	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		document.body.className = 'dark';
+	}
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {
+		document.body.className = event.matches ? "dark" : "";
+	});
+}