78ad84922a
All checks were successful
Deploy / deploy (push) Successful in 6m23s
- TemaSaglayici (next-themes) + alt bilgide TemaSecici - globals.css: .dark bloğunda palet token'ları çevrilir; bileşenlere dark: sınıfı yazılmaz - yüzeyler bg-white → bg-card, koyu haplar text-slate-50, SVG'lerde sabit renk yerine değişken - DESIGN.md §2.3 + tasarim-denetim kuralları (yuzey-beyaz, koyu-hap-beyaz-yazi, dark-sinif), AGENTS.md karanlık mod bölümü - docs: koyu tema denetimi raporu Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect } from "react";
|
||
import { ThemeProvider, useTheme } from "next-themes";
|
||
|
||
// Gövde zemini (bg-slate-50) — açık ve koyu temadaki karşılığı
|
||
const ZEMIN = { light: "#f8fafc", dark: "#080e19" };
|
||
|
||
/**
|
||
* Mobil adres çubuğu rengi: layout'taki `themeColor` sistemi izler; kullanıcı
|
||
* sitede sistemden farklı bir tema seçtiyse meta etiketleri ona eşitlenir.
|
||
*/
|
||
function AdresCubuguRengi() {
|
||
const { resolvedTheme } = useTheme();
|
||
useEffect(() => {
|
||
const renk = resolvedTheme === "dark" ? ZEMIN.dark : ZEMIN.light;
|
||
for (const meta of document.querySelectorAll('meta[name="theme-color"]')) {
|
||
meta.setAttribute("content", renk);
|
||
}
|
||
}, [resolvedTheme]);
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Tema (DESIGN.md §2.3): <html>'e `dark` sınıfı yazılır, renkler
|
||
* globals.css'teki `.dark` token eşlemesinden gelir. Varsayılan açık tema;
|
||
* kullanıcı footer'daki TemaSecici ile koyu ya da "sistem"e geçer, seçim
|
||
* tarayıcıda saklanır.
|
||
*/
|
||
export function TemaSaglayici({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<ThemeProvider
|
||
attribute="class"
|
||
defaultTheme="light"
|
||
enableSystem
|
||
storageKey="kt-tema"
|
||
disableTransitionOnChange
|
||
>
|
||
<AdresCubuguRengi />
|
||
{children}
|
||
</ThemeProvider>
|
||
);
|
||
}
|