Install and use prism-theme-github for light and dark mode

app/routes/_layout.$postType.$/route.tsx

@@ -6,7 +6,8 @@ import type {
 
 import { json, redirect } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
-import prism from "prismjs/themes/prism-okaidia.min.css";
+import dark from "prism-theme-github/themes/prism-theme-github-dark.css";
+import light from "prism-theme-github/themes/prism-theme-github-light.css";
 import { z } from "zod";
 
 import { Redirects } from "~/modules/redirects.server";
@@ -15,7 +16,10 @@ import { ArticleView } from "./article-view";
 import { queryArticle, queryTutorial } from "./queries";
 import { TutorialView } from "./tutorial-view";
 
-export const links: LinksFunction = () => [{ rel: "stylesheet", href: prism }];
+export const links: LinksFunction = () => [
+	{ rel: "stylesheet", href: light, media: "(prefers-color-scheme: light)" },
+	{ rel: "stylesheet", href: dark, media: "(prefers-color-scheme: dark)" },
+];
 
 export async function loader({ request, params, context }: LoaderFunctionArgs) {
 	let { postType, slug } = z

app/routes/cms_.tutorials_.new/route.tsx

@@ -1,9 +1,11 @@
 import type { action as editorAction } from "../components.editor/route";
-import type { ActionFunctionArgs } from "@remix-run/cloudflare";
+import type { ActionFunctionArgs, LinksFunction } from "@remix-run/cloudflare";
 
 import { redirect } from "@remix-run/cloudflare";
 import { useFetcher } from "@remix-run/react";
 import { parameterize } from "inflected";
+import dark from "prism-theme-github/themes/prism-theme-github-dark.css";
+import light from "prism-theme-github/themes/prism-theme-github-light.css";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Heading } from "react-aria-components";
 import { useHydrated } from "remix-utils/use-hydrated";
@@ -23,6 +25,11 @@ import { Provider, useEditor } from "../components.editor/use-editor";
 
 import { clearCache } from "./queries";
 
+export const links: LinksFunction = () => [
+	{ rel: "stylesheet", href: light, media: "(prefers-color-scheme: light)" },
+	{ rel: "stylesheet", href: dark, media: "(prefers-color-scheme: dark)" },
+];
+
 export const handle: SDX.Handle = { hydrate: true };
 
 export async function action({ request, context }: ActionFunctionArgs) {

package.json

@@ -66,6 +66,7 @@
 		"isbot": "^4.4.0",
 		"lucide-react": "^0.315.0",
 		"nprogress": "^0.2.0",
+		"prism-theme-github": "^1.0.1",
 		"prismjs": "^1.29.0",
 		"react": "^18.2.0",
 		"react-aria": "^3.31.1",