@radix-ui/themes/dist/esm/components/theme.js

[](https://radix-ui.com/themes)

"use client";import*as e from"react";import E from"classnames";import*as G from"@radix-ui/react-tooltip";import{DirectionProvider as D}from"@radix-ui/react-direction";import{Slot as w}from"@radix-ui/react-slot";import{getMatchingGrayColor as N}from"../helpers/index.js";import{themePropDefs as a}from"../props/index.js";const m=()=>{},b=e.createContext(void 0);function H(){const o=e.useContext(b);if(o===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return o}const I=e.forwardRef((o,c)=>e.useContext(b)===void 0?e.createElement(G.Provider,{delayDuration:200},e.createElement(D,{dir:"ltr"},e.createElement(R,{...o,ref:c}))):e.createElement(A,{...o,ref:c}));I.displayName="Theme";const R=e.forwardRef((o,c)=>{const{appearance:r=a.appearance.default,accentColor:l=a.accentColor.default,grayColor:s=a.grayColor.default,panelBackground:p=a.panelBackground.default,radius:n=a.radius.default,scaling:t=a.scaling.default,hasBackground:i=a.hasBackground.default,...u}=o,[h,d]=e.useState(r);e.useEffect(()=>d(r),[r]);const[T,g]=e.useState(l);e.useEffect(()=>g(l),[l]);const[y,C]=e.useState(s);e.useEffect(()=>C(s),[s]);const[v,f]=e.useState(p);e.useEffect(()=>f(p),[p]);const[k,x]=e.useState(n);e.useEffect(()=>x(n),[n]);const[P,B]=e.useState(t);return e.useEffect(()=>B(t),[t]),e.createElement(A,{...u,ref:c,isRoot:!0,hasBackground:i,appearance:h,accentColor:T,grayColor:y,panelBackground:v,radius:k,scaling:P,onAppearanceChange:d,onAccentColorChange:g,onGrayColorChange:C,onPanelBackgroundChange:f,onRadiusChange:x,onScalingChange:B})});R.displayName="ThemeRoot";const A=e.forwardRef((o,c)=>{const r=e.useContext(b),{asChild:l,isRoot:s,hasBackground:p,appearance:n=r?.appearance??a.appearance.default,accentColor:t=r?.accentColor??a.accentColor.default,grayColor:i=r?.resolvedGrayColor??a.grayColor.default,panelBackground:u=r?.panelBackground??a.panelBackground.default,radius:h=r?.radius??a.radius.default,scaling:d=r?.scaling??a.scaling.default,onAppearanceChange:T=m,onAccentColorChange:g=m,onGrayColorChange:y=m,onPanelBackgroundChange:C=m,onRadiusChange:v=m,onScalingChange:f=m,...k}=o,x=l?w:"div",P=i==="auto"?N(t):i,B=o.appearance==="light"||o.appearance==="dark",S=p===void 0?s||B:p;return e.createElement(b.Provider,{value:e.useMemo(()=>({appearance:n,accentColor:t,grayColor:i,resolvedGrayColor:P,panelBackground:u,radius:h,scaling:d,onAppearanceChange:T,onAccentColorChange:g,onGrayColorChange:y,onPanelBackgroundChange:C,onRadiusChange:v,onScalingChange:f}),[n,t,i,P,u,h,d,T,g,y,C,v,f])},e.createElement(x,{"data-is-root-theme":s?"true":"false","data-accent-color":t,"data-gray-color":P,"data-has-background":S?"true":"false","data-panel-background":u,"data-radius":h,"data-scaling":d,ref:c,...k,className:E("radix-themes",{light:n==="light",dark:n==="dark"},k.className)}))});A.displayName="ThemeImpl";export{I as Theme,H as useThemeContext};
//# sourceMappingURL=theme.js.map