Personalização Visual do VSCode + ZSH

1. Visão Geral

Este tutorial ensina como transformar seu ambiente de desenvolvimento em uma experiência visual limpa, moderna e futurista, combinando um tema bege minimalista no VSCode com um terminal ZSH totalmente integrado.

2. Requisitos

Visual Studio Code
Ubuntu 24.04 (ou WSL)
Fonte: MesloLGS NF
Extensões VSCode:

SandStorm Theme
Material Icon Theme
Live Server
Code Runner

Powerlevel10k instalado no ZSH

3. Configurações VSCode

Abra seu VSCode, pressione Ctrl + , e clique no ícone de arquivo {} para editar o settings.json.

Substitua tudo pelo código abaixo:

{
  "workbench.colorTheme": "SandStorm Theme",
  "workbench.iconTheme": "material-icon-theme",
  "window.titleBarStyle": "custom",
  "workbench.colorCustomizations": {
    "editor.background": "#ede6d1",
    "editor.foreground": "#2a2926",
    "editorLineNumber.foreground": "#8c8166",
    "editorCursor.foreground": "#1a1917",
    "editor.selectionBackground": "#e2d6b8",
    "editor.lineHighlightBackground": "#e6ddc2",
    "sideBar.background": "#ede6d1",
    "activityBar.background": "#ede6d1",
    "statusBar.background": "#ede6d1",
    "statusBar.foreground": "#2a2926",
    "terminal.background": "#ede6d1",
    "terminal.foreground": "#2a2926",
    "panel.background": "#ede6d1",
    "chat.background": "#f1ecdc",
    "chat.headerBackground": "#eae3ce",
    "titleBar.activeBackground": "#e0d9c3",
    "titleBar.inactiveBackground": "#e0d9c3",
    "titleBar.activeForeground": "#3e3b33",
    "titleBar.inactiveForeground": "#7a776b"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#7c5c2e",
    "keywords": "#cea375",
    "strings": "#567500",
    "functions": "#295f8f",
    "numbers": "#9e3f3f",
    "variables": "#1f1f1f"
  },
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 15,
  "editor.lineHeight": 22,
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontLigatures.enabled": true
}

💡 Dica: Use Ctrl + Shift + P e selecione Reload Window para aplicar as mudanças.

4. Configuração ZSH com Powerlevel10k

Crie ou edite o arquivo ~/.p10k.zsh com o conteúdo abaixo:

# ~/.p10k.zsh - Visual minimalista bege
POWERLEVEL9K_DISABLE_CONFIGURATION_WIZARD=true

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir vcs)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%F#cbbf9d┌─%f"
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%F#cbbf9d└╴%f"

POWERLEVEL9K_DIR_FOREGROUND=#2a2926
POWERLEVEL9K_VCS_CLEAN_FOREGROUND=#7c5c2e
POWERLEVEL9K_VCS_MODIFIED_FOREGROUND=#ce7a4c
POWERLEVEL9K_PROMPT_CHAR='❯'
POWERLEVEL9K_PROMPT_CHAR_FOREGROUND=#9e8359

POWERLEVEL9K_DIR_ICON=' '
POWERLEVEL9K_VCS_GIT_ICON=' '
POWERLEVEL9K_BACKGROUND=

Em seguida, no seu ~/.zshrc, adicione a linha:

source ~/.p10k.zsh

💡 Reinicie o terminal com exec zsh para aplicar.

5. Replicando em outros computadores

Você pode exportar os seguintes arquivos para replicar facilmente:

settings.json: configurações do VSCode
.p10k.zsh: aparência do terminal
.zshrc: para incluir source ~/.p10k.zsh

6. Resultado Final

Visual uniforme, claro e moderno com:

Editor bege claro com destaque suave
Terminal minimalista com ícones redondos
Interface Copilot ajustada ao visual bege