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 type { Metadata, Viewport } from "next";
|
||||||
import { GeistSans } from "geist/font/sans";
|
import { GeistSans } from "geist/font/sans";
|
||||||
|
import { ThemeProvider } from "@/components/theme-provider";
|
||||||
import { AppShell } from "@/components/app-shell";
|
import { AppShell } from "@/components/app-shell";
|
||||||
import { Toaster } from "@/components/ui/sonner";
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
@ -21,15 +22,19 @@ export const viewport: Viewport = {
|
|||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
// `suppressHydrationWarning` here is for *attribute* differences only.
|
// `suppressHydrationWarning` here is for *attribute* differences only.
|
||||||
// Browser extensions (password managers, accessibility tools, the
|
// Two sources legitimately mutate <html>/<body> attributes after the
|
||||||
// Google `__gcrremoteframetoken` injector, etc.) commonly add data-/
|
// document loads:
|
||||||
// dunder attributes to the <html> element after the document loads,
|
// - next-themes adds the `class="light|dark"` (and the colour-scheme
|
||||||
// which React 19 otherwise flags as a hydration mismatch. Children
|
// style) before React hydrates,
|
||||||
// are still hydration-checked normally.
|
// - 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}>
|
<html lang="en" suppressHydrationWarning className={GeistSans.className}>
|
||||||
<body suppressHydrationWarning>
|
<body suppressHydrationWarning>
|
||||||
<AppShell>{children}</AppShell>
|
<ThemeProvider>
|
||||||
<Toaster richColors position="top-right" />
|
<AppShell>{children}</AppShell>
|
||||||
|
<Toaster richColors position="top-right" />
|
||||||
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { getSeededOperator } from "@/lib/operator";
|
import { getSeededOperator } from "@/lib/operator";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import { Separator } from "@/components/ui/separator";
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { ThemeToggle } from "@/components/theme-toggle";
|
||||||
|
|
||||||
export default async function SettingsPage() {
|
export default async function SettingsPage() {
|
||||||
const op = await getSeededOperator();
|
const op = await getSeededOperator();
|
||||||
@ -23,6 +24,16 @@ export default async function SettingsPage() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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">
|
<p className="text-center text-xs text-muted-foreground">
|
||||||
cm WhatsApp Bot · self-hosted
|
cm WhatsApp Bot · self-hosted
|
||||||
</p>
|
</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"
|
"use client"
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes"
|
||||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||||
|
|
||||||
const Toaster = ({ ...props }: ToasterProps) => {
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sonner
|
<Sonner
|
||||||
theme="light"
|
theme={theme as ToasterProps["theme"]}
|
||||||
className="toaster group"
|
className="toaster group"
|
||||||
icons={{
|
icons={{
|
||||||
success: (
|
success: (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user