How Islands Dark Implements Semantic Highlighting for TypeScript

Islands Dark enables semantic highlighting by setting "semanticHighlighting": true in 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, the theme explicitly activates semantic highlighting:

"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 illustrates the mapping structure:

"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
• 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. 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}