🎨 Coolord
Personaliza los colores de tu workspace en Visual Studio Code de forma simple y rápida.
¿Qué hace?
Esta extensión te permite cambiar los colores de tu entorno de trabajo en VS Code (barra lateral, barra de título, barra de actividad, editor, etc.) usando:
- 17 paletas predefinidas listas para usar
- Colores personalizados (pega cualquier código hex como
#FF5733
)
La extensión es inteligente: detecta si tu color es claro u oscuro y genera automáticamente una paleta completa que garantiza que todo el texto sea legible.
🚀 Cómo usar
- Abre el comando:
Ctrl+Shift+P
(o Cmd+Shift+P
en Mac)
- Escribe:
Coolord: Customize Workspace Colors
- Elige:
- Una paleta predefinida (Ocean Blue 🌊, Fire Red 🔥, etc.)
- O selecciona "Color Personalizado" y pega tu código hex
- ¡Listo! Los colores se aplican instantáneamente
⌨️ Atajos de teclado
- Personalizar colores:
Ctrl+Alt+C
(Mac: Cmd+Alt+C
)
- Restablecer colores:
Ctrl+Alt+R
(Mac: Cmd+Alt+R
)
📋 Comandos disponibles
Coolord: Customize Workspace Colors
- Personalizar colores
Coolord: Reset Colors
- Restaurar colores por defecto
🎨 Paletas incluidas
🌊 Ocean Blue • 🔥 Fire Red • 🌲 Forest Green • 💜 Purple Dream
🌅 Sunset Orange • 🌌 Deep Sea • 🌸 Pink Sunset • 🌙 Midnight Blue
💚 Emerald • 🌺 Cherry Blossom • ❄️ Arctic Ice • ✨ Golden Hour
💐 Lavender Fields • 🪸 Coral Reef • ☕ Coffee Break • 🌃 Neon Nights • 🍂 Autumn Leaves
Total: 17 paletas predefinidas + colores personalizados ilimitados
💡 ¿Cómo funciona el color personalizado?
Cuando pegas un color (ejemplo: #eb259f
):
- Detecta si es claro u oscuro
- Genera una paleta armoniosa automáticamente
- Aplica el color principalmente en la Activity Bar (iconos laterales)
- Crea tonos oscuros con tinte del color para sidebar, editor, etc.
- Ajusta colores inactivos para que usen versiones más oscuras del mismo color
- Garantiza que todo el texto sea perfectamente legible
📝 Nota técnica
Los colores se guardan en .vscode/settings.json
de tu workspace bajo workbench.colorCustomizations
. Son específicos de cada proyecto.
¿Dudas o sugerencias? Revisa DESARROLLO.md
para información técnica y próximos pasos.