feat: remove dark mode toggle, switch to prefers-color-scheme

This means it's not possible to manually change the theme, but all major operating systems
support global dark mode now, so it shouldn't be a huge problem.
Will re-add the dark mode toggle if the Sec-CH-Prefers-Color-Scheme header gets added to Firefox and Safari.

Foxnouns.Frontend/app/routes/$username/route.tsx

@@ -13,7 +13,7 @@ import PronounLink from "~/components/PronounLink";
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const { user } = data!;
 
-	return [{ title: `@${user.username} - pronouns.cc` }];
+	return [{ title: `@${user.username} • pronouns.cc` }];
 };
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -21,7 +21,7 @@ import ErrorAlert from "~/components/ErrorAlert";
 import i18n from "~/i18next.server";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
+	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
 };
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {

Foxnouns.Frontend/app/routes/auth.log-in/route.tsx

@@ -21,7 +21,7 @@ import ErrorAlert from "~/components/ErrorAlert";
 import { User } from "~/lib/api/user";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	return [{ title: `${data?.meta.title || "Log in"} - pronouns.cc` }];
+	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
 };
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({ actionResult }) => {

Foxnouns.Frontend/app/routes/auth.welcome/route.tsx

@@ -7,7 +7,7 @@ import { Link, useLoaderData } from "@remix-run/react";
 import { Button } from "react-bootstrap";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	return [{ title: `${data?.meta.title || "Welcome"} - pronouns.cc` }];
+	return [{ title: `${data?.meta.title || "Welcome"} • pronouns.cc` }];
 };
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {

Foxnouns.Frontend/app/routes/dark-mode/route.tsx

@@ -4,6 +4,13 @@ import serverRequest, { getCookie, writeCookie } from "~/lib/request.server";
 
 // Handles theme switching
 // Remix itself handles redirecting back to the original page after the setting is set
+//
+// Note: this function is currently unused. Bootstrap only lets us switch themes with either prefers-color-scheme
+// *or* a programmatic switch using data-bs-theme, not both.
+// If the Sec-CH-Prefers-Color-Scheme header (https://caniuse.com/mdn-http_headers_sec-ch-prefers-color-scheme)
+// is added to Firefox and Safari, the dark mode setting should be reworked to use it instead.
+// As it stands, using prefers-color-scheme is the only way
+// to respect the operating system's dark mode setting without using JavaScript.
 export const action: ActionFunction = async ({ request }) => {
 	const body = await request.formData();
 	const theme = (body.get("theme") as string | null) || "auto";
@@ -13,7 +20,7 @@ export const action: ActionFunction = async ({ request }) => {
 		await serverRequest<UserSettings>("PATCH", "/users/@me/settings", {
 			token,
 			body: {
-				dark_mode: theme === "auto" ? null : theme === "dark" ? true : false,
+				dark_mode: theme === "auto" ? null : theme === "dark",
 			},
 		});