Como editar o tema escuro padrão do Visual Studio Code?


88

Estou usando o Windows 7 de 64 bits.

Existe uma maneira de editar o tema escuro padrão no Visual Studio Code? Na %USERPROFILE%\.vscodepasta, há apenas temas das extensões, enquanto no caminho de instalação (usei o padrão C:\Program Files (x86)\Microsoft VS Code) , há arquivos de alguns temas padrão \resources\app\extensions, como Kimbie Dark, Solarized Dark / Light ou variantes do Monokai, mas não há um tema escuro padrão.

Mas se afinal existe a possibilidade de editá-lo, então quais blocos de código são responsáveis ​​pela cor do membro do objeto, membro do ponteiro e nome da classe e estrutura na linguagem C ++?


4
Para quem vem aqui: você não precisa procurar, modificar ou criar nenhum arquivo de tema. Tudo pode ser modificado usando workbench.colorCustomizationse editor.tokenColorCustomizationsnas configurações do usuário: code.visualstudio.com/docs/getstarted/… .
chipit24

Também se poderia esperar um desatualizado, mas trabalhando em um recurso que nos permitiria adicionar CSS global personalizado, como A Atoms Edit -> Stylesheet...última alteração no problema foi março github.com/Microsoft/vscode/issues/459 . É decepcionante que esteja fechado para comentários. A API atual não permite que uma extensão modifique o CSS global ... então teremos que esperar ou colar manualmente o CSS nas Ferramentas do Desenvolvedor como o homem das cavernas.
Ray Foss

Respostas:


47

O arquivo que você está procurando está em,

Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes

no Windows e pesquise o nome do arquivo dark_vs.jsonpara localizá-lo em qualquer outro sistema.


Atualizar:

Com as novas versões do VSCode, você não precisa procurar o arquivo de configurações para personalizar o tema. Agora você pode personalizar seu tema de cores com as configurações do usuário workbench.colorCustomizationse editor.tokenColorCustomizations. A documentação sobre o assunto pode ser encontrada aqui .


11
No Linux, está disponível/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
No Arch Linux, é (lançamento de código aberto) em/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Por padrão, o VS Code é instalado em C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén

2
A atualização desta resposta é uma recomendação sólida. Descobri que se você editar os arquivos de tema diretamente, eles podem / serão substituídos em uma atualização do VS Code.
cniggeler

73

Nas 'Configurações do usuário' do código VS, você pode editar as cores visíveis usando as seguintes tags (este é um exemplo e há muito mais tags),

"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0",
    "sideBar.background": "#F8F6F6",
    "sideBar.foreground": "#000000",
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
    "sideBarSectionHeader.background": "#CAC9C9",
    "sideBarSectionHeader.foreground": "#000000",
    "activityBar.border": "#FFFFFF",
    "statusBar.background": "#102F97",
    "scrollbarSlider.activeBackground": "#77D4CB",
    "scrollbarSlider.hoverBackground": "#8CE6DA",
    "badge.background": "#81CA91"}

Se você quiser editar alguns tokens de cor C ++, use a seguinte tag,

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}

1
Mas se estiver além de tokenColorCustomizations, o que eu faço?
Alex

Onde se pode encontrar uma lista de todas as opções disponíveis em "editor.tokenColorCustomizations"?
ololobus


Minha edição foi rejeitada por algum motivo, mas para que esta resposta aborde especificamente o desejo do OP de alterar um tema específico, você pode especificar o tema e modificar as cores sem alterar os arquivos do tema: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks de

É chamado de "Workbench: Color Customizations" nas configurações
Zach Saucier

29

No que diz respeito aos temas, o VS Code é tão editável quanto o Sublime. Você pode editar qualquer um dos temas padrão que vêm com o código do VS. Você só precisa saber onde encontrar os arquivos do tema.

Nota lateral: Eu amo o tema Monokai. No entanto, tudo que eu queria mudar era o pano de fundo. Não gosto do fundo cinza escuro. Em vez disso, acho que o contraste é MUITO melhor com um fundo preto sólido. O código aparece muito mais.

De qualquer forma, procurei o arquivo do tema e o encontrei (no windows) em:

c: \ Arquivos de programas (x86) \ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

Nessa pasta, encontrei o arquivo Monokai.tmTheme e modifiquei a primeira chave de fundo da seguinte maneira:

<key>background</key>
<string>#000000</string>

Existem algumas teclas de 'fundo' no arquivo do tema, certifique-se de editar a correta. O que editei estava no topo. Linha 12, eu acho.


5
Os locais de instalação do Ubuntu são como/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Máx.

5
E para mac, descobri que atualizar os arquivos nestes caminhos funcionou: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p e digite reload windowcmd para testar imediatamente a mudança :)
balajikris

1
A modificação do plano de fundo do tema também pode ser feita "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }nas configurações do usuário.
Bilbo

1
Para o código VS de 64 bits no Windows, o caminho base é C:\Program Files\Microsoft VS Code\resources\app\extensions\ , geralmente seguido portheme-....
Peter B

Modifique o tema nas configurações do usuário com "workbench.colorCustomizations": { "editor.background": "#000" },. Aqui estão todas as diferentes personalizações que você pode fazer: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Você não pode "editar" um tema padrão, eles estão "bloqueados"

No entanto, você pode copiá-lo em seu próprio tema personalizado, com as modificações exatas que desejar.

Para obter mais informações, consulte estes artigos: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Se tudo o que você deseja alterar são as cores do código C ++, você deve examinar a substituição do colorizador de suporte a C ++. Para obter informações sobre isso, clique aqui: https://code.visualstudio.com/docs/customization/colorizer

EDIT: O tema escuro pode ser encontrado aqui: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Para esclarecer:


1
E de onde posso copiá-lo? Nos artigos que você me enviou, não há nada sobre isso. E não quero instalar nada para uma coisa tão trivial como alterar um pouco o destaque de sintaxe - especialmente quando eu poderia simplesmente abrir o arquivo certo e modificar algumas linhas de código, se o tema padrão não estivesse bloqueado. Além disso, a geração de um novo tema com o Yeoman Generator precisa do arquivo .tmTheme de outro tema - não há um tema escuro do Visual Studio no site ColorSublime e não tenho acesso ao "bloqueado" do VSC.
Toreno96

Talvez eu possa editar o arquivo c ++. Plist de "C: \ Arquivos de programas (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Mas quais blocos de código devo alterar? Ou talvez haja um arquivo de origem do tema escuro padrão do VSC em algum lugar, que eu possa usar para fazer meu próprio tema personalizado?
Toreno96

Você não pode editá-lo, porque acredito que está salvo no código-fonte. No entanto, você pode copiar / colar e alterar algumas linhas. Ele está localizado no GitHub. Eu encontrei para você: github.com/Microsoft/vscode/tree/… Resposta editada com link
Tobiah Zarlez

É possível editar o arquivo c ++. Plist que mencionei, eu verifiquei isso. E eu entendi do artigo sobre colorizadores que é um arquivo colorizer padrão para a linguagem C ++. Corrija-me se eu estiver errado. Mas se você ainda está falando sobre editar o tema padrão - sim, eu sei que não posso fazer isso, entendi a frase sobre isso desde sua primeira resposta. Obrigado pelas informações sobre o código-fonte no GitHub e link - mas eu verifiquei e os temas de lá não são os padrões, mas uma variação modificada, mais colorida destes. Infelizmente, não da maneira que eu gostaria.
Toreno96

1
Mas por acidente eu descobri que o tema "Xcodedefault" da galeria de extensões tem a mesma sintaxe destacando que o tema escuro padrão. Como ele está na pasta de extensões do meu disco agora, após a instalação, posso modificá-lo, assim como queria modificar o tema escuro padrão. Então, meu problema está resolvido.
Toreno96

15

A maneira mais simples é editar as configurações do usuário e personalizar workbench.colorCustomizations

Editando personalizações de cores

Se você quiser fazer o seu tema

Também existe a opção de modificar o tema atual que irá copiar as configurações do tema atual e permitir que você salve como um *.color-theme.jsonarquivo JSON5

Gerar tema de cores a partir das configurações atuais


1
Quer reordenar sua resposta para que a melhor e mais fácil seja a primeira? =]
Relequestual de

14

Qualquer tema de cor pode ser alterado nesta seção de configurações no VS Code versão 1.12 ou superior:

 // Overrides colors from the currently selected color theme.
  "workbench.colorCustomizations": {}

Veja https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

Valores disponíveis para editar: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDITAR: Para alterar as cores da sintaxe, consulte aqui: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors e aqui: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Com isso você pode sobrescrever as cores do próprio editor, mas não as cores de algumas palavras-chave (ex: cor das strings).
Jhegs

6

Como outros afirmaram, você precisará substituir editor.tokenColorCustomizationsa workbench.colorCustomizationsconfiguração ou no arquivo settings.json. Aqui você pode escolher um tema básico, como Abyss, e apenas substituir as coisas que deseja alterar. Você pode substituir muito poucas coisas como a função, cores da string, etc. com muita facilidade.

Por exemplo, para workbench.colorCustomizations

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#130e293f",
    }
}

Por exemplo, para editor.tokenColorCustomizations:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "functions": "#FF0000",
        "strings": "#FF0000"
    }
}
// Don't do this, looks horrible.

No entanto, personalizações profundas, como alterar a cor da varpalavra - chave, exigirão que você forneça os valores de substituição na textMateRuleschave.

Por exemplo, abaixo:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "textMateRules": [
            {
                "scope": "keyword.operator",
                "settings": {
                    "foreground": "#FFFFFF"
                }
            },
            {
                "scope": "keyword.var",
                "settings": {
                    "foreground": "#2871bb",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

Você também pode substituir globalmente os temas:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                //following will be in italics (=Pacifico)
                "comment",
                "entity.name.type.class", //class names
                "keyword", //import, export, return…
                //"support.class.builtin.js", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "storage.type.function.js", // function keyword
                "storage.type.js", // Variable declarations
                "keyword.control.import.js", // Imports
                "keyword.control.from.js", // From-Keyword
                //"entity.name.type.js", // new … Expression
                "keyword.control.flow.js", // await
                "keyword.control.conditional.js", // if
                "keyword.control.loop.js", // for
                "keyword.operator.new.js", // new
            ],
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

Mais detalhes aqui: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Solução para MAC OS

Não tenho certeza se esta resposta se encaixa aqui, mas gostaria de compartilhar uma solução para usuários de MAC e ficaria estranho se eu começar uma nova pergunta e me responder lá.


procure o caminho do seu tema VSCode mais ou menos assim:

..your_install_location / Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

abra o arquivo .json e procure os estilos de destino para alterar.
Para o meu caso, quero alterar a cor de renderização do espaço em branco
e descobri que era
"editorWhitespace.foreground"
assim settings.jsonem Visual Studio Code,
adicionei as seguintes linhas (faço isso em Configurações do espaço de trabalho),

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}

Soluções guiadas por: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Não se esqueça de ⌘ Command+ SSalvar configurações entrem em vigor.


2

Os documentos agora têm uma seção inteira sobre isso.

Basicamente, use npmpara instalar yoe executar o comando yo codee você obterá um pequeno assistente baseado em texto - uma das opções será criar e editar uma cópia do esquema escuro padrão.


1

Vim aqui para encontrar uma maneira de editar o tema, mas não consegui encontrar no meu Mac. Depois de um mergulho profundo, finalmente encontrei o local de instalação:

~/.vscode/extensions

Todas as extensões estão aí!


esta resposta é boa, foi rejeitada injustamente.
Polimerase
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.