Color de la barra de estado de Visual Studio Code

104

El color predeterminado de la barra de estado de Visual Studio Code es azul y me distrae bastante. Usé esta extensión para cambiar el color pero dejó de funcionar después de la 1.10.2actualización.

Shahzaib Rahim
fuente
11
Apruebe la respuesta :)
holms

Respuestas:

194

Puede cambiar el color de la barra de estado editando la configuración del usuario agregando estas líneas de código en ella:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}
acesmndr
fuente
¿Se puede hacer esto de forma dinámica? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');no parece hacer nada?
Tom H
@TomH No soy un experto y no estoy muy seguro de cómo se hace "dinámicamente", pero la ejecución Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})me da un TypeError que me dice que no podemos asignar a una propiedad de solo lectura. Así que supongo que usar el método getConfiguration no es la forma correcta de hacerlo.
acesmndr
3
Esto funciona bien gracias @acesmndr. Como se describe aquí: code.visualstudio.com/docs/getstarted/… , también puede realizar este cambio en el tema del archivo de configuración del usuario específico como este: "workbench.colorCustomizations": {"[Markdown Editor Dark]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},
Walton
respuesta realmente útil @acesmndr
Akhila
62

1) Voy a ahorrar 30 minutos de tiempo a novatos como yo, tiene que ser editado en el archivo settings.json. La forma más fácil de acceder es a Archivo -> Preferencias -> Configuración, busque "Color", elija una opción "Mesa de trabajo: Personalizaciones de color" -> "Editar en settings.json".

2) Esto usa la solución propuesta por "Gama11", pero ¡nota !: la forma final del código en settings.json debería ser así - note las llaves dobles alrededor de "workbench.colorCustomizations":

{
  // fontSize just for testing purposes, commented out.
  //"editor.fontSize" : 12

  // StatusBar color:
     "workbench.colorCustomizations": {
     "statusBar.background" : "#303030",
     "statusBar.noFolderBackground" : "#222225",
     "statusBar.debuggingBackground": "#511f1f"
    }
}

Después de copiar / pegar el código anterior, presione Ctrl + S para guardar los cambios en 'settings.json'.

La solución se ha adaptado desde aquí: https://code.visualstudio.com/api/references/theme-color

J.Paul
fuente
21

Dado que cada tema es tan diferente, probablemente no desee realizar cambios como este a nivel mundial. En su lugar, especifíquelos por tema: por ejemplo:

"workbench.colorCustomizations": {
    "[Some Theme Name]": {
        "statusBar.background" : "#486357",
        "statusBar.foreground" : "#c8e9c5",
    },
    "[Some Other Theme Name]": {
        "statusBar.background" : "#385357",
        "statusBar.foreground" : "#d7e9c4",
    }
},

De esa manera, cuando cambie entre sus temas favoritos, sus personalizaciones no se olvidarán y tendrán sentido en ese contexto.

coctelera
fuente
2
También es genial aplicar esto a la configuración del espacio de trabajo para diferenciar entre diferentes proyectos, cuando hay varias instancias de VSCode abiertas. También se puede cambiar titleBar.activeBackgroundy titleBar.activeForegroundhacerlo aún más evidente.
Qwerty
Tenga en cuenta que, al igual que en las otras respuestas, probablemente también desee configurar statusBar.noFolderBackgroundy statusBar.debuggingBackground, de lo contrario, no se verán afectados.
lapis
3

En mi opinión, existe una solución más sólida y sólida que las respuestas anteriores, y eso es para cambiar el color de la barra de estado en función del archivo en el que está trabajando, se llama ColorTabs
y le permite proporcionar una lista de expresiones regulares y cambiar eso color basado en eso.

Descargo de responsabilidad: escribí la extensión Enjoy!

orepor
fuente
Buena extensión: me encantaría que la expresión regular funcione en la ruta completa para poder diferenciar entre todos mis proyectos abiertos de VSCode.
cyberwombat
1
En realidad, estaba en rutas completas, pero lo cambié a rutas relativas ... Tal vez se pueda configurar
orepor
1
Esto sería bueno para configurar los colores de las pestañas en la rama en lugar del nombre del archivo - si es desarrollado -> verde, qa -> naranja, maestro -> rojo, otros -> predeterminado?
Johan Aspeling
1
El tipo que escribió una extensión que resuelve el problema tiene menos votos que otras publicaciones que repiten lo que dice la publicación superior, bueno.
a.anev
1

Presione control+shift+pcuando abra vscode y escriba open settings(UI)y busque window.titleBarStyley cambie la opción de nativea custompara que pueda restaurar el color de la barra de estado de whitea black.

Nota importante: esta técnica funciona para la versión de actualización 1.32 de vscode lanzada en febrero de 2019.Asegúrese de haber actualizado su vscode a la última versión 1.32 o a las más recientes, ya que es posible que no funcione para las versiones anteriores.

Captura de pantalla de ejemplo

Rahul Ahire
fuente
7
no responde la pregunta, no está relacionada con la barra de estado
Gal Margalit
como Gal dijo anteriormente, la barra de título no es barra de estado - primero es en la parte superior, este último es en la parte inferior
Revelt
1

Estos son los pasos que tomé para configurar los colores de la barra de estado de VS Code en macOS para un espacio de trabajo (no globalmente).

Ver | Paleta de comandos ... | Busque "Configuración del espacio de trabajo abierto (JSON)"

(Esto abrirá el archivo del proyecto [nombre del proyecto] .code-espacio de trabajo).

Agregue las personalizaciones de color en la propiedad de configuración.

{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

Esto es realmente útil cuando tiene varias instancias de VS Code abiertas y desea diferenciar visualmente cada ventana sin tener que cambiar el tema global.

HelloWorldDude
fuente
0

Puede cambiar el color editando extensiones:

 "colors":{
        "statusBar.background": "#505050",
    },
usuario10753201
fuente