@stigmer/react 0.0.92 → 0.0.94

package/src/oauth-app/OAuthAppDetailPanel.tsx

@@ -212,7 +212,7 @@ export function OAuthAppDetailPanel({
               onClick={enterEdit}
               className={cn(
                 "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "transition-colors",
               )}
             >
@@ -226,7 +226,7 @@ export function OAuthAppDetailPanel({
               }}
               className={cn(
                 "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-                "text-destructive/70 hover:text-destructive hover:bg-destructive/10",
+                "text-destructive-muted hover:text-destructive hover:bg-destructive-subtle",
                 "transition-colors",
               )}
             >
@@ -239,7 +239,7 @@ export function OAuthAppDetailPanel({
       {/* Inline delete confirmation */}
       {confirmingDelete && (
         <div
-          className="rounded-md border border-destructive/30 bg-destructive/5 p-3"
+          className="rounded-md border border-destructive/30 bg-destructive-subtle p-3"
           role="alert"
         >
           <p className="text-foreground mb-2 text-xs font-medium">
@@ -261,7 +261,7 @@ export function OAuthAppDetailPanel({
               disabled={isDeleting}
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-                "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
                 "disabled:pointer-events-none disabled:opacity-40",
               )}
             >
@@ -277,7 +277,7 @@ export function OAuthAppDetailPanel({
               disabled={isDeleting}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >
@@ -421,7 +421,7 @@ export function OAuthAppDetailPanel({
               disabled={!canSave}
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
+                "bg-primary text-primary-foreground hover:bg-primary-hover",
                 "disabled:pointer-events-none disabled:opacity-40",
               )}
             >
@@ -434,7 +434,7 @@ export function OAuthAppDetailPanel({
               disabled={isUpdating}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >

package/src/oauth-app/OAuthAppListPanel.tsx

@@ -73,7 +73,7 @@ export function OAuthAppListPanel({
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -136,7 +136,7 @@ function OAuthAppRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 transition-colors hover:border-border"
+      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 transition-colors hover:border-border"
     >
       <OAuthIcon />
 
@@ -166,7 +166,7 @@ function OAuthAppRow({
           aria-label={`Edit ${provider}`}
           className={cn(
             "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "transition-colors",
           )}
         >

package/src/organization/CreateOrganizationForm.tsx

@@ -190,7 +190,7 @@ export function CreateOrganizationForm({
             className="text-xs font-medium text-muted-foreground"
           >
             Description{" "}
-            <span className="text-muted-foreground/60">(optional)</span>
+            <span className="text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
             id="stgm-new-org-desc"
@@ -221,7 +221,7 @@ export function CreateOrganizationForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -236,7 +236,7 @@ export function CreateOrganizationForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >

package/src/organization/OrgProfilePanel.tsx

@@ -181,7 +181,7 @@ export function OrgProfilePanel({
           onClick={refetch}
           className={cn(
             "rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
           )}
         >
           Retry
@@ -317,7 +317,7 @@ export function OrgProfilePanel({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -331,7 +331,7 @@ export function OrgProfilePanel({
             onClick={handleDiscard}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             )}
           >
             Discard
@@ -385,7 +385,7 @@ function ReadOnlyField({
           onClick={handleCopy}
           className={cn(
             "rounded px-1.5 py-0.5 text-[0.6rem]",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "transition-colors",
           )}
           aria-label={`Copy ${label}`}
@@ -412,7 +412,6 @@ function LogoPreview({ url }: { url: string }) {
 
   return (
     <div className="mt-2">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={url}
         alt="Organization logo preview"

package/src/platform-client/CreatePlatformClientForm.tsx

@@ -206,7 +206,7 @@ export function CreatePlatformClientForm({
 
       {/* JIT provisioning */}
       <fieldset className="space-y-2.5" disabled={isCreating}>
-        <hr className="border-border/40" />
+        <hr className="border-border-muted" />
         <legend className="text-xs font-medium text-foreground">
           JIT provisioning
         </legend>
@@ -267,7 +267,7 @@ export function CreatePlatformClientForm({
 
       {/* Allowed origins */}
       <fieldset className="space-y-2" disabled={isCreating}>
-        <hr className="border-border/40" />
+        <hr className="border-border-muted" />
         <legend className="text-xs font-medium text-foreground">
           Allowed origins
         </legend>
@@ -300,7 +300,7 @@ export function CreatePlatformClientForm({
             disabled={isCreating || !originInput.trim()}
             className={cn(
               "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
               "transition-colors",
             )}
@@ -314,7 +314,7 @@ export function CreatePlatformClientForm({
             {origins.map((origin) => (
               <span
                 key={origin}
-                className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
+                className="inline-flex items-center gap-1 rounded-full border border-border-muted bg-muted-subtle px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
               >
                 {origin}
                 <button
@@ -344,7 +344,7 @@ export function CreatePlatformClientForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -359,7 +359,7 @@ export function CreatePlatformClientForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >

package/src/platform-client/PlatformClientDetailPanel.tsx

@@ -276,7 +276,7 @@ export function PlatformClientDetailPanel({
             onClick={enterEdit}
             className={cn(
               "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
           >
@@ -295,7 +295,7 @@ export function PlatformClientDetailPanel({
       ) : (
         <form onSubmit={handleSave} className="space-y-3">
           {/* Read-only credential info */}
-          <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2 space-y-1">
+          <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2 space-y-1">
             <p className="text-[0.65rem] font-medium text-muted-foreground">
               Client ID
             </p>
@@ -341,7 +341,7 @@ export function PlatformClientDetailPanel({
 
           {/* JIT provisioning */}
           <fieldset className="space-y-2.5" disabled={isUpdating}>
-            <hr className="border-border/40" />
+            <hr className="border-border-muted" />
             <legend className="text-xs font-medium text-foreground">
               JIT provisioning
             </legend>
@@ -397,7 +397,7 @@ export function PlatformClientDetailPanel({
 
           {/* Allowed origins */}
           <fieldset className="space-y-2" disabled={isUpdating}>
-            <hr className="border-border/40" />
+            <hr className="border-border-muted" />
             <legend className="text-xs font-medium text-foreground">
               Allowed origins
             </legend>
@@ -430,7 +430,7 @@ export function PlatformClientDetailPanel({
                 disabled={isUpdating || !originInput.trim()}
                 className={cn(
                   "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-                  "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                  "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                   "disabled:pointer-events-none disabled:opacity-50",
                   "transition-colors",
                 )}
@@ -444,7 +444,7 @@ export function PlatformClientDetailPanel({
                 {origins.map((origin) => (
                   <span
                     key={origin}
-                    className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
+                    className="inline-flex items-center gap-1 rounded-full border border-border-muted bg-muted-subtle px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
                   >
                     {origin}
                     <button
@@ -474,7 +474,7 @@ export function PlatformClientDetailPanel({
               disabled={isUpdating}
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary/90",
+                "bg-primary text-primary-foreground hover:bg-primary-hover",
                 "disabled:pointer-events-none disabled:opacity-40",
               )}
             >
@@ -487,7 +487,7 @@ export function PlatformClientDetailPanel({
               disabled={isUpdating}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
               )}
             >
@@ -500,7 +500,7 @@ export function PlatformClientDetailPanel({
       {/* Actions bar (view mode only) */}
       {mode === "view" && (
         <div className="space-y-2 pt-2">
-          <hr className="border-border/40" />
+          <hr className="border-border-muted" />
 
           {/* Rotate Secret */}
           {confirmingRotate ? (
@@ -516,7 +516,7 @@ export function PlatformClientDetailPanel({
                   disabled={isBusy}
                   className={cn(
                     "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "bg-primary text-primary-foreground hover:bg-primary-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
@@ -532,7 +532,7 @@ export function PlatformClientDetailPanel({
                   disabled={isBusy}
                   className={cn(
                     "rounded-md px-2.5 py-1 text-xs",
-                    "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                    "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
@@ -547,7 +547,7 @@ export function PlatformClientDetailPanel({
               disabled={isBusy}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs font-medium",
-                "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
                 "transition-colors",
               )}
@@ -563,7 +563,7 @@ export function PlatformClientDetailPanel({
 
           {/* Delete */}
           {confirmingDelete ? (
-            <div className="flex items-center justify-between rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2">
+            <div className="flex items-center justify-between rounded-md border border-destructive/30 bg-destructive-subtle px-3 py-2">
               <div className="min-w-0 flex-1">
                 <p className="text-xs text-foreground">
                   Delete{" "}
@@ -583,7 +583,7 @@ export function PlatformClientDetailPanel({
                   disabled={isBusy}
                   className={cn(
                     "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                    "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
@@ -596,7 +596,7 @@ export function PlatformClientDetailPanel({
                   disabled={isBusy}
                   className={cn(
                     "rounded-md px-2.5 py-1 text-xs",
-                    "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                    "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                   )}
                 >
@@ -611,7 +611,7 @@ export function PlatformClientDetailPanel({
               disabled={isBusy}
               className={cn(
                 "rounded-md px-2.5 py-1.5 text-xs font-medium",
-                "text-destructive hover:text-destructive-foreground hover:bg-destructive/90",
+                "text-destructive hover:text-destructive-foreground hover:bg-destructive-hover",
                 "disabled:pointer-events-none disabled:opacity-50",
                 "transition-colors",
               )}
@@ -662,7 +662,7 @@ function ViewMode({
       ) : null}
 
       {/* JIT provisioning */}
-      <hr className="border-border/40" />
+      <hr className="border-border-muted" />
       <Field
         label="Auto-provision accounts"
         value={spec?.autoProvisionAccounts ? "Enabled" : "Disabled"}
@@ -681,7 +681,7 @@ function ViewMode({
       {/* Allowed origins */}
       {(spec?.allowedOrigins.length ?? 0) > 0 && (
         <>
-          <hr className="border-border/40" />
+          <hr className="border-border-muted" />
           <div>
             <dt className="text-muted-foreground text-[0.65rem] font-medium">
               Allowed origins
@@ -690,7 +690,7 @@ function ViewMode({
               {spec!.allowedOrigins.map((origin) => (
                 <span
                   key={origin}
-                  className="inline-block rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
+                  className="inline-block rounded-full border border-border-muted bg-muted-subtle px-2 py-0.5 text-[0.65rem] font-mono text-foreground"
                 >
                   {origin}
                 </span>

package/src/platform-client/PlatformClientListPanel.tsx

@@ -71,7 +71,7 @@ export function PlatformClientListPanel({
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -169,7 +169,7 @@ function PlatformClientRow({
     return (
       <div
         role="listitem"
-        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
       >
         <div className="min-w-0 flex-1">
           <p className="text-xs text-foreground">
@@ -195,7 +195,7 @@ function PlatformClientRow({
             disabled={isDeleting}
             className={cn(
               "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -208,7 +208,7 @@ function PlatformClientRow({
             disabled={isDeleting}
             className={cn(
               "rounded-md px-2.5 py-1 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -222,7 +222,7 @@ function PlatformClientRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 hover:border-border transition-colors"
+      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
     >
       <KeyIcon />
 
@@ -267,7 +267,7 @@ function PlatformClientRow({
             aria-label={`Edit ${name}`}
             className={cn(
               "shrink-0 rounded p-1",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
           >
@@ -280,7 +280,7 @@ function PlatformClientRow({
           aria-label={`Delete ${name}`}
           className={cn(
             "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+            "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle",
             "transition-colors",
           )}
         >

package/src/platform-client/PlatformClientSecretAlert.tsx

@@ -104,7 +104,7 @@ export function PlatformClientSecretAlert({
           aria-label="Dismiss"
           className={cn(
             "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "transition-colors",
           )}
         >
@@ -181,7 +181,7 @@ function CopyableField({
           aria-label={`Copy ${label}`}
           className={cn(
             "inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "transition-colors",
           )}
         >

package/src/provider.tsx

@@ -6,6 +6,8 @@ import { cn, resolvePresetClass } from "@stigmer/theme";
 import type { ThemePresetId } from "@stigmer/theme";
 import { StigmerContext } from "./context";
 import { DeploymentModeContext } from "./deployment-mode";
+import type { ColorMode, ResolvedColorMode } from "./color-mode";
+import { ColorModeContext, useSystemColorMode } from "./color-mode";
 
 /** Props for {@link StigmerProvider}. */
 export interface StigmerProviderProps {
@@ -45,6 +47,37 @@ export interface StigmerProviderProps {
    * The container always includes the `stgm` class for style isolation.
    */
   readonly className?: string;
+  /**
+   * Controls the color mode for all descendant Stigmer components.
+   *
+   * - `"light"` — light design tokens (default).
+   * - `"dark"`  — dark design tokens.
+   * - `"system"` — follows the user's OS preference via
+   *   `prefers-color-scheme`. Resolved to `"light"` or `"dark"`
+   *   before reaching CSS or React context.
+   *
+   * The resolved value is set as `data-stgm-color-mode` on the
+   * scoping container and exposed via {@link useColorMode}.
+   * Host applications pass their own theme state directly —
+   * no ancestor CSS class conventions are required.
+   *
+   * @default "light"
+   *
+   * @example
+   * ```tsx
+   * // Explicit dark mode
+   * <StigmerProvider client={client} colorMode="dark">
+   *   <ChatWidget />
+   * </StigmerProvider>
+   *
+   * // Bridge from MUI
+   * const muiMode = useTheme().palette.mode;
+   * <StigmerProvider client={client} colorMode={muiMode}>
+   *   <ChatWidget />
+   * </StigmerProvider>
+   * ```
+   */
+  readonly colorMode?: ColorMode;
 }
 
 /**
@@ -56,6 +89,11 @@ export interface StigmerProviderProps {
  * `@stigmer/react/styles.css` get isolated styles that do not
  * leak into the host application.
  *
+ * The `colorMode` prop controls dark/light appearance via a
+ * `data-stgm-color-mode` attribute on the scoping container.
+ * Host applications pass their theme state directly — no ancestor
+ * `.dark` class or Tailwind convention is required.
+ *
  * Pass {@link StigmerProviderProps.preset | preset} to apply a
  * built-in theme, or use {@link StigmerProviderProps.className | className}
  * for custom styling.
@@ -67,7 +105,7 @@ export interface StigmerProviderProps {
  *   [getAccessToken],
  * );
  *
- * <StigmerProvider client={client} preset="fintech">
+ * <StigmerProvider client={client} preset="fintech" colorMode="dark">
  *   <App />
  * </StigmerProvider>
  * ```
@@ -78,13 +116,25 @@ export function StigmerProvider({
   deploymentMode = "cloud",
   preset,
   className,
+  colorMode = "light",
 }: StigmerProviderProps) {
+  const systemMode = useSystemColorMode();
+  const resolvedMode: ResolvedColorMode =
+    colorMode === "system" ? systemMode : colorMode;
+
   const presetClass = preset ? resolvePresetClass(preset) : "";
 
   return (
     <StigmerContext.Provider value={client}>
       <DeploymentModeContext.Provider value={deploymentMode}>
-        <div className={cn("stgm", presetClass, className)}>{children}</div>
+        <ColorModeContext.Provider value={resolvedMode}>
+          <div
+            className={cn("stgm", presetClass, className)}
+            data-stgm-color-mode={resolvedMode}
+          >
+            {children}
+          </div>
+        </ColorModeContext.Provider>
       </DeploymentModeContext.Provider>
     </StigmerContext.Provider>
   );