¿Cómo editar el tema oscuro predeterminado para Visual Studio Code?


88

Estoy usando Windows 7 de 64 bits.

¿Hay alguna forma de editar el tema oscuro predeterminado en Visual Studio Code? En la %USERPROFILE%\.vscodecarpeta solo hay temas de las extensiones, mientras que en la ruta de instalación (usé la predeterminada C:\Program Files (x86)\Microsoft VS Code) hay archivos de algunos temas estándar \resources\app\extensions, como Kimbie Dark, Solarized Dark / Light o variantes de Monokai, pero no hay un tema oscuro predeterminado.

Pero si, después de todo, existe la posibilidad de editarlo, ¿qué bloques de código son responsables del color del miembro del objeto, del miembro del puntero y del nombre de la clase y estructura en el lenguaje C ++?


4
Para cualquiera que venga aquí: no necesita buscar y modificar o crear ningún archivo de tema. Todo se puede modificar usando workbench.colorCustomizationsy editor.tokenColorCustomizationsen la configuración del usuario: code.visualstudio.com/docs/getstarted/… .
chipit24

También se podría esperar una obsoleta, pero se está trabajando en una característica que nos permitiría agregar CSS global personalizado, como el Atoms Edit -> Stylesheet...último cambio al problema fue marzo github.com/Microsoft/vscode/issues/459 . Es decepcionante que esté cerrado para comentarios. La API actual no permite que una extensión modifique el CSS global ... así que tendremos que esperar o pegar CSS manualmente en las herramientas de desarrollo como caveman.
Ray Foss

Respuestas:


47

El archivo que está buscando está en,

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

en Windows y busque el nombre del archivo dark_vs.jsonpara ubicarlo en cualquier otro sistema.


Actualizar:

Con las nuevas versiones de VSCode, no es necesario buscar el archivo de configuración para personalizar el tema. Ahora puede personalizar su tema de color con la configuración de usuario workbench.colorCustomizationsy editor.tokenColorCustomizations. La documentación al respecto se puede encontrar aquí .


11
En Linux, está en/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
En Arch Linux, es (versión de código abierto) en/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
De forma predeterminada, VS Code se instala en C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén

2
La actualización de esta respuesta es una buena recomendación. Descubrí que si edita los archivos del tema directamente, se pueden sobrescribir o se sobrescribirán en una actualización de VS Code.
cniggeler

73

En la 'Configuración de usuario' del código VS, puede editar los colores visibles usando las siguientes etiquetas (esta es una muestra y hay muchas más etiquetas),

"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"}

Si desea editar algunos tokens de color de C ++, use la siguiente etiqueta,

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

1
Pero si va más allá de tokenColorCustomizations, ¿qué hago?
Alex

¿Dónde se puede encontrar una lista de todas las opciones disponibles en "editor.tokenColorCustomizations"?
ololobus


Mi edición fue rechazada por alguna razón, pero para que esta respuesta aborde específicamente el deseo del OP de cambiar un tema específico, puede especificar el tema y modificar los colores sin alterar los archivos del tema: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

Se llama "Workbench: personalizaciones de color" en la configuración
Zach Saucier

29

En cuanto a los temas, VS Code es tan editable como Sublime. Puede editar cualquiera de los temas predeterminados que vienen con el código VS. Solo tiene que saber dónde encontrar los archivos del tema.

Nota al margen: me encanta el tema Monokai. Sin embargo, todo lo que quería cambiar era el fondo. No me gusta el fondo grisáceo oscuro. En cambio, creo que el contraste es MUCHO mejor con un fondo negro sólido. El código aparece mucho más.

De todos modos, busqué el archivo de tema y lo encontré (en Windows) en:

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

En esa carpeta encontré el archivo Monokai.tmTheme y modifiqué la primera clave de fondo de la siguiente manera:

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

Hay algunas claves de "fondo" en el archivo de tema, asegúrese de editar la correcta. El que edité estaba en la parte superior. Línea 12, creo.


5
Las ubicaciones de instalación de Ubuntu son como/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
Y para mac, encontré que los archivos de actualización en estas rutas funcionaron: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + py escriba reload windowcmd para probar inmediatamente el cambio :)
balajikris

1
La modificación del fondo del tema también se puede realizar "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }en la configuración del usuario.
Bilbo

1
Para el código VS de 64 bits en Windows, la ruta base C:\Program Files\Microsoft VS Code\resources\app\extensions\ suele ser seguida portheme-....
Peter B

Modifique el tema en la configuración del usuario con "workbench.colorCustomizations": { "editor.background": "#000" },. Aquí están las diferentes personalizaciones que puede hacer: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

No puedes "editar" un tema predeterminado, están "bloqueados"

Sin embargo, puede copiarlo en su propio tema personalizado, con las modificaciones exactas que desee.

Para obtener más información, consulte estos artículos: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Si todo lo que desea cambiar son los colores del código C ++, debería considerar sobrescribir el colorizador de soporte de C ++. Para obtener información al respecto, vaya aquí: https://code.visualstudio.com/docs/customization/colorizer

EDITAR: El tema oscuro se encuentra aquí: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Para aclarar:


1
¿Y de dónde puedo copiarlo? En los artículos que me enviaste no hay nada al respecto. Y no quiero instalar nada para algo tan trivial como cambiar un poco el resaltado de sintaxis, especialmente cuando podría abrir el archivo correcto y modificar algunas líneas de código, si el tema predeterminado no estaba bloqueado. Además, para generar un nuevo tema con Yeoman Generator se necesita un archivo .tmTheme de otro tema: no hay un tema oscuro de Visual Studio en el sitio web ColorSublime y no tengo acceso al "bloqueado" de VSC.
Toreno96

¿Quizás podría editar el archivo c ++. Plist de "C: \ Archivos de programa (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Pero, ¿qué bloques de código debo cambiar? ¿O tal vez hay un archivo fuente del tema oscuro predeterminado de VSC en alguna parte, que podría usar para crear mi propio tema personalizado?
Toreno96

No puede editarlo, porque creo que está guardado dentro del código fuente. Sin embargo, puede copiarlo / pegarlo y cambiar un par de líneas. Está ubicado en GitHub. Lo encontré para ti: github.com/Microsoft/vscode/tree/… Respuesta editada con enlace
Tobiah Zarlez

Es posible editar el archivo c ++. Plist que menciono, lo verifiqué. Y entendí por el artículo sobre colorizadores que es un archivo de colorizador estándar para lenguaje C ++. Corrígeme si me equivoco. Pero si todavía está hablando de editar el tema predeterminado, sí, sé que no puedo hacer eso, entendí la oración al respecto desde su primera respuesta. Gracias por la información sobre el código fuente en GitHub y el enlace, pero verifiqué y los temas de allí no son los predeterminados, sino una variación modificada y más colorida de estos. Desafortunadamente, no de la manera que me gustaría.
Toreno96

1
Pero por accidente descubrí que el tema "Xcodedefault" de la galería de extensiones tiene la misma sintaxis resaltando que el oscuro predeterminado. Debido a que ahora está en la carpeta de extensión de mi disco, después de la instalación, puedo modificarlo, al igual que quería modificar el tema oscuro predeterminado. Entonces, mi problema está resuelto.
Toreno96

15

La forma más sencilla es editar la configuración del usuario y personalizar workbench.colorCustomizations

Editar personalizaciones de color

Si quieres hacer tu tema

También existe la opción de modificar el tema actual que copiará la configuración actual del tema y le permitirá guardarlo como un *.color-theme.jsonarchivo JSON5

Generar tema de color a partir de la configuración actual


1
¿Quiere reordenar su respuesta para que la respuesta mejor y más fácil sea la primera? =]
Relequestual

14

Cualquier tema de color se puede cambiar en esta sección de configuración en VS Code versión 1.12 o superior:

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

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

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

EDITAR: Para cambiar los colores de sintaxis, consulte aquí: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors y aquí: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Con eso, puede anular los colores del editor en sí, pero no los colores de algunas palabras clave (por ejemplo, color de cadenas).
Jhegs

6

Como han dicho otros, deberá anular editor.tokenColorCustomizationsla workbench.colorCustomizationsconfiguración o en el archivo settings.json. Aquí puede elegir un tema base, como Abyss, y solo anular las cosas que desea cambiar. Puede anular muy pocas cosas como la función, los colores de las cuerdas, etc. muy fácilmente.

Ej. Para workbench.colorCustomizations

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

Por ejemplo, para editor.tokenColorCustomizations:

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

Sin embargo, las personalizaciones profundas, como cambiar el color de la varpalabra clave, requerirán que proporcione los valores de anulación debajo de la textMateRulesclave.

Por ejemplo, a continuación:

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

También puede anular globalmente todos los 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"
            }
        }
    ]
}

Más detalles aquí: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Solución para MAC OS

No estoy seguro de si esta respuesta se adapta aquí, pero me gustaría compartir una solución para los usuarios de MAC y parece incómodo si comienzo una nueva pregunta y me respondo allí.


busque la ruta del tema de VSCode algo como a continuación:

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

abra el archivo .json y busque los estilos específicos para cambiar.
Para mi caso, quiero cambiar el color de renderizado del espacio en blanco
y lo encontré
"editorWhitespace.foreground"
así settings.jsonen Visual Studio Code,
agregué las siguientes líneas (lo hago en Configuración del espacio de trabajo),

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

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


No se olvide de ⌘ Command+ SGuardar configuración surta efecto.


2

Los documentos ahora tienen una sección completa sobre esto.

Básicamente, use npmpara instalar yoy ejecute el comando yo codey obtendrá un pequeño asistente basado en texto, una de cuyas opciones será crear y editar una copia del esquema oscuro predeterminado.


1

Vine aquí para encontrar una manera de editar el tema, pero no pude encontrarlo en mi Mac. Después de una inmersión profunda, finalmente encontré el lugar de instalación:

~/.vscode/extensions

¡Todas las extensiones ahí!


esta respuesta es buena, fue injustamente rechazada.
Polimerasa
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.