Pyret VSCode Theme
A VS Code extension that provides syntax highlighting and color themes for the Pyret programming language (.arr files).
This extension uses the real Pyret tokenizer (the same one used by code.pyret.org) via VS Code's Semantic Tokens API, ensuring accurate and context-aware highlighting.
Included Themes
- ☀️ Pyret Light — clean white background with official colors from
code.pyret.org
- 🌙 Pyret Dark (One Dark) — sleek dark mode based on Atom's popular One Dark Pro palette (
#282c34)
Default Color Palette
| Token Type |
Pyret Light |
Pyret Dark (One Dark) |
Description & Examples |
keyword |
#b91c1c |
#c678dd |
Control keywords (fun, check, ask, end, if, else, cases, data, type, where, with, sharing) |
function |
#0066cc |
#61afef |
Function declarations and function calls (quicksort, figurinha, filter) |
type |
#5b21b6 |
#e5c07b |
Types, data variants, generics & annotations (List, String, Number, Boolean, Any, Figurinha, Album, Id) |
parameter |
#16a34a |
#e06c75 |
Function parameters and their usages inside function bodies (s, n, comp, l, f, prim, resto) |
constant |
#0f1d36 |
#d19a66 |
All-caps constants and identifiers (NAIPE-ESPADAS, ICONE-ESPADAS, MAX-SELECAO, SELECOES, BRA1) |
variable |
#16a34a |
#e06c75 |
Variables / Function arguments and their usages inside function bodies (s, n, comp, l, f, prim, resto, p, r) |
constant |
#0f1d36 |
#d19a66 |
Constants and top-level bindings in uppercase or lowercase (NAIPE-ESPADAS, L1, MAX-SELECAO, empty-image, vazia, pi) |
type |
#5b21b6 |
#e5c07b |
Types, data variants, generics & annotations (List, String, Number, Boolean, Any, Figurinha, Album, Id, vazia, elo) |
variable |
#15803d |
#e06c75 |
Variables / Function arguments and their usages inside function bodies (s, n, comp, l, f, prim, resto, p, r) |
constant |
#0a192f |
#d19a66 |
Constants and top-level bindings in uppercase or lowercase (NAIPE-ESPADAS, L1, MAX-SELECAO, empty-image, pi) |
string |
#14532d |
#98c379 |
Double, single, or triple-quoted text ("hello", 'world', "text") |
number |
#1d4ed8 |
#d19a66 |
Decimals (42), rationals (1/3), rough numbers (~1.5) |
comment |
#d97706 |
#7f848e |
Single-line comments (# ...) and block comments (#| ... |#) |
variable |
#111827 |
#abb2bf |
General variables (labels, result, img) |
operator |
#111827 |
#56b6c2 |
Operators & punctuation (+, -, *, /, ==, <=, >=, =>, ::, ->, :, ,) |
Customizing Colors in VS Code
You can customize any syntax token or UI element color in your VS Code settings without editing the extension.
Open VS Code Settings JSON (Ctrl+Shift+P → Preferences: Open User Settings (JSON)) and add your custom rules.
1. Available Syntax Color Tokens (editor.semanticTokenColorCustomizations)
All token types that can be customized:
"editor.semanticTokenColorCustomizations": {
"rules": {
"keyword": "#b91c1c", // Keywords (fun, check, ask, end, if, else, data, cases)
"function": "#0066cc", // Function names and call names (quicksort, filter)
"type": "#5b21b6", // Types, constructors and generics (List, String, Number, Any)
"parameter": "#16a34a", // Function arguments and their references inside bodies
"constant": "#0f1d36", // All-caps constants (NAIPE-ESPADAS, MAX-SELECAO, SELECOES)
"variable": "#16a34a", // Variables (function arguments & their usages inside bodies)
"constant": "#0f1d36", // Constants and top-level bindings (NAIPE-ESPADAS, L1, empty-image, vazia)
"type": "#5b21b6", // Types, constructors and generics (List, String, Number, Any, vazia)
"variable": "#15803d", // Variables (function arguments & their usages inside bodies)
"constant": "#0a192f", // Constants and top-level bindings (NAIPE-ESPADAS, L1, empty-image)
"string": "#14532d", // Quoted strings ("text")
"number": "#1d4ed8", // Decimals, rationals (1/3), rough numbers (~1.5)
"comment": "#d97706", // Line (#) and block (#| ... |#) comments
"variable": "#111827", // General variables
"operator": "#111827" // Operators (+, -, *, /, ==, =>, ::, ->)
}
}
2. Available UI Theme Colors (workbench.colorCustomizations)
Key UI components you can customize per theme:
"workbench.colorCustomizations": {
"[Pyret Light]": {
"editor.background": "#ffffff", // Editor background
"editor.foreground": "#111827", // Default text color
"editor.lineHighlightBackground": "#f3f4f620", // Active line highlight
"editor.selectionBackground": "#c7d2fe", // Text selection color
"editorLineNumber.foreground": "#9ca3af", // Line numbers color
"statusBar.background": "#ffffff", // Bottom status bar background
"statusBar.foreground": "#111827", // Bottom status bar text
"sideBar.background": "#f9fafb", // File explorer sidebar
"activityBar.background": "#f3f4f6", // Left icon bar
"tab.activeBackground": "#ffffff" // Active file tab background
},
"[Pyret Dark (One Dark)]": {
"editor.background": "#282c34",
"editor.foreground": "#abb2bf",
"statusBar.background": "#21252b",
"sideBar.background": "#21252b",
"activityBar.background": "#21252b"
}
}
Installation
From VSIX file
code --install-extension pyret-vscode-theme-1.2.3.vsix
Selecting your theme
- Press
Ctrl+Shift+P (or Cmd+Shift+P on macOS)
- Select "Preferences: Color Theme"
- Choose either "Pyret Light" or "Pyret Dark (One Dark)"
How it works
The extension embeds a copy of the Pyret CodeMirror tokenizer (pyret.js) and adapts it to run in Node.js using a custom CodeMirror Stream emulator. It registers a DocumentSemanticTokensProvider that tokenizes each file using the real Pyret parser state machine, producing accurate token classification that regex-based TextMate grammars cannot achieve.
License
MIT
Credits
| |
