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.

visual-studio-code background-color statusbar

— Shahzaib Rahim
fuente

11

Apruebe la respuesta :)

— holms

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.

— 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

Hay una extensión más disponible https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock para cambiar el color del lugar de trabajo. Le permite elegir un color diferente para cada instancia de código vs

— Maxim Isaev
fuente

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