Dark mode support

sawyerh · sawyerh · commit 6aed03a4da00 · 2024-12-27T12:22:20.000-08:00
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -50,7 +50,9 @@ export default function RootLayout({
 					gtag('config', 'G-ZP11FFWXRN');`}
 				</Script>
 			</head>
-			<body className={`${fontSerif.variable} ${fontSans.variable} font-sans`}>
+			<body
+				className={`${fontSerif.variable} ${fontSans.variable} font-sans bg-lightBg dark:bg-stone-900 dark:text-stone-200`}
+			>
 				{children}
 				<AI />
 			</body>
diff --git a/web/src/app/volumes/[id]/Summarize.tsx b/web/src/app/volumes/[id]/Summarize.tsx
@@ -57,7 +57,7 @@ function Summarize(props: Props) {
 		return (
 			<section
 				ref={summaryRef}
-				className="border-t-2 border-b-2 pt-9 pb-5 my-9 border-neutral-300"
+				className="border-t-2 border-b-2 pt-9 pb-5 my-9 border-neutral-300 dark:border-stone-700"
 			>
 				<h2 className="text-xl font-bold mb-4 text-center flex items-center">
 					<span className="text-yellow-600 inline-block mr-2">
@@ -72,7 +72,7 @@ function Summarize(props: Props) {
 							{result.highlight_ids.map((highlightId, index) => (
 								<sup key={highlightId}>
 									<Link
-										className="underline text-neutral-500 inline-block ml-1"
+										className="underline text-neutral-500 dark:text-stone-400 inline-block ml-1"
 										href={`/highlights/${highlightId}`}
 									>
 										{index + 1}
@@ -89,7 +89,7 @@ function Summarize(props: Props) {
 	return (
 		<div className="text-center mb-10 lg:fixed lg:right-0 lg:bottom-0 lg:pb-2 lg:pr-2 lg:m-0">
 			<button
-				className="inline-flex bg-neutral-200 hover:bg-neutral-800 hover:text-white p-1 rounded-sm items-center text-xs"
+				className="inline-flex bg-neutral-200 hover:bg-neutral-800 dark:bg-neutral-800 hover:text-white p-1 rounded-sm items-center text-xs"
 				disabled={isFetching}
 				onClick={() => setShowSummarize(true)}
 				type="button"
diff --git a/web/src/components/AI.tsx b/web/src/components/AI.tsx
@@ -260,7 +260,7 @@ export default function AI() {
 	return (
 		<QueryClientProvider client={queryClient}>
 			<button
-				className="fixed right-1 top-1 rounded-sm p-2 text-neutral-500 hover:text-black"
+				className="fixed right-1 top-1 rounded-sm p-2 text-neutral-500 hover:text-black dark:hover:text-blue-600"
 				onClick={showDialog}
 				title="Open search"
 				type="button"
diff --git a/web/src/components/Highlight.tsx b/web/src/components/Highlight.tsx
@@ -13,7 +13,7 @@ const Highlight = (props: {
 				<mark>{props.body}</mark>
 			</blockquote>
 			<Link
-				className="text-sm text-slate-600 hover:underline"
+				className="text-sm text-slate-600 dark:text-stone-400 hover:underline"
 				href={`/highlights/${props.id}`}
 				onClick={props.onLinkClick}
 				prefetch={false}
diff --git a/web/src/components/VolumeHeader.tsx b/web/src/components/VolumeHeader.tsx
@@ -24,7 +24,7 @@ const VolumeHeader = (props: { small?: boolean; volume: Volume }) => {
 					{volume.title}
 				</h1>
 				{volume.subtitle && (
-					<h2 className="text-center font-serif text-2xl font-normal italic antialiased">
+					<h2 className="text-center font-serif text-2xl font-normal italic antialiased dark:text-stone-400">
 						{volume.subtitle}
 					</h2>
 				)}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-	background-color: #f6f6f1;
-}
-
 h1,
 h2,
 h3 {
@@ -59,6 +55,10 @@ mark,
 	background-repeat: no-repeat;
 	box-decoration-break: clone;
 	color: theme("colors.black");
+
+	@media (prefers-color-scheme: dark) {
+		--mark-color: rgba(255, 226, 130, 0.75);
+	}
 }
 
 .cover-link:is(:active, :focus) .cover-link__text {
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -6,6 +6,9 @@ module.exports = {
 			aspectRatio: {
 				cover: "5 / 8",
 			},
+			colors: {
+				lightBg: "#f6f6f1",
+			},
 			fontFamily: {
 				// var's are set via @next/font
 				sans: ["var(--font-ibm-plex)", "sans-serif"],
