useRootStyles

خواندن CSS variables تم در runtime — واکنش‌پذیر به تغییر تم

معرفی

هوک useRootStyles computed styles المان <html> را برمی‌گرداند و هنگام تغییر تم (class یا data-theme attribute) به‌روزرسانی می‌شود. این هوک پایه‌ای‌ترین ابزار برای خواندن CSS variables در runtime است.

چه زمانی استفاده کنیم

خواندن مقدار CSS variables در runtime (مثلاً برای canvas یا SVG)
کتابخانه‌های charting که نیاز به مقادیر رنگی resolved دارند
محاسبات رنگی پویا بر اساس تم فعلی

چه زمانی استفاده نکنیم

برای استایل‌دهی ساده — از Tailwind token classes استفاده کنید
برای نمودارها — از useChartTheme استفاده کنید که سطح بالاتری از abstraction ارائه می‌دهد

استفاده

import { useRootStyles } from '@parto-system-design/ui'

function CanvasChart() {
  const styles = useRootStyles()
  const canvasRef = React.useRef<HTMLCanvasElement>(null)

  React.useEffect(() => {
    if (!styles || !canvasRef.current) return

    const ctx = canvasRef.current.getContext('2d')
    if (!ctx) return

    // خواندن رنگ brand از CSS variables
    const brandColor = styles.getPropertyValue('--brand-default').trim()
    ctx.fillStyle = `hsl(${brandColor})`
    ctx.fillRect(0, 0, 100, 100)
  }, [styles])

  return <canvas ref={canvasRef} width={400} height={300} />
}

پارامترها

این هوک هیچ پارامتری دریافت نمی‌کند.

مقدار بازگشتی

نوع	توضیح
`CSSStyleDeclaration \| null`	computed styles المان root، یا `null` در SSR

جزئیات فنی

واکنش‌پذیر به: تغییر class attribute (روشن/تاریک)، تغییر data-theme attribute، و تغییر prefers-color-scheme سیستم عامل
SSR-safe: در سرور null برمی‌گرداند
مکانیزم: MutationObserver برای attribute ها + matchMedia listener برای تم سیستم

هوک‌های مرتبط

برای نمودارها از abstraction سطح بالاتر استفاده کنید → useChartTheme
برای تشخیص جهت متن → useDocumentDirection

ویرایش در GitHub

useScrollLock

قفل کردن اسکرول body — مناسب برای modal و drawer

useChartTheme

رنگ‌ها و استایل‌های نمودار از CSS variables — واکنش‌پذیر به تغییر تم

در این صفحه