revert(web): restore theme toggle — gcr extension, not next-themes, was the issue
I incorrectly removed next-themes thinking it caused the hydration warning. The actual mismatch was a `__gcrremoteframetoken` attribute added to <html> by a browser extension, which the previous commit already addressed via `suppressHydrationWarning`. Restored: - ThemeProvider wrap in the layout - ThemeToggle component - Sonner Toaster's useTheme() so toasts respect the chosen theme - Appearance card on the Settings page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5c3348ef2d
commit
e6f4e3b2e5
@ -1,5 +1,6 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { GeistSans } from "geist/font/sans";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { AppShell } from "@/components/app-shell";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import "./globals.css";
|
||||
@ -21,15 +22,19 @@ export const viewport: Viewport = {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
// `suppressHydrationWarning` here is for *attribute* differences only.
|
||||
// Browser extensions (password managers, accessibility tools, the
|
||||
// Google `__gcrremoteframetoken` injector, etc.) commonly add data-/
|
||||
// dunder attributes to the <html> element after the document loads,
|
||||
// which React 19 otherwise flags as a hydration mismatch. Children
|
||||
// are still hydration-checked normally.
|
||||
// Two sources legitimately mutate <html>/<body> attributes after the
|
||||
// document loads:
|
||||
// - next-themes adds the `class="light|dark"` (and the colour-scheme
|
||||
// style) before React hydrates,
|
||||
// - browser extensions inject dunder attributes like
|
||||
// `__gcrremoteframetoken`, password-manager flags, etc.
|
||||
// Children are still hydration-checked normally so real bugs surface.
|
||||
<html lang="en" suppressHydrationWarning className={GeistSans.className}>
|
||||
<body suppressHydrationWarning>
|
||||
<ThemeProvider>
|
||||
<AppShell>{children}</AppShell>
|
||||
<Toaster richColors position="top-right" />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { getSeededOperator } from "@/lib/operator";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
|
||||
export default async function SettingsPage() {
|
||||
const op = await getSeededOperator();
|
||||
@ -23,6 +24,16 @@ export default async function SettingsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Appearance</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div className="text-sm text-muted-foreground">Theme</div>
|
||||
<ThemeToggle />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
cm WhatsApp Bot · self-hosted
|
||||
</p>
|
||||
|
||||
20
apps/web/src/components/theme-provider.tsx
Normal file
20
apps/web/src/components/theme-provider.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
import type { ComponentProps } from "react";
|
||||
|
||||
type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return (
|
||||
<NextThemesProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</NextThemesProvider>
|
||||
);
|
||||
}
|
||||
42
apps/web/src/components/theme-toggle.tsx
Normal file
42
apps/web/src/components/theme-toggle.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
import { Moon, Sun, Monitor } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme, theme } = useTheme();
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
{theme === "dark" ? (
|
||||
<Moon className="size-4" />
|
||||
) : theme === "light" ? (
|
||||
<Sun className="size-4" />
|
||||
) : (
|
||||
<Monitor className="size-4" />
|
||||
)}
|
||||
<span className="ml-2 capitalize">{theme ?? "system"}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
<Sun className="mr-2 size-4" /> Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
<Moon className="mr-2 size-4" /> Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
<Monitor className="mr-2 size-4" /> System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@ -1,12 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme="light"
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user