public/header.js

@@ -3,24 +3,28 @@ function displayHeader() {
         {
             href: "/",
             name: "Home",
+            accessKey: "h",
         },
         {
             href: "/register/",
             name: "Register",
+            accessKey: "r",
         },
         {
             href: "/login/",
             name: "Login",
+            accessKey: "l",
         },
         {
             href: "/upload/",
             name: "Upload",
+            accessKey: "u",
         },
-    ].map(({name, href}) => {
+    ].map(({name, href, accessKey}) => {
         if (href === window.location.pathname) {
-            return `<a href="${href}"><b>${name}</b></a>`
+            return `<a href="${href}" accesskey="${accessKey}"><b>${name}</b></a>`
         } else {
-            return `<a href="${href}">${name}</a>`
+            return `<a href="${href}" accesskey="${accessKey}">${name}</a>`
         }
     }).join(" - ");
 

public/style.css

@@ -13,7 +13,14 @@ body {
     text-align: center;
     font-family: system-ui, sans-serif;
     background-color: #dff3f1;
-    color: black;
+    color: #211;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #211;
+    color: #dff3f1;
+  }
 }
 
 .mao-error {