-
` and ThemeToggle changes it in place,
+ * without a navigation, so the highlighter palette has to follow that attribute
+ * instead of sampling it once on mount. useSyncExternalStore keeps the read out of
+ * render and re-renders on attribute or OS-preference changes.
+ */
+function isDarkTheme(): boolean {
+ const attr = document.documentElement.getAttribute("data-theme");
+ if (attr === "dark") return true;
+ if (attr === "light") return false;
+ // No explicit choice recorded: fall back to the OS preference.
+ return typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function subscribeToTheme(onStoreChange: () => void): () => void {
+ const observer = new MutationObserver(onStoreChange);
+ observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+ const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+ media?.addEventListener("change", onStoreChange);
+ return () => {
+ observer.disconnect();
+ media?.removeEventListener("change", onStoreChange);
+ };
+}
+
export default function CodeBlock({
children,
className = "",
language = "",
showLineNumbers = false
}: CodeBlockProps) {
- const [isDark, setIsDark] = React.useState(false);
- React.useEffect(() => {
- const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark' ||
- (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && document.documentElement.getAttribute('data-theme') !== 'light');
- setIsDark(isDarkMode);
- }, []);
+ // Server output always uses the light palette; the client store takes over at hydration.
+ const isDark = React.useSyncExternalStore(subscribeToTheme, isDarkTheme, () => false);
// Extract language from className if provided (e.g., "lang-javascript" or "language-javascript")
const detectedLanguage = language ||
diff --git a/src/components/admin/users/UsersManager.tsx b/src/components/admin/users/UsersManager.tsx
index 416290b..f377866 100644
--- a/src/components/admin/users/UsersManager.tsx
+++ b/src/components/admin/users/UsersManager.tsx
@@ -4,6 +4,7 @@
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
+import Image from "next/image";
import { useDateFormat } from "@/lib/dateFormat.client";
import { formatDateSafe } from "@/lib/dateFormat";
import logger from '@/lib/logger';
@@ -281,9 +282,12 @@ export default function UsersManager({ initialData, filter, sort }: UsersManager
{user.image && (
- 
)}
diff --git a/src/components/auth/UserMenu.tsx b/src/components/auth/UserMenu.tsx
index 27df3ba..83102e6 100644
--- a/src/components/auth/UserMenu.tsx
+++ b/src/components/auth/UserMenu.tsx
@@ -1,6 +1,7 @@
"use client";
// SPDX-License-Identifier: Apache-2.0
import * as React from "react";
+import Image from "next/image";
import { signOut } from "next-auth/react";
type Props = {
@@ -11,8 +12,8 @@ function Avatar({ user }: Props) {
const src = user.image ?? undefined;
const initials = (user.name || user.email || "?").trim().slice(0, 2).toUpperCase();
return (
-
- {src ?  : {initials}}
+
+ {src ? : {initials}}
);
}
diff --git a/tests/components/CodeBlockTheme.test.tsx b/tests/components/CodeBlockTheme.test.tsx
new file mode 100644
index 0000000..b17a70e
--- /dev/null
+++ b/tests/components/CodeBlockTheme.test.tsx
@@ -0,0 +1,34 @@
+/** @vitest-environment jsdom */
+
+// SPDX-License-Identifier: Apache-2.0
+// The active theme is an attribute on that ThemeToggle rewrites in place, so
+// the highlighter palette must follow it. It used to sample data-theme once on
+// mount, which left already-rendered code blocks in the old palette until reload.
+import "@testing-library/jest-dom/vitest";
+import React from "react";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import CodeBlock from "@/components/CodeBlock";
+
+describe("CodeBlock palette follows the document theme", () => {
+ afterEach(() => {
+ cleanup();
+ document.documentElement.removeAttribute("data-theme");
+ });
+
+ it("re-tints when data-theme flips without a navigation", async () => {
+ document.documentElement.dataset.theme = "light";
+ const { container } = render(
+ {"const answer = 42;"}
+ );
+ const pre = container.querySelector("pre");
+ if (!pre) throw new Error("CodeBlock did not render a ");
+
+ expect(pre.style.backgroundColor).toBe("white");
+
+ document.documentElement.dataset.theme = "dark";
+
+ // MutationObserver delivers on a microtask, so poll for the re-render.
+ await expect.poll(() => pre.style.backgroundColor).toBe("rgb(30, 30, 30)");
+ });
+});
diff --git a/tests/components/auth/UserMenu.test.tsx b/tests/components/auth/UserMenu.test.tsx
index 3399f21..3fd5f93 100644
--- a/tests/components/auth/UserMenu.test.tsx
+++ b/tests/components/auth/UserMenu.test.tsx
@@ -36,7 +36,11 @@ describe("UserMenu", () => {
const img = screen.getByAltText("");
expect(img).toBeInTheDocument();
- expect(img).toHaveAttribute("src", "https://example.com/avatar.jpg");
+ // The avatar goes through next/image, so `src` is the optimizer URL and the
+ // original avatar lives in its `url` parameter; `sizes` is what keeps the
+ // fetched variant small for a 36px box.
+ expect(decodeURIComponent(img.getAttribute("src") ?? "")).toContain("https://example.com/avatar.jpg");
+ expect(img).toHaveAttribute("sizes", "36px");
});
it("should display initials when image is not provided", () => {
|