Field Notes: Dark Mode Telemetry QA

This lab update captures what changed in the telemetry dashboards after we rolled in the new BrandJet dark theme — from image handling to masonry balance and how we keep WordPress aligned with Astro. test

Dashboards in the Dark

We started with a quick audit of the CTA ECG panel once the darker palette shipped. The grid, waveform, and annotations all needed brighter accents so they remained readable without drifting into blue hues.

Bright telemetry dashboard — Telemetry grid wide mock — captured direct from the staging build.

Grid lines use 22% opacity on white, 38% on slate in dark mode.
Waveform shifts to the primary BrandJet orange at 78% brightness.
CTA button glow relies on box-shadows rather than extra gradients.

Masonry Tuning

The homepage feed picked up stricter column balancing. Cards with preset data-brandjet-column tags stay put, while the script evens out overfilled tracks without rewriting edit decisions.

Breakpoint	Columns	Gutter
≥ 1280px	4	40px
1024–1279px	3	32px
768–1023px	2	28px
< 768px	1	24px

Reference grid for the feed after the new neutralizer shipped.

“We’re matching WordPress editorial intent with Astro delivery now. No more ghost columns tearing the layout apart.”
— QA Sync Notes

To validate the migration we added extra cards, republished a few legacy stories, and let the neutralizer script reflow everything as expected on both schemes.

Engineers collaborating on a dark-mode dashboard — Team huddle testing the masonry logic before launch.

Headline Discipline

Every heading in the article body pulls the same warm orange, regardless of the surrounding block, so ToC anchors stay visually tied to their targets.

Implementation Notes

Remember to rerun npm run build after tweaking Astro components so the static export picks up fresh markup.

Sample Code

const ensureTocReady = () => {
  const section = document.querySelector('[data-brandjet-toc="true"]');
  const host = document.querySelector('.brandjet-article__entry');

  if (!section || !host) return false;

  const firstHeading = host.querySelector('h2, h3, h4, h5, h6');
  host.insertBefore(section, firstHeading ?? host.firstChild);
  return true;
};

What’s Next

Up next: double-check the scroll-to-top guard once we restore the icon, and bring the header image controls into the CMS so marketing can swap variants without calling engineering.