# 🎄 Deixando o VS Code com clima de Natal (tema + configurações) · IamThiagoIT

Fim de ano chegando, projetos andando (ou não 😅) e nada melhor do que dar uma renovada no ambiente de desenvolvimento.
Nesse post vou mostrar como customizar o VS Code com um tema natalino, usando apenas configurações nativas, sem precisar criar uma extensão.

A ideia é simples: verde, vermelho, dourado e tons escuros, mantendo conforto visual e produtividade.

🎯 Por que personalizar o VS Code?

Pode parecer só estética, mas personalizar o editor ajuda em:

Conforto visual em longas sessões
Identificação mais rápida de elementos (status, abas, git)
Motivação (sim, ambiente importa)
Tornar o setup mais “seu”

E o melhor: tudo isso usando o próprio settings.json.

🛠️ Base do setup

Antes de aplicar o tema natalino, recomendo:

Tema base: Default Dark+
Ícones: Material Icon Theme
Fonte com ligaduras (opcional, mas recomendada)

🎄 Configuração de Natal (settings.json)

Abra o Command Palette (Ctrl + Shift + P) →
Preferences: Open Settings (JSON)
e adicione:

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",

  "workbench.colorCustomizations": {
    "editor.background": "#0B1F17",
    "editor.foreground": "#E8F5E9",

    "activityBar.background": "#0E3B2E",
    "activityBar.foreground": "#E53935",
    "activityBarBadge.background": "#C62828",
    "activityBarBadge.foreground": "#FFFFFF",

    "sideBar.background": "#0C2A20",
    "sideBar.foreground": "#A5D6A7",

    "statusBar.background": "#1B5E20",
    "statusBar.foreground": "#F1F8E9",
    "statusBar.debuggingBackground": "#B71C1C",

    "titleBar.activeBackground": "#2E7D32",
    "titleBar.activeForeground": "#FFFDE7",

    "tab.activeBackground": "#1B5E20",
    "tab.inactiveBackground": "#0E3B2E",
    "tab.activeForeground": "#FFEB3B",
    "tab.inactiveForeground": "#A5D6A7",

    "editorCursor.foreground": "#FF5252",
    "editorLineNumber.foreground": "#81C784",
    "editorLineNumber.activeForeground": "#FFD54F",

    "editor.selectionBackground": "#2E7D3288",
    "editor.inactiveSelectionBackground": "#1B5E2055",

    "terminal.background": "#081913",
    "terminal.foreground": "#C8E6C9",
    "terminalCursor.foreground": "#FF5252",

    "gitDecoration.addedResourceForeground": "#66BB6A",
    "gitDecoration.modifiedResourceForeground": "#FFD54F",
    "gitDecoration.deletedResourceForeground": "#EF5350"
  },

  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.renderLineHighlight": "all"
}

🎨 O que cada cor representa?

Verde escuro → base do editor (árvore de natal 🎄)
Vermelho → cursor, debug, badges (detalhes e alertas)
Dourado / Amarelo → abas ativas e números de linha
Verde claro → leitura confortável de texto

Tudo pensado para não cansar a visão, mesmo com cores temáticas.

✨ Extensões que combinam com o tema

Opcional, mas deixam o setup ainda melhor:

Material Icon Theme
Christmas Theme (caso queira trocar o tema base)
Bracket Pair Colorizer
Snowflake Cursor (se quiser algo mais divertido)

🎁 Conclusão

Se você curte esse tipo de customização, vale salvar o trecho de colorCustomizations e reaproveitar em outros temas sazonais 🎅💻