colors

Package: @autotracer/react18  ·  Layer: Runtime  ·  Type: object  ·  Default: built-in theme

---

colors is a runtime configuration option for reactTracer() — the initializer of the @autotracer/react18 React component render tracing library. It customizes the theme and styling used for different render-output categories.

The active lightMode or darkMode branch is selected automatically from your browser's prefers-color-scheme preference.

A partial colors object is deep-merged over the built-in theme instead of replacing it.

If you use @autotracer/plugin-vite-react18, theme files can also populate this theme automatically at build time. See ReactTracer Theme API and ReactTracer Example Themes.

If both are present, programmatic colors sets the project default and the injected theme files can override overlapping values locally.

Read together with enabled and outputMode when you are tuning startup behavior and output appearance.

Shape

• Top-level keys include definitiveRender, propInitial, propChange, stateInitial, stateChange, logStatements, warnStatements, errorStatements, reconciled, skipped, identicalStateValueWarning, identicalPropValueWarning, and other.
• Each category accepts lightMode, darkMode, and icon.
• lightMode and darkMode accept background, text, bold, and italic.

Usage

import { reactTracer } from "@autotracer/react18";

reactTracer({
  colors: {
    definitiveRender: {
      lightMode: { text: "#0055cc", bold: true },
      darkMode: { text: "#7dd3fc", bold: true },
    },
  },
});