diff --git a/main.js b/main.js
index 9d1f29c10c4728f9d7f49875260bf7a8d660a3a5..82aea64cc30a09762a84d1522451852b14455c71 100644
--- a/main.js
+++ b/main.js
@@ -186,6 +186,14 @@ const server = http.createServer((req, res) => {
return send_file(res, 200, './static/door_unisfa_closed.jpg', 'image/jpeg');
}
+ if (req.url === '/static/style.css') {
+ return send_file(res, 200, './static/style.css', 'text/css');
+ }
+
+ if (req.url === '/static/darkmode.js') {
+ return send_file(res, 200, './static/darkmode.js', 'text/javascript');
+ }
+
return send_error(res, 404);
});
diff --git a/pages/ucc_door_closed.html b/pages/ucc_door_closed.html
index 1ad1f17447a910d61d1e5035fa851892cffe9627..f97bb8c0c70207b3e1f3fd03324a08b54bb4c4e8 100644
--- a/pages/ucc_door_closed.html
+++ b/pages/ucc_door_closed.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door is currently closed.</p>
<img
@@ -14,6 +16,7 @@
alt="A plain image of the UCC door. Surely nothing sinister lies within..."
title="A plain image of the UCC door. Surely nothing sinister lies within..."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/ucc_door_open.html b/pages/ucc_door_open.html
index 761b502dadcc127e8e1e736ebd154e2c39a39968..b8dc468d709d6960313277abb78eeb70f8003ef4 100644
--- a/pages/ucc_door_open.html
+++ b/pages/ucc_door_open.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door is currently open!</p>
<p>Opened by: <span id="opener"></span></p>
@@ -24,6 +26,7 @@
});
});
</script>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/ucc_door_unavail.html b/pages/ucc_door_unavail.html
index 5ea836b2c444a221a54da3a153d7aa6974bca600..8ea943d9a0969e9cf088db9d363c209609a733fd 100644
--- a/pages/ucc_door_unavail.html
+++ b/pages/ucc_door_unavail.html
@@ -3,10 +3,13 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door sensor is currently unavailable. Sorry :-(</p>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_closed.html b/pages/unisfa_door_closed.html
index 02c27a0f7532aee8b084a31a20a826c4b5a23775..28b29de1c196b4c66f393f5fe1c654aab2e9aa76 100644
--- a/pages/unisfa_door_closed.html
+++ b/pages/unisfa_door_closed.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door is currently closed.</p>
<img
@@ -14,6 +16,7 @@
alt="A plain image of the Unisfa door. There are some posters stuck upon it."
title="A plain image of the Unisfa door. There are some posters stuck upon it."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_open.html b/pages/unisfa_door_open.html
index e4e4024d2f1b47bdebe6d0d575b589686e418a67..0bb2161c7a529d7a45b59b3ef3247f2eb12b258d 100644
--- a/pages/unisfa_door_open.html
+++ b/pages/unisfa_door_open.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door is currently open!</p>
<img
@@ -14,6 +16,7 @@
alt="The door is open, however the Guardian of the Books blocks your path. Tread carefully..."
title="The door is open, however the Guardian of the Books blocks your path. Tread carefully..."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_unavail.html b/pages/unisfa_door_unavail.html
index 1b8293c1398b34c5047189bffdf563cff81af55c..a445da55c8726a3d7c2796b7a7f5144509132fd5 100644
--- a/pages/unisfa_door_unavail.html
+++ b/pages/unisfa_door_unavail.html
@@ -3,10 +3,13 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door sensor is currently unavailable. Sorry :-(</p>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/static/darkmode.js b/static/darkmode.js
new file mode 100644
index 0000000000000000000000000000000000000000..619726da046679c7aca196ee4fa90375095b0936
--- /dev/null
+++ b/static/darkmode.js
@@ -0,0 +1,17 @@
+const darkmode = () => {
+ const DARK_FRAG = "#dark";
+ const DARK_CLASS = "dark";
+ const rootClasses = document.documentElement.classList;
+ const hash = window.location.hash;
+
+ if (hash === DARK_FRAG) {
+ rootClasses.add(DARK_CLASS);
+ }
+ else {
+ rootClasses.remove(DARK_CLASS);
+ }
+};
+
+window.onhashchange = darkmode;
+
+darkmode();
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..2482bcfcb1d354f46b67f38568bc8e97bfadaa14
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,3 @@
+.dark {
+ filter: invert(100%);
+}