question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add Opacity & Variable Height to Minimap

See original GitHub issue

I’m looking for a way to change my VSCode Editor Minimap to behave more like the Atom Minimap.

Specifically, to have container opacity and variable height as the file grows in length. The opacity is what is most important to me, but the variable container length would help a lot as well.

Currently, my Atom minimap allows opacity and only grows in length as needed.
capture

While my VSCode minimap covers my code and maintains full pane height no matter how many lines are in the file. capture1

I tried asking a question about this on stackoverflow and looking through these issues. So far the closest I’ve found to this question is issue #21255, which points to issue #21229 and then to issue #21359, which lead to the implementation of a box shadow to make the minimap separation more prominent.

Unfortunately, the box shadow doesn’t allow me to recover that text editor width while keeping my minimap enabled. This makes the difference between being able to see all my code using 2 panes and having my code cut off by the minimap.

I’m sure a lot of people transitioning from Atom to VSCode would appreciate being able to maintain this editor workspace, particularly when working with a lot of smaller files.

EDIT:

Adding what information I can in case you consider feature implementation:

Atom uses a gear icon that appears over the minimap on mouseover allows for ‘absolute-mode’ to be toggled on and off. This option toggles between a VSCode-like minimap and the one I showed above. capture3

From what I understand of the VSCode design paradigm so far, I think a similar feature could be toggled as a User Setting such as "editor.minimap.absolutePosition": true,

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:44
  • Comments:17 (2 by maintainers)

github_iconTop GitHub Comments

33reactions
robinmachargcommented, Jan 8, 2021

To save a click-through for anyone landing here, CMD-SHIFT-P -> Open Settings (JSON), and paste the following into the top level of the JSON:

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

This fixes the opacity (I use #000000 instead of white). I can live without the variable height.

28reactions
IMBurbankcommented, Dec 3, 2019

This feature is just as important today as it was 2.5 years ago.

It’s quite disappointing that this feature request has never been directly addressed, even in response to PRs, particularly since it’s an opt-in feature - minimap opacity would only change if set to less than 100%.

If there’s a reason this feature request won’t be accepted, I think a lot of people would appreciate knowing that so they can act accordingly. If this feature would be accepted in some form, I would be more than happy to submit a new PR for it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change VSCode minimap colors - Stack Overflow
Starting in VS Code 1.43.0, you can change the minimap opacity and background color with the following setting in settings.json: "workbench.
Read more >
Using the Little-Known CSS element() Function to Create a ...
Here's how the equation in the script was determined, starting with the variables: x1 = height of minimap (as well as the width...
Read more >
Minimap - Phoenix Firestorm Project - Wiki
The mini-map gives you an overview of the region in which you are located. It shows the region and people and objects in...
Read more >
MiniMap - Skyrim Special Edition - Nexus Mods
HideFrame If set to true, the frame will be hidden. Width Width of minimap. Height Height of minimap. Alpha Terrain opacity.
Read more >
Creating a working mini-map - Valve Developer Community
Download and install the GIMP DDS Plugin 2.0. · Start up GIMP and open the . · Using the Canvas Size tool (Image...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found