Function extendTheme

Parameters

• base: ThemeDefinition
• overrides: {
      colors?: {
          accent?: { primary?: number; secondary?: number; tertiary?: number };
          bg?: {
              base?: number;
              elevated?: number;
              overlay?: number;
              subtle?: number;
          };
          border?: { default?: number; strong?: number; subtle?: number };
          diagnostic?: {
              error?: number;
              hint?: number;
              info?: number;
              warning?: number;
          };
          disabled?: { bg?: number; fg?: number };
          error?: number;
          fg?: {
              inverse?: number;
              muted?: number;
              primary?: number;
              secondary?: number;
          };
          focus?: { bg?: number; ring?: number };
          info?: number;
          selected?: { bg?: number; fg?: number };
          success?: number;
          warning?: number;
      };
      focusIndicator?: {
          bold?: boolean;
          focusRingColor?: number;
          underline?: boolean;
      };
      name?: string;
      spacing?: {
          "2xl"?: number;
          lg?: number;
          md?: number;
          sm?: number;
          xl?: number;
          xs?: number;
      };
      widget?: {
          chart?: {
              accent?: number;
              danger?: number;
              muted?: number;
              primary?: number;
              success?: number;
              warning?: number;
          };
          diff?: {
              addBg?: number;
              addFg?: number;
              border?: number;
              deleteBg?: number;
              deleteFg?: number;
              hunkHeader?: number;
              lineNumber?: number;
          };
          logs?: {
              debug?: number;
              error?: number;
              info?: number;
              trace?: number;
              warn?: number;
          };
          syntax?: {
              comment?: number;
              cursorBg?: number;
              cursorFg?: number;
              function?: number;
              keyword?: number;
              number?: number;
              operator?: number;
              punctuation?: number;
              string?: number;
              type?: number;
              variable?: number;
          };
          toast?: {
              error?: number;
              info?: number;
              success?: number;
              warning?: number;
          };
      };
  } = {}

  • Optional Readonlycolors?: {
        accent?: { primary?: number; secondary?: number; tertiary?: number };
        bg?: {
            base?: number;
            elevated?: number;
            overlay?: number;
            subtle?: number;
        };
        border?: { default?: number; strong?: number; subtle?: number };
        diagnostic?: {
            error?: number;
            hint?: number;
            info?: number;
            warning?: number;
        };
        disabled?: { bg?: number; fg?: number };
        error?: number;
        fg?: {
            inverse?: number;
            muted?: number;
            primary?: number;
            secondary?: number;
        };
        focus?: { bg?: number; ring?: number };
        info?: number;
        selected?: { bg?: number; fg?: number };
        success?: number;
        warning?: number;
    }

    Complete color token set

    • Optional Readonlyaccent?: { primary?: number; secondary?: number; tertiary?: number }

      • Optional Readonlyprimary?: number

        Primary accent (actions, focus)

      • Optional Readonlysecondary?: number

        Secondary accent (links, highlights)

      • Optional Readonlytertiary?: number

        Tertiary accent (subtle accents)

    • Optional Readonlybg?: { base?: number; elevated?: number; overlay?: number; subtle?: number }

      • Optional Readonlybase?: number

        Main background color

      • Optional Readonlyelevated?: number

        Elevated surfaces (cards, modals)

      • Optional Readonlyoverlay?: number

        Overlay surfaces (dropdowns, tooltips)

      • Optional Readonlysubtle?: number

        Subtle hover/focus backgrounds

    • Optional Readonlyborder?: { default?: number; strong?: number; subtle?: number }

      • Optional Readonlydefault?: number

        Default borders

      • Optional Readonlystrong?: number

        Strong/emphasized borders

      • Optional Readonlysubtle?: number

        Subtle borders (dividers)

    • Optional Readonlydiagnostic?: { error?: number; hint?: number; info?: number; warning?: number }

      • Optional Readonlyerror?: number

        Error diagnostics (squiggles, banners)

      • Optional Readonlyhint?: number

        Hint diagnostics

      • Optional Readonlyinfo?: number

        Informational diagnostics

      • Optional Readonlywarning?: number

        Warning diagnostics

    • Optional Readonlydisabled?: { bg?: number; fg?: number }

      • Optional Readonlybg?: number

        Disabled background

      • Optional Readonlyfg?: number

        Disabled foreground

    • Optional Readonlyerror?: number

    • Optional Readonlyfg?: { inverse?: number; muted?: number; primary?: number; secondary?: number }

      • Optional Readonlyinverse?: number

        Inverse text (on accent backgrounds)

      • Optional Readonlymuted?: number

        Muted text (disabled, placeholders)

      • Optional Readonlyprimary?: number

        Primary text color

      • Optional Readonlysecondary?: number

        Secondary/less important text

    • Optional Readonlyfocus?: { bg?: number; ring?: number }

      • Optional Readonlybg?: number

        Focus background color

      • Optional Readonlyring?: number

        Focus ring/outline color

    • Optional Readonlyinfo?: number

    • Optional Readonlyselected?: { bg?: number; fg?: number }

      • Optional Readonlybg?: number

        Selected item background

      • Optional Readonlyfg?: number

        Selected item foreground

    • Optional Readonlysuccess?: number

    • Optional Readonlywarning?: number

  • Optional ReadonlyfocusIndicator?: { bold?: boolean; focusRingColor?: number; underline?: boolean }

    Required default focus indicator styling.

  • Optional Readonlyname?: string

    Theme display name

  • Optional Readonlyspacing?: {
        "2xl"?: number;
        lg?: number;
        md?: number;
        sm?: number;
        xl?: number;
        xs?: number;
    }

    Required spacing scale used by design-system recipes.

  • Optional Readonlywidget?: {
        chart?: {
            accent?: number;
            danger?: number;
            muted?: number;
            primary?: number;
            success?: number;
            warning?: number;
        };
        diff?: {
            addBg?: number;
            addFg?: number;
            border?: number;
            deleteBg?: number;
            deleteFg?: number;
            hunkHeader?: number;
            lineNumber?: number;
        };
        logs?: {
            debug?: number;
            error?: number;
            info?: number;
            trace?: number;
            warn?: number;
        };
        syntax?: {
            comment?: number;
            cursorBg?: number;
            cursorFg?: number;
            function?: number;
            keyword?: number;
            number?: number;
            operator?: number;
            punctuation?: number;
            string?: number;
            type?: number;
            variable?: number;
        };
        toast?: {
            error?: number;
            info?: number;
            success?: number;
            warning?: number;
        };
    }

    Widget-specific palettes for advanced surfaces.