Theme Provider

FREE

Açık/koyu/sistem modu, marka rengi, köşe ve yazı tipini tüm uygulamaya uygulayan, ziyaretçi başına hatırlayan ve açılışta renk sıçraması yapmayan tema sağlayıcı. ThemeCustomizer ile kullanıcı kendisi değiştirir.

Kurulum

Terminal

npx @bloxa/cli add theme-provider
# or: npx shadcn@latest add @bloxa/theme-provider

Ayrıca kurulur: theme-customizer

Terminal

npx shadcn@latest add @bloxa/theme-customizer

Örnekler

Tema özelleştirici

Palet düğmesiyle renk, köşe ve yazı tipini değiştir. Örnek yalnız bu kutuyu etkiler; uygulamada tüm sayfaya uygulanır.

Weekly report

NEW

Open the palette to change color, radius and font.

Goal%64

Email me

Sayfa içinde panel ve useTheme

Ayar sayfası için ThemePanel; seçimler useTheme ile okunur.

Renk

Köşe yuvarlaklığı12px

Yazı tipi

{
  "resolvedMode": "dark",
  "color": "#3b82f6",
  "radius": null,
  "font": null
}

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

ThemeProvider

Kök layout'u sar. Açılışta sıçrama olmaması için aynı prop'larla <ThemeScript /> bileşenini <head> içine koy.

Özellik	Tip	Varsayılan	Açıklama
defaults	Partial<ThemeSettings>	{ mode: "system" }	Ziyaretçi değiştirmeden önceki değerler (mode, color, radius, font).
fonts	ThemeFont[]	Sans, Serif, Mono, Rounded	Sunulan yazı tipleri: { id, label, family }. Web fontlarını kendin yükle.
colors	string[]	10 colors	Paletteki hazır renkler (hex).
storageKey	string \| null	"bloxa-theme-settings"	localStorage anahtarı; null yalnız bu ziyaret için tutar.
target	RefObject<HTMLElement>	—	Tüm sayfa yerine yalnız bu elemana uygula.

useTheme()

Mevcut değerler ve değiştiriciler.

Özellik	Tip	Varsayılan	Açıklama
mode / resolvedMode	"system" \| "light" \| "dark"	—	Seçilen mod ve gerçekte gösterilen (light/dark).
setMode, setColor, setRadius, setFont	(value) => void	—	Değeri değiştirir; null varsayılana döner.
reset	() => void	—	Tüm seçimleri sıfırlar.

ThemeCustomizer

Özellik	Tip	Varsayılan	Açıklama
sections	("mode" \| "color" \| "radius" \| "font")[]	all	Gösterilecek bölümler ve sırası.
radiusRange	[number, number]	[0, 24]	Köşe kaydırıcısının aralığı (px).
trigger	ReactElement	—	Kendi açma düğmen; varsayılan palet ikonu.
side / align	string	"bottom" / "end"	Panelin açılacağı yön ve hizası.

ThemePanel

Açılır pencere olmadan aynı kontroller; ayar sayfası veya çekmece için.

ThemeModeToggle

Özellik	Tip	Varsayılan	Açıklama
modes	("light" \| "dark" \| "system")[]	["light", "dark", "system"]	Sunulan modlar ve sırası.
size	"sm" \| "md"	"md"	Düğme boyutu.