# How Islands Dark Implements Semantic Highlighting for TypeScript

> Discover how Islands Dark uses semantic highlighting for TypeScript by enabling the feature and mapping token types to color values. Enhance your coding clarity.

- Repository: [Bradley Wyatt/vscode-dark-islands](https://github.com/bwya77/vscode-dark-islands)
- Tags: deep-dive
- Published: 2026-05-06

---

**Islands Dark enables semantic highlighting by setting `"semanticHighlighting": true` in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json) and mapping TypeScript semantic token types—such as classes, interfaces, and functions—to specific hex color values in the `semanticTokenColors` object.**

The Islands Dark theme for VS Code provides rich, context-aware syntax highlighting for TypeScript by leveraging VS Code's semantic highlighting engine. Unlike basic TextMate scopes that rely solely on regular expressions, semantic highlighting uses the TypeScript language server to distinguish between different symbol types. In the `bwya77/vscode-dark-islands` repository, the theme configures these capabilities through precise JSON definitions that map semantic tokens to the theme's distinct color palette.

## Enabling Semantic Highlighting in the Theme Configuration

At line 1078 of [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json), the theme explicitly activates semantic highlighting:

```json
"semanticHighlighting": true,

```

This boolean flag instructs VS Code to request semantic token information from the TypeScript language service. Without this declaration, the editor would rely exclusively on TextMate grammar patterns, missing nuanced distinctions between symbol types like methods versus functions or interfaces versus type aliases.

## Mapping TypeScript Semantic Tokens to Theme Colors

Beginning at line 1079, the `semanticTokenColors` object defines how specific TypeScript constructs appear in the editor. This mapping ensures that the TypeScript language server can apply context-aware colors that follow symbols across your entire codebase.

### Core TypeScript Symbol Mappings

The following excerpt from [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json) illustrates the mapping structure:

```json
"semanticTokenColors": {
  "class": "#cf8e6d",
  "enum": "#c77dbb",
  "interface": "#2aacb8",
  "typeParameter": "#6aab73",
  "type": "#e8a33e",
  "variable": "#bcbec4",
  "parameter": "#7a7e85",
  "property": "#548af7",
  "enumMember": "#73b00a",
  "function": "#548af7",
  "method": "#cf8e6d",
  "macro": "#e8a33e",
  "namespace": "#548af7",
  "typeAlias": "#6aab73"
}

```

### Token Type Reference for TypeScript

Each semantic token corresponds to specific TypeScript syntax elements:

- **class** (`#cf8e6d`) — Class declarations like `class MyClass {}`
- **interface** (`#2aacb8`) — Interface definitions such as `interface IThing {}`
- **enum** (`#c77dbb`) — Enum declarations including `enum Direction {}`
- **function** (`#548af7`) — Standalone function declarations
- **method** (`#cf8e6d`) — Class methods, distinguished from standalone functions
- **property** (`#548af7`) — Object properties and class fields
- **variable** (`#bcbec4`) — Variable declarations like `let count = 0`
- **typeParameter** (`#6aab73`) — Generic type parameters in functions and classes
- **typeAlias** (`#6aab73`) — Type alias declarations using the `type` keyword
- **namespace** (`#548af7`) — Namespace and module identifiers

## How VS Code Applies Semantic Highlighting to TypeScript

When you open a TypeScript file in VS Code with Islands Dark active, the TypeScript language server analyzes the abstract syntax tree and generates semantic tokens. These tokens carry specific classifications—distinguishing a class name from a variable or a method call from a function call. Because Islands Dark defines the `semanticTokenColors` mapping starting at line 1079, VS Code renders each classification with the designated color from the theme's palette.

This semantic approach provides consistent coloring across your codebase regardless of how symbols are imported, exported, or aliased. For example, a class named `UserRepository` will display the same orange `#cf8e6d` color whether it appears in a type annotation, a constructor call, or a static method reference, overcoming the limitations of text-based pattern matching.

## Summary

- Islands Dark activates semantic highlighting by setting `"semanticHighlighting": true` at line 1078 of [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json)
- The `semanticTokenColors` object beginning at line 1079 maps TypeScript semantic token types to specific hex color values
- VS Code's TypeScript language server supplies token classifications that distinguish classes, interfaces, methods, functions, and variables
- This semantic system ensures accurate syntax highlighting that follows symbols consistently across imports and references

## Frequently Asked Questions

### What is the difference between semantic highlighting and TextMate scopes in Islands Dark?

TextMate scopes rely on regular expressions to match syntax patterns, while semantic highlighting uses the TypeScript language server to understand the actual meaning of symbols. In Islands Dark, semantic tokens ensure that a class name receives the consistent orange `#cf8e6d` color defined at line 1079, even when used as a type annotation or constructor call, whereas TextMate scopes might color it differently depending on the specific code context.

### Which file controls semantic highlighting in the Islands Dark theme?

The configuration resides in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json). Line 1078 contains the `"semanticHighlighting": true` flag, and the complete `semanticTokenColors` mapping begins at line 1079, defining colors for TypeScript symbols including classes (`#cf8e6d`), interfaces (`#2aacb8`), and functions (`#548af7`).

### Does Islands Dark support semantic highlighting for languages other than TypeScript?

Yes. While TypeScript benefits significantly from this feature, the `semanticTokenColors` mapping applies to any language server that provides semantic tokens, including JavaScript, Python, Java, and C++. The theme defines universal token types such as `function`, `class`, and `variable` that language servers map to their respective language paradigms and constructs.

### How can I override specific semantic token colors in Islands Dark?

You can customize colors by adding a `semanticTokenColors` section to your personal VS Code [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) file. To change the class color to red, for example, add `"semanticTokenColors": { "class": "#ff0000" }` to override the Islands Dark default of `#cf8e6d` without modifying the theme files directly. This user-level configuration takes precedence over the theme's default mappings.