☕ Macchiato
Macchiato es una familia de 2 temas de color inspirados en el café: un espresso oscuro y un latte claro. Cada variante respeta un solo acento interactivo, capas de profundidad consistentes y alto contraste de texto, siguiendo criterios de accesibilidad y coherencia visual.
Macchiato is a family of 2 coffee-inspired color themes: a dark espresso and a light latte. Each variant keeps a single interactive accent, consistent depth layering, and high text contrast, following Apple-style accessibility and visual coherence guidelines.
⚡ Hecho para la nueva versión de VS Code / Built for the latest VS Code
| Descripción |
Description |
Desarrollado sobre la base mínima VS Code ^1.136.1, compatible con las últimas versiones 1.x de la edición Insiders y Stable. |
Built on a minimum base of VS Code ^1.136.1, compatible with the latest 1.x releases of Insiders and Stable. |
| Personalización completa de zonas modernas: Command Center, página de bienvenida, panel de Chat/IA de Copilot, sugerencias inline (Ghost Text) y terminal. |
Full customization of modern zones: Command Center, Welcome page, Copilot/AI Chat panel, inline suggestions (Ghost Text), and the terminal. |
| Flags de interfaz actualizados para el nuevo renderizado del Activity Bar y Command Center. |
Updated UI flags for the new Activity Bar and Command Center rendering. |
📸 Capturas / Screenshots
1 · Macchiato Espresso — vista general / overview
2 · Macchiato Latte — vista general / overview
3 · Código en Macchiato Espresso / Code in Macchiato Espresso
4 · Código en Macchiato Latte / Code in Macchiato Latte
🎨 Las variantes / The variants
| Tema / Theme |
Base |
Acento / Accent |
| ⬛ Macchiato Espresso (oscuro / dark) |
Grafito neutro / Neutral graphite #1E1E1E |
Lila suave / Soft lilac #B399D4 · Oro café / Coffee gold #F2BC3C |
| ⬜ Macchiato Latte (claro / light) |
Papel cálido / Warm paper #D6C5A5 |
Café latte #B06A32 |
🎨 Gama de colores / Color palette
⬛ Macchiato Espresso — UI
| Zona / Zone |
Muestra / Swatch |
| Fondo del editor / Editor background |
#1E1E1E |
| Barra lateral / Side bar |
#5D5555 |
| Barra de actividad / Activity bar |
#3E3636 |
| Pestaña activa / Active tab |
#1E1E1E |
| Barra de estado / Status bar |
#999090 |
| Texto principal / Base foreground |
#F2F2F2 |
| Texto secundario / Secondary text |
#9B9B9B |
| Acento lila / Lilac accent |
#B399D4 |
| Acento oro / Gold accent |
#F2BC3C |
| Línea activa / Current line |
#262626 |
| Éxito / Git added |
#8FBF8F |
| Info / Información |
#6FB1D6 |
| Aviso / Warning |
#FFCC66 |
| Error |
#FF6961 |
⬛ Macchiato Espresso — Sintaxis del código (20 tonos) / Code syntax (20 tones)
| Muestra / Swatch |
|
Zona / Zone |
#CACFD2 |
Texto base · markup · plain |
Base text · markup · plain |
#FFFEA3 |
Comentario (negrita) · comment |
Comment (bold) · comment |
#F0A0B4 |
Puntuación y operadores |
Punctuation & operators |
#80EE98 |
Cadenas · string |
Strings · string |
#E999ED |
Etiquetas · clases · soporte |
Tags · classes · support |
#45C3E6 |
Nombres de etiqueta · headings |
Tag names · headings |
#C792EA |
Atributos · funciones |
Attributes · functions |
#B794C7 |
Tipos y anotaciones (cursiva) |
Types & annotations (italic) |
#59D7FB |
Variables · keywords · constantes |
Variables · keywords · constants |
#FFB347 |
Métodos del lenguaje |
Language methods |
#FFCCFF |
Expresiones regulares · regex |
Regular expressions · regex |
#FF5370 |
Errores · deleted · invalid |
Errors · deleted · invalid |
#F39C12 |
Markup bold-italic · JSON L7 |
Markup bold-italic · JSON L7 |
#FFB6C1 |
Escape · separadores markdown |
Escape · markdown separators |
#FFCB6B |
Anclas de enlaces · link anchor |
Link anchors · link anchor |
#FFF568 |
JSON nivel 4 · key L4 |
JSON level 4 · key L4 |
#C08552 |
JSON profundo · link description |
Deep JSON · link description |
#A86FCD |
Propiedades CSS |
CSS properties |
#8FDFA1 |
Funciones CSS |
CSS functions |
#FFFFFF |
Valores CSS · métodos destacados |
CSS values · highlighted methods |
⬜ Macchiato Latte — UI
| Zona / Zone |
Muestra / Swatch |
| Fondo del editor / Editor background |
#D6C5A5 |
| Barra lateral / Side bar |
#F3EDE1 |
| Barra de actividad / Instalación / InstallationActivity bar |
#EAE2D4 |
| Pestaña activa / Active tab |
#FBF8F2 |
| Barra de estado / Status bar |
#E3D8C4 |
| Texto principal / Base foreground |
#3A322E |
| Texto secundario / Secondary text |
#B3A793 |
| Acento café / Coffee accent |
#B06A32 |
| Botón / Badge |
#B06A32 |
| Línea activa / Current line |
#EDE5D5 |
| Éxito / Git added |
#41854F |
| Info / Información |
#2F7DA0 |
| Aviso / Warning |
#A96A1E |
| Error |
#C14A3B |
⬜ Macchiato Latte — Sintaxis del código (19 tonos atenuados) / Code syntax (19 muted tones)
| Muestra / Swatch |
|
Zona / Zone |
#3A322E |
Texto base · markup · plain |
Base text · markup · plain |
#8F7A55 |
Comentario (negrita) · comment |
Comment (bold) · comment |
#A05C6E |
Puntuación y operadores · escapes markdown |
Punctuation & operators · markdown escapes |
#4C7A4E |
Cadenas · funciones CSS |
Strings · CSS functions |
#90579A |
Etiquetas · clases · soporte |
Tags · classes · support |
#2F7DA3 |
Nombres de etiqueta · encabezados |
Tag names · headings |
#7E5BAA |
Atributos · funciones |
Attributes · functions |
#7A4FA0 |
Tipos y anotaciones (cursiva) |
Types & annotations (italic) |
#3574A0 |
Variables · keywords · constantes |
Variables · keywords · constants |
#B06A32 |
Métodos del lenguaje · anclas de enlaces |
Language methods · link anchors |
#93568C |
Expresiones regulares · regex |
Regular expressions · regex |
#C14A3B |
Errores · deleted · invalid |
Errors · deleted · invalid |
#A3923A |
JSON nivel 4 · key L4 |
JSON level 4 · key L4 |
#6B625A |
JSON nivel 5 · key L5 |
JSON level 5 · key L5 |
#8A542A |
JSON profundo · descripción de enlaces |
Deep JSON · link descriptions |
#527A44 |
Argumentos · unidades · markup italic |
Arguments · units · markup italic |
#2E7E8C |
Palabras clave · storage |
Keywords · storage |
#6A4FB2 |
Propiedades CSS |
CSS properties |
#4A4035 |
Valores CSS |
CSS values |
🛠 Instalación / Installation
🖥️ Método 1 — Marketplace (recomendado / recommended)
- Abre Visual Studio Code / Open Visual Studio Code.
- Ve a Extensiones / Go to Extensions:
- Windows / Linux:
Ctrl+Shift+X · Mac: ⌘+Shift+X
- Busca Macchiato / Search for Macchiato.
- Haz clic en Instalar / Click Install.
- Aplica el tema en
Preferencias > Tema > Tema de color (Ctrl+K Ctrl+T / ⌘+K ⌘+T) / Apply it via Preferences > Theme > Color Theme (Ctrl+K Ctrl+T / ⌘+K ⌘+T).
💻 Método 2 — Línea de comandos / Command line (Windows · macOS · Linux)
Abre una terminal (PowerShell, CMD, Terminal de macOS o shell de Linux) y ejecuta / Open a terminal (PowerShell, CMD, macOS Terminal or the Linux shell) and run:
code --install-extension geek-tics.theme-macchiato
Si usas VS Code Insiders, usa code-insiders en su lugar / If you use VS Code Insiders, use code-insiders instead:
code-insiders --install-extension geek-tics.theme-macchiato
Nota / Note: En macOS primero debes instalar el comando code en el PATH: ⌘+Shift+P → Shell Command: Install 'code' command in PATH. En Windows, si el comando no se encuentra, ejecútalo desde la carpeta bin de VS Code.
Note: On macOS you must first install the code command in PATH: ⌘+Shift+P → Shell Command: Install 'code' command in PATH. On Windows, if the command is not found, run it from VS Code's bin folder.
📦 Método 3 — Instalar desde VSIX / Install from VSIX (Windows · macOS · Linux)
Útil si estás sin conexión, con proxy o probando el tema localmente / Useful when offline, behind a proxy, or when testing the theme locally:
- Obtén el archivo
.vsix (empaquetado con vsce package) / Get the .vsix file (packaged with vsce package).
- Abre la Paleta de comandos / Open the Command Palette:
Ctrl+Shift+P / ⌘+Shift+P.
- Ejecuta Extensions: Install from VSIX… y selecciona el archivo / Run Extensions: Install from VSIX… and select the file.
O directamente desde la terminal / Or directly from the terminal:
code --install-extension macchiato-theme-0.3.0.vsix
Nota / Note: Las extensiones instaladas por VSIX no se actualizan automáticamente; vuelve a instalarlas manualmente con cada versión nueva.
Note: VSIX-installed extensions do not auto-update; reinstall them manually with each new version.
Desarrollado por geek-tics (Ing. SDPG). Hecho con mucho ☕.
Developed by geek-tics (Ing. SDPG). Made with a lot of ☕.
