marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): force dark mode site-wide

Browse Source
This commit is contained in:
kbot
2026-07-06 20:12:05 -05:00
parent b21a83c548
commit 7c8a4d8c52
3 changed files with 3 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@@ -55,12 +55,12 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en" className={`${fraunces.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} ${plexMono.variable}`} data-scroll-behavior="smooth" suppressHydrationWarning> <html lang="en" className={`${fraunces.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} ${plexMono.variable} dark`} data-scroll-behavior="smooth" suppressHydrationWarning>
<body className={`antialiased bg-canvas text-ink ${fraunces.className}`}> <body className={`antialiased bg-canvas text-ink ${fraunces.className}`}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="dark"
enableSystem forcedTheme="dark"
disableTransitionOnChange disableTransitionOnChange
> >
<Providers> <Providers>

2
components/layout/Header.tsx
View File

@@ -3,7 +3,6 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { m } from "motion/react"; import { m } from "motion/react";
import { ThemeToggle } from "@/components/ui/ThemeToggle";
const navLinks = [ const navLinks = [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
@@ -45,7 +44,6 @@ export function Header() {
</Link> </Link>
); );
})} })}
<ThemeToggle />
</div> </div>
</div> </div>
</m.nav> </m.nav>

25
components/ui/ThemeToggle.tsx
View File

@@ -1,25 +0,0 @@
"use client";
import { useTheme } from "@wrksz/themes/client";
import { m } from "motion/react";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<m.button
type="button"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
className="p-2 rounded-lg border border-border bg-canvas text-ink hover:border-ink transition-colors"
aria-label="Toggle theme"
>
{theme === "dark" ? (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
)}
</m.button>
);
}