Change the color of hidden files and folders in VS Code

Last update: 17 December, 2023

I often switch between dark and light themes in VS Code to keep my coding environment fresh and engaging. My preference leans towards light themes, such as pre-installed Quiet Light.

Customizing the morgan.code theme

My latest choice is the morgan.code theme, crafted by Morgan Richardson. Its contrasting colors are particularly soothing for my eyes.

After using this theme for some time, I noticed a longing for a familiar sight &mdhash; files and folders ignored by git displayed in a specific shade of gray. The morgan.code theme, however, presents these items in a blue-ish tone, possibly Cyan or Aqua.

Original theme

Changing ignored files and folders color

VS Code has a property named gitDecoration.ignoredResourceForeground for customizing the color of ignored files and folders. This property when used in conjunction with workbench.colorCustomizations allows overriding the default theme color.

Here is how I adjusted the color setting in my settings.json:

{
  // ...
  "workbench.colorCustomizations": {
    // select theme you want to apply color customization value
    "[morgan.codes]": {
      "gitDecoration.ignoredResourceForeground": "#434343"
    }
  }
}

With this simple tweak, the ignored files and folders now appear in a familiar gray. My optic nerves are happy again.

customized theme

Conclusion

The level of customization in VS Code allows, never ceases to amaze me.