add dark theme

web/internal/static/styles.css

@@ -9,6 +9,48 @@ body {
   flex-direction: column;
 
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  background-color: var(--background-primary);
+  color: var(--text-primary);
+}
+
+:root {
+  --background-primary: #fff;
+  --text-primary: #1b1b1b;
+  --text-link: #0069c2;
+  --text-visited: #551a8b;
+  --accent-primary: #0085f2;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-primary: #1b1b1b;
+    --text-primary: #fff;
+    --text-link: #8cb4ff;
+    --text-visited: #ffadff;
+    --accent-primary: #5e9eff;
+  }
+}
+
+a {
+  color: var(--text-link);
+}
+
+a:active, a:active:visited {
+  background-color: var(--text-link);
+  color: #fff;
+}
+
+a:visited {
+  color: var(--text-visited);
+}
+
+:focus-visible {
+  outline-color: var(--accent-primary);
+  outline-offset: 1px;
+}
+
+input[type="submit"]:hover {
+  cursor: pointer;
 }
 
 main {

web/internal/views/pwreset.html

@@ -13,8 +13,6 @@
   </p>
   <form method="post">
     <input type="hidden" name="_csrf" value="{{ .csrf }}" />
-    <button type="submit" class="py-2 px-6 text-lg">
-      Reset my password
-    </button>
+    <input type="submit" class="py-2 px-6 text-lg" value="Reset my password" />
   </form>
 {{ end }}

web/internal/views/pwreset_confirmation.html

@@ -1,4 +1,4 @@
-{{ define "title" }}Password Reset{{ end }}
+{{ define "title" }}Password Reset Confirmation{{ end }}
 {{ define "main" }}
   <p>
     A new temporary password was sent to <b>{{ .emailAddress }}</b>.