diff --git a/css/style.css b/css/style.css index a37bde0..7d49229 100644 --- a/css/style.css +++ b/css/style.css @@ -39,6 +39,16 @@ body font-size: 36pt; } +#darkSwitch +{ + float: right; + height: 100%; + position: relative; + top: -10px; + left: -15px; + cursor: pointer; +} + #content { padding-bottom: 50px; diff --git a/index.php b/index.php index 0291121..c70febe 100644 --- a/index.php +++ b/index.php @@ -48,7 +48,7 @@ else - +
@@ -66,6 +66,7 @@ else
diff --git a/js/base.js b/js/base.js index 64b1c6e..6162748 100644 --- a/js/base.js +++ b/js/base.js @@ -215,4 +215,40 @@ $(function () var urlQuery = new URLSearchParams(window.location.search); if(urlQuery.get("from") == null || urlQuery.get("to") == null) randomizePonies(0); -}); \ No newline at end of file + + // Switch to dark/light mode + function switchMode() + { + var darkSwitch = $("#darkSwitch")[0]; + + // Switch to dark mode + if(darkSwitch.dataset["mode"] == "light") + { + $("#darkSheet")[0].media = "screen"; + darkSwitch.dataset["mode"] = "dark"; + darkSwitch.src = "mode_dark.png"; + darkSwitch.title = "Switch to Light Mode"; + } + // Switch to light mode + else + { + $("#darkSheet")[0].media = "not all"; + darkSwitch.dataset["mode"] = "light"; + darkSwitch.src = "mode_light.png"; + darkSwitch.title = "Switch to Dark Mode"; + } + } + + // If dark mode is the default, change the switch button + var darkDefault = window.matchMedia("screen and (prefers-color-scheme: dark)").matches; + + if(darkDefault) + { + switchMode(); + } + + // Handle clicking on mode switch + $("#darkSwitch").click(function (e) { + switchMode(); + }); +}); diff --git a/mode_dark.png b/mode_dark.png new file mode 100644 index 0000000..5658fb9 Binary files /dev/null and b/mode_dark.png differ diff --git a/mode_light.png b/mode_light.png new file mode 100644 index 0000000..de55608 Binary files /dev/null and b/mode_light.png differ