Theme Injector Tutorial
by— layout: post title: “Theming Microsoft Teams from the Outside — An Observation-First Tutorial” —
Microsoft Teams supports exactly three built-in themes: Light, Dark, and High Contrast. There’s no custom theme API. But new Teams runs on WebView2 (Chromium), which exposes the Chrome DevTools Protocol — and that means an external Node.js process can connect via CDP, inspect the running UI, and inject CSS that overrides Fluent UI’s 400+ design tokens.
Theme Injector is a tool that does exactly this. The interesting part isn’t the injection itself (that’s a <style> element) — it’s the observation-first methodology that makes the theming robust: extract every token from the live app, analyze the design system structure, verify visually, and only then generate overrides algorithmically.
This was written up as a 7-section tutorial covering CDP internals, Fluent UI token systems, color science for polarity-aware dimming, automated VS Code theme porting, and the challenges of theming calling screens with live video feeds.