8. Light, dark and high contrast
The Figma file shows S03 in Light Modern (T01) and Dark High Contrast (T02) to verify the token mapping.
Esta página está em inglês; a tradução está a caminho.
| Aspect | Behaviour |
|---|---|
| Detection | Body classes vscode-dark, vscode-light, vscode-high-contrast, vscode-high-contrast-light set by VS Code; CSS variables --vscode-* update automatically |
| Chrome | Uses only themeColor() roles, so it follows the theme without code |
| Canvas overlays | The renderer reads computed role colours once per theme change (MutationObserver on body class and style) and repaints |
| Canvas background | Document property of the page (UI-2). If unset, it follows background (editor.background) so a new file matches the theme |
| Document content | Never theme-dependent; a white frame stays white in a dark theme |
| High contrast | Every raised surface, panel, tab and field gets 1 px contrastBorder; focus and selection use contrastActiveBorder at 2 px; hover backgrounds are transparent with a 1 px dashed contrastActiveBorder outline (as VS Code); optionActive becomes transparent with contrastActiveBorder; shadows are removed |
| Light themes | Handles keep white fill with focus stroke; checkerboard uses #FFFFFF / #E5E5E5; avatars keep white letters |
| Actor colours | Same in all themes; HC adds a 1 px contrastBorder around the name tag |
| Icons | Codicons and custom icons are masks, so they follow icon colour in every theme |
The Figma file shows S03 in Light Modern (T01) and Dark High Contrast (T02) to verify the token mapping.