feat: support toggling light or dark color schemes

Fixes HP-375.
2026-09-03 18:55:41 +00:00 · 2026-04-26 18:06:09 -04:00
parent 3026b33834
commit ac6f9e4f7e
6 changed files with 182 additions and 6 deletions
@@ -1,5 +1,12 @@
 import type { MetaFunction } from "react-router";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  unstable_useRoute as useRoute,
+} from "react-router";

 import { LiveDataProvider } from "~/utils/live-data";
 import ToastProvider from "~/utils/toast-provider";
@@ -9,6 +16,7 @@ import { ErrorBanner } from "./components/error-banner";

 import "@fontsource-variable/inter/opsz.css";
 import "./tailwind.css";
+import { getColorScheme } from "./utils/color-scheme";

 export const meta: MetaFunction = () => [
  { title: "Headplane" },
@@ -18,13 +26,29 @@ export const meta: MetaFunction = () => [
  },
 ];

+export async function loader({ request }: Route.LoaderArgs) {
+  const colorScheme = await getColorScheme(request);
+  return { colorScheme };
+}
+
 export function Layout({ children }: { readonly children: React.ReactNode }) {
+  const { loaderData } = useRoute("root");
+
  // LiveDataProvider is wrapped at the top level since dialogs and things
  // that control its state are usually open in portal containers which
  // are not a part of the normal React tree.
  return (
    <LiveDataProvider>
-      <html lang="en">
+      <html
+        lang="en"
+        className={
+          loaderData?.colorScheme === "dark"
+            ? "dark"
+            : loaderData?.colorScheme === "light"
+              ? "light"
+              : ""
+        }
+      >
        <head>
          <meta charSet="utf-8" />
          <meta content="width=device-width, initial-scale=1" name="viewport" />