TOC inline code doesn't inherit active highlight color when scrolling

[oxpampam]

Hey team 👋

Found this while running the docs locally. When a heading contains inline code (backticks), the TOC item doesn't fully highlight on scroll. The code text stays its default color instead of inheriting the active white, making it invisible on dark backgrounds.

Steps to reproduce

Navigate to any doc page with headings that contain inline code e.g. the OP Bridge Tutorial which has headings like:

1. config.yaml

2. schema.graphql

3. src/EventHandlers.ts

Scroll through the page and watch the TOC on the right

What you see

The TOC link goes active but the code element inside it keeps its own color - on a dark sidebar background this makes the code text invisible (white text on white/light background).

Why it happens

Docusaurus sets an explicit color on code elements via var(--ifm-code-color). When the parent <a> tag gets the --active class and turns white, the code inside ignores it.

Fix

Add to src/css/custom.css:

.table-of-contents__link code {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.table-of-contents__link--active code,
.table-of-contents__link:hover code {
  color: inherit;
}

Before / After

local-envio-docs.mp4