Next.js 16'da @wrksz/themes ile Açık ve Koyu Tema

Modern uygulamalar hem açık hem de koyu ortamlarda rahat bir kullanıcı deneyimi sunmalıdır.

Tema yönetimi dışarıdan basit görünür, ancak tam bir uygulama tema durumu, sistem tercihleri, kalıcılık ve hydration problemlerinin yönetilmesini gerektirir.

Önceki makalede bağımlılık kullanmadan manuel bir tema sistemi oluşturduk. Bu makalede daha temiz ve üretime hazır bir çözüm oluşturmak için @wrksz/themes kullanacağız.

Ne Oluşturacağız

Son sistem şunları destekler:

• Açık mod
• Koyu mod
• Sistem tercihi
• Tema kalıcılığı
• Tailwind CSS entegrasyonu
• SSR güvenli render

Akış:

Kullanıcı temayı değiştirir
        |
        v
@wrksz/themes durumu yönetir
        |
        v
HTML tema sınıfı değişir
        |
        v
CSS değişkenleri güncellenir
        |
        v
Uygulama arayüzü güncellenir

Proje Teknolojileri

• Next.js 16 App Router
• React 19
• TypeScript
• Tailwind CSS v4
• @wrksz/themes

Kurulum

bun add lucide-react @wrksz/themes

ThemeProvider Ekleme

import { ThemeProvider } from '@wrksz/themes/next';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Theme Toggle Oluşturma

'use client';
 
import { useTheme } from '@wrksz/themes/client';
import { Moon, Sun } from 'lucide-react';
 
export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
 
  const isDark = resolvedTheme === 'dark';
 
  return (
    <button
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
      className="hover:bg-muted rounded-full border p-3 transition"
      aria-label="Theme toggle"
    >
      {isDark ? <Moon size={20} /> : <Sun size={20} />}
    </button>
  );
}

Kullanılabilir Temalar

Uygulama şunları destekler:

• light
• dark
• system

System modu şunu takip eder:

prefers-color-scheme

Tailwind CSS Entegrasyonu

Aktif tema HTML sınıfı üzerinden uygulanır:

<html class="dark"></html>

CSS değişkenleri tema renklerini tanımlayabilir:

:root {
  --background: #ffffff;
}
 
.dark {
  --background: #10131c;
}

Bileşenler anlamsal renkleri kullanır:

<div className="bg-background text-foreground">Content</div>

Hydration Yönetimi

Tema sistemleri hydration mismatch oluşturabilir çünkü sunucu kullanıcının tarayıcı tercihini bilmez.

Sunucu ve istemci çıktıları başlangıçta farklı olabilir.

@wrksz/themes bu süreci kolaylaştırmak için Next.js entegrasyonu sağlar.

Native Uygulama ve @wrksz/themes Karşılaştırması

Native uygulama öğrenmek için faydalıdır:

• React Context
• localStorage
• matchMedia
• DOM manipulation
• hydration handling

@wrksz/themes kullanımı şunları sağlar:

• Daha az kod
• Daha temiz API
• Daha kolay bakım
• Üretim için uygun çözüm

Sonuç

Tema sistemlerinin iç çalışma mantığını anlamak önemlidir.

Ancak üretim uygulamaları genellikle özel çözümler kullanarak geliştirme sürecini kolaylaştırır.

@wrksz/themes, modern Next.js uygulamalarına açık, koyu ve sistem temalarını eklemek için basit ve sürdürülebilir bir yöntem sağlar.