Change VSCode minimap colors

Question

I can't find anywhere in VSCode theming docs how to change the colors of the minimap (background, highlight,...), can someone please help me with this?

Thanks.

JinSnow · Accepted Answer · 2023-03-04 15:26:26Z

32

this works for me:

"workbench.colorCustomizations": {
   "scrollbarSlider.activeBackground": "#62fa1b",
   "scrollbarSlider.hoverBackground": "#fa2a1b",
   "scrollbarSlider.background": "#c97554",
},

credit

(Keywords for google: VS Code make minimap lighter)

edited Mar 4, 2023 at 15:26

answered Oct 6, 2019 at 6:37

JinSnow

1,6914 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sean O Over a year ago

Brilliant. The default of "minimap.scrollbarSlider": "1% lighter" is such a pain. Adding "VS Code make minimap lighter" for Google juice, to maybe help others save some time.

JinSnow Over a year ago

@SeanO Not sure I understood you correctly, I added your keywords for google in my answer. Feel free to edit/improve my answer.

Qwertie · Accepted Answer · 2020-03-12 15:56:49Z

26

Starting in VS Code 1.43.0, you can change the minimap opacity and background color with the following setting in settings.json:

"workbench.colorCustomizations": {
    "minimap.background" : "#00002299"
}

I reached this by going to File | Preferences | Settings, typing "workbench.colorCustomizations" in the search box, and clicking "Edit in settings.json".

These are hexadecimal numbers and the order of the color channels is RGBA, so this example gives a very dark blue background and (full-size) characters from the editor can be seen behind the minimap.

answered Mar 12, 2020 at 15:56

Qwertie

17.4k22 gold badges115 silver badges154 bronze badges

4 Comments

Qwerty Over a year ago

Needful to say that the alphachannel of the background color affects the whole opacity and thus making even the foreground (text color) transparent, which in turn reduces readability. github.com/microsoft/vscode/issues/92490

Qwerty Over a year ago

btw, great nick

FlorianGD Over a year ago

You can also change the color for a specific theme with { "[your_theme]" : {"minimap.background": ...} }

Joep Over a year ago

Try #1e1e1e33, it's the exact color of vscode's default theme background. The last two characters control the opacity.

GollyJer · Accepted Answer · 2020-05-23 03:33:35Z

20

Here's how I sync up my customized minimapSlider and scrollbarSlider.

"workbench.colorCustomizations": {
  "scrollbarSlider.background": "#0000001a",
  "minimapSlider.background": "#0000001a",
  "scrollbarSlider.hoverBackground": "#00000028",
  "minimapSlider.hoverBackground": "#00000028",
  "scrollbarSlider.activeBackground": "#00000028",
  "minimapSlider.activeBackground": "#00000028",
},

answered May 23, 2020 at 3:33

GollyJer

27.2k18 gold badges126 silver badges190 bronze badges

1 Comment

JohnWatsonDev Over a year ago

We also needed "editor.minimap.showSlider": "always". The setting of "minimapSlider.background" is what I needed.

Eric Kratzer · Accepted Answer · 2018-10-25 20:48:17Z

7

I fought this one for a while, turns out it's "editor.background" but you have to restart vscode for it to take effect.

answered Oct 25, 2018 at 20:48

Eric Kratzer

1101 silver badge4 bronze badges

1 Comment

sɐunıɔןɐqɐp Over a year ago

From Review: Hi, this post does not seem to provide a quality answer to the question. Please either edit your answer and improve it, or just post it as a comment.

Laz · Accepted Answer · 2022-01-26 08:34:13Z

3

To always show the minimap slider (without having to mouseover) go to File| Preferences| Settings and search (type in): "minimap show slider".

Change the default "mouseover", to "always".

answered Jan 26, 2022 at 8:34

Laz

1531 silver badge5 bronze badges

Comments

zangbianxuegu · Accepted Answer · 2023-05-23 02:00:15Z

1

  "editor.minimap.showSlider": "always",
  "workbench.colorCustomizations": {
      "scrollbarSlider.activeBackground": "#62fa1b",
      "scrollbarSlider.hoverBackground": "#fa2a1b",
      "scrollbarSlider.background": "#c97554",
      "minimap.background": "#252525",
  }

answered May 23, 2023 at 2:00

zangbianxuegu

1555 bronze badges

Comments

Neil Gaetano Lindberg · Accepted Answer · 2024-04-03 21:05:19Z

I have no clue why the accepted answer is such. If the OP means to ask about the minimap then these are some of what you would want. I'll point out that in my screenshot you see the editorGutter colors on the right, i.e. the drastically different editorGutter.modifiedBackground in red and then the minimapGutter colors show on the left, and to hightlight the difference the minimapGutter.modifiedBackground is shown for the same change in a neon green (and they're not showing aligned because of scroll position).

  "workbench.colorCustomizations": {
    "editorGutter.addedBackground": "#00ff7b",
    "editorGutter.deletedBackground": "#fff000",
    "editorGutter.modifiedBackground": "#ff0000",
    "minimapGutter.addedBackground": "#00ff7b",
    "minimapGutter.deletedBackground": "#770909",
    "minimapGutter.modifiedBackground": "#37ff00",
    ...
  },

Webvoid · Accepted Answer · 2018-06-01 09:46:41Z

0

I think those settings can be overwritten. Go to your VSCode settings and under the workbench.colorCustomizations settings, the ones you're interested in are those starting with scrollbarSlider.*.

Check https://code.visualstudio.com/docs/getstarted/themes for more infos.

Hope it helps

edited Jun 1, 2018 at 9:46

answered Jun 1, 2018 at 9:36

Webvoid

5112 silver badges7 bronze badges

3 Comments

Emi-C Over a year ago

Yeah I already tweaked workbench.colorCustomizations but scrollbarSlider keys don't affect the minimap :(

Webvoid Over a year ago

otherwise, take a look at gist.github.com/Hendrixer/7a250a2be529cda8939de8305c9a85a1

Emi-C Over a year ago

scrollbarSlider just affects the scrollbar sliders, not the minimap bg unfortunately :(

Collectives™ on Stack Overflow

Change VSCode minimap colors

8 Answers 8

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related