Themes and Product Icons

Purpose and Scope

Themes in VS Code cover several related but distinct customization surfaces. A color theme changes the workbench colors and editor token highlighting. A file icon theme changes the icons shown next to files, folders, and language-specific resources. A product icon theme changes the built-in UI glyphs used in actions, views, status bar items, hovers, tree controls, and extension UI. This page explains those surfaces together because users often encounter them through the same Preferences menu, while contributors encounter them in different parts of the repository.

For users, the most common task is choosing a color theme from the picker and letting VS Code store the selected theme in settings. Official VS Code docs describe the flow as opening File > Preferences > Theme > Color Theme, or running Preferences: Color Theme, then previewing choices with the keyboard before pressing Enter. The setting that records the selection is workbench.colorTheme, and workspace settings can override the global user selection when a project needs a specific appearance. Those settings-facing concepts are product behavior; the source paths here show representative repository assets and theme-related code rather than the full settings implementation.

Product icons and file icons solve different problems. Product icons are the symbolic UI icons identified by names such as those used in label syntax, API ThemeIcon values, and contributed UI metadata. File icons are tied to file names, folders, and language associations. A product icon theme redefines built-in UI glyphs through an icon font, while the file icon theme covered here, Seti, packages icons derived from the seti-ui project. Keeping this separation clear helps extension authors choose the right contribution point and helps contributors avoid changing a file icon asset when a workbench action icon is the actual target.

Sources: extensions/theme-seti/README.md, src/vs/base/browser/ui/codicons/codicon/README.md, extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/themes/index.ts

Relevant Source Files

• extensions/theme-seti/README.md documents the bundled Seti file icon theme, including its upstream source, update script, local and GitHub update modes, non-built-in language mapping requirements, and preview workflow.
• src/vs/base/browser/ui/codicons/codicon/README.md records the provenance of codicon.ttf: it is provided by the @vscode/codicons npm package and copied into this directory during compile time.
• extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/themes/index.ts is a theme export barrel for Copilot panel rendering, combining Shiki theme modules with local VS Code-style theme definitions such as darkModern, lightModern, vsDark, and vsLight.

Color Themes in the Product

A color theme affects both workbench chrome and editor highlighting, so it is the customization surface most users notice first. The official theme picker experience is intentionally low-risk: navigating the list previews the result before the user confirms it. Marketplace themes extend the same model, and the docs call out both picker-based discovery through Browse Additional Color Themes and Extensions view search with the @category:"themes" filter. Automatic switching can also be tied to operating-system light, dark, and high-contrast modes through settings such as window.autoDetectColorScheme and window.autoDetectHighContrast.

The repository evidence for this page includes one concrete color-theme consumer inside the Copilot extension. The Copilot panel theme module re-exports syntax-highlighting themes from Shiki, including darkPlus, lightPlus, monokai, solarizedDark, and solarizedLight, and also re-exports local theme definitions named after VS Code appearances such as darkModern, lightModern, vsDark, vsLight, darkHC, and lightHC. This tells contributors that not every themed surface is the global workbench theme service; embedded panels and rendered content may need an explicit list of token-coloring themes compatible with their renderer.

Sources: extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/themes/index.ts

File Icon Themes and the Seti Theme

The Seti extension is the bundled file icon theme represented in the requested source evidence. Its README states that it uses icons from seti-ui, and its maintainer workflow centers on extensions/theme-seti/build/update-icon-theme.js. To refresh assets, the documented command is npm run update from the theme-seti directory. The update script can work from a local checkout of seti-ui placed next to the vscode repository, or it can fetch icons from GitHub when the script's FROM_DISK variable is changed to false.

That update process matters because file icon themes are heavily data-driven. The README calls out a special nonBuiltInLanguages object for languages that are not shipped with VS Code. Entries there should match the file mapping in upstream seti-ui, and the README asks contributors to keep the list alphabetical. This is a small but important maintenance constraint: icon mappings must stay readable, reviewable, and consistent with upstream naming, especially for languages whose definitions are not present as built-in VS Code language extensions.

The Seti README also defines a manual verification workflow. The theme has an icons/preview.html page that can show every icon included in the theme, but it must be served by a web server rather than opened as an inert file. After updating icons, contributors are expected to inspect this preview to catch broken glyphs, missing associations, or visual regressions. Pull requests that update icons should include a screenshot of the preview page, giving reviewers a quick way to compare the generated assets with the intended visual result.

Sources: extensions/theme-seti/README.md

Product Icons and Codicons

Codicons are the default product icon font used by VS Code. Product icons are identified by stable icon IDs, and those IDs can appear in label syntax, API objects, contribution metadata, and built-in UI components. The official product icon reference describes label syntax such as $(alert) and animated variants such as $(sync~spin) for supported spinning icons. It also distinguishes product icons from file icons: product icons represent commands, controls, states, and other UI symbols, while file icons represent resources in the explorer and similar file-oriented views.

The repository source path for Codicons is intentionally terse but important. The README under src/vs/base/browser/ui/codicons/codicon/ explains that codicon.ttf is added through the @vscode/codicons npm package and copied into that directory during compile time. Contributors should treat that directory as the compiled product-icon font location rather than as the authoritative design source for every glyph. If an icon appears missing or stale in a local build, the first question is whether the compile-time copy step and package dependency are current, not whether a hand-edited font file should be changed in place.

Product icon themes build on that Codicon model by remapping product icon IDs to glyphs in an icon font. Official extension guidance explains that extensions contribute product icon themes through a productIconThemes contribution in package.json, with an id, label, and path to a product icon definition file. The definition file declares one or more fonts and icon definitions. The active color theme still controls icon color at each UI location, so product icon themes are mainly about glyph shape and visual language, not arbitrary multi-color artwork.

Sources: src/vs/base/browser/ui/codicons/codicon/README.md

System-to-Code Mapping

Theme surface	Reader-facing concept	Repository evidence	Contributor concern
Color theme	Workbench and editor colors selected by commands and settings such as workbench.colorTheme	extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/themes/index.ts	Embedded renderers may need explicit theme exports that match VS Code appearances and Shiki token themes.
File icon theme	Icons beside files, folders, and language resources	extensions/theme-seti/README.md	Keep generated Seti assets aligned with upstream seti-ui, maintain non-built-in language mappings, and verify with preview output.
Product icon theme	UI glyphs used in views, commands, labels, status bar items, and extension surfaces	src/vs/base/browser/ui/codicons/codicon/README.md	Understand Codicons as the default product icon font copied from @vscode/codicons during compile time.

A practical way to navigate theme work is to start from the visual symptom. If a file tree icon is wrong, inspect the file icon theme and language mapping path, especially the Seti generation workflow. If an action, status item, hover, or tree control uses the wrong glyph, think in product icon IDs and Codicons. If code shown inside an AI or webview-like panel has the wrong highlighting, inspect that component's renderer theme list as well as the global user theme setting. The same visible UI may combine all three surfaces: workbench colors, product glyphs, and file or language-specific icons.

Sources: extensions/theme-seti/README.md, src/vs/base/browser/ui/codicons/codicon/README.md, extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/themes/index.ts

Implementation Details and Next Steps

When contributing theme changes, avoid treating visual customization as a single asset bucket. File icon updates in Seti should follow the documented generation path, preserve the nonBuiltInLanguages convention, and include preview evidence. Codicon changes should respect the npm package provenance and compile-time copy behavior. Panel-specific syntax theme changes, such as those in the Copilot completions panel, should be reviewed as renderer dependencies because their exports determine which Shiki and local theme definitions are available to that UI surface.

For extension authors, the next step depends on what you want to customize. Use a color theme when you want to change workbench and token colors. Use a file icon theme when you want resource icons in file-oriented views. Use a product icon theme when you want to redefine VS Code's built-in UI glyphs, and use contributed icons when your extension needs additional icon IDs of its own. For repository contributors, pair any change with the right verification path: preview generated Seti icons, rebuild Codicons through the normal compile path, and exercise any panel that imports renderer themes.