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