themes - temas - visual studio code customize color theme

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

Question

Estoy usando Windows 7 de 64 bits.

¿Hay alguna manera de editar el tema oscuro predeterminado en el Código de Visual Studio? En la carpeta% USERPROFILE% .vscode solo hay temas de las extensiones, mientras que en la ruta de instalación (usé por defecto, C: / Archivos de programa (x86) / Microsoft VS Code) hay archivos de algunos temas estándar en / resources / app / extensiones, 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, miembro del puntero y nombre de la clase y estructura en el lenguaje C ++?

Answer 1

Como han dicho otros, deberá anular el editor.tokenColorCustomizations o la configuración workbench.colorCustomizations 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 cadena, etc., muy fácilmente.

Por ejemplo, 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 palabra clave var requerirán que proporcione los valores de anulación bajo la clave textMateRules .

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

Answer 2

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

Answer 3

El archivo que está buscando está en,

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

en Windows y busque el nombre de archivo dark_vs.json para ubicarlo en cualquier otro sistema.

Answer 4

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 de temas.

Nota al margen: me encanta el tema de Monokai. Sin embargo, todo lo que quería cambiar era el fondo. No me gusta el fondo gris 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.

Answer 5

En el código VS ''Configuración de usuario'', puede editar 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 C ++, use la siguiente etiqueta,

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

Answer 6

La forma más sencilla es editar la configuración del usuario y personalizar https://code.visualstudio.com/docs/getstarted/theme-color-reference

Si quieres hacer tu tema

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

Answer 7

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

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

Answer 8

No estoy seguro de si esta respuesta es adecuada 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 contesto allí.

[Solución para MAC OS]
busque su ruta de tema VSCode algo como a continuación:

..tu_instalación_ubicación / Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

abra el archivo .json y busque sus estilos específicos para cambiar.
Para mi caso, quiero cambiar el color de representación del espacio en blanco
y lo he encontrado como
"editorWhitespace.foreground"
así que en settings.json en 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 olvides ⌘ Command + S guardar la configuración para que surta efecto.

Answer 9

No puede "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 para el 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:

• descargue este archivo: https://github.com/Microsoft/vscode/blob/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults/themes/dark_plus.tmTheme
• Modifica como quieras
• Genere un tema usando Yo Code https://code.visualstudio.com/docs/tools/yocode
• Copie ese tema en su carpeta de extensión. O, si tiene ganas de compartir, publíquelo en el mercado de VS Code.