130 Widgets

Building tools. Learning to build tools. Learning to build learning tools.

Theming Microsoft Teams
from the Outside

An observation-first approach to runtime CSS injection via Chrome DevTools Protocol — extracting Fluent UI tokens, analyzing the design system, and building a theme engine that ports any VS Code theme to Teams.

Chrome DevTools Protocol Fluent UI v9 Tokens CSS Custom Properties HSL Color Science WebView2 Node.js DOM Analysis

Foundation

0

The Problem & the Opportunity CDP

Why Teams can’t be themed, how WebView2 changes that, and the CDP debug port setup
1

Observation — Extracting the Color System Design

Connecting via CDP, extracting 400+ Fluent UI tokens, sampling UI regions, detecting theme mode

Arc 1 — Understanding the Design System

2

Analysis — Surface Hierarchy & Token Anatomy Design

Background layers, foreground ramps, interaction states, contrast verification, brand system
3

The Dimming Engine — Polarity-Aware Color Math Design Arch

HSL transforms, foreground polarity flip, WCAG contrast enforcement, seven dimming profiles

Arc 2 — The Theme Porting Engine

4

Porting VS Code Themes — Palette to Tokens Arch

Structural mapping, 25 semantic roles, automatic interaction state generation, JSONC parsing
5

Hardcoded Overrides & Griffel Atomic Classes CDP Design

Why tokens alone aren’t enough, DOM exploration, the data-tid selector strategy

Arc 3 — Real-World Challenges

6

Video Feeds, Calling Screens & Native Theme Control CDP Arch

Multiple FluentProviders, transparent html/body, native IPC, Settings UI automation
7

Making It Better — Fragility, Automation & What’s Next

Reducing fragility, improving the porting pipeline, and ideas for the future

130 Widgets

Theming Microsoft Teamsfrom the Outside

Theming Microsoft Teams
from the Outside