Vscode: Support user stylesheet(s) and user script(s)

[glen-84]

Atom equivalent: "Open Your Stylesheet" and "Open Your Init Script".

It's nice to be able to make small changes (e.g. I like to use a 1px-wide cursor instead of the default 2px), without having to create a theme/extension.

[bgashler1]

@chrisdias any thoughts on user stylesheets here?

[dmackerman]

This would be a killer feature.

[be5invis]

This?
https://github.com/be5invis/vscode-custom-css

[glen-84]

@be5invis It needs to be based on a supported API.

[axefrog]

I think this is an important feature. Being able to make a small tweak to an existing theme without having to deploy an entirely new theme is extremely useful when you've found a theme that pretty much suits your tastes. Maybe you want the background to be a touch darker, or to remove the underlining on function names or something. Having to build an entirely new theme is a distraction when you could simply pop open a stylesheet, add a single overriding rule and get on with things.

[opyate]

My use case: the Intellisense popup is not wide enough, so sometimes I don't see arguments to methods, for instance. Things I've tried: No handles to resize; Trackpad doesn't scroll it sideways.

[glen-84]

@opyate That should probably be reported as a bug (if it hasn't already been).

[ghost]

Please integrate this in the next relase 👍
i look this featureRequest 1 time a week 😄

[pzuraq]

The new theming options that have been made available recently are absolutely amazing and cover probably 90% of the use cases this would have, but I still think there is a use case for allowing users/themes to inject CSS styles. I am using the vscode-custom-css plugin, for instance, to add styles that allow me to have a vertical tab-bar:

When I open a large number of files seeing them all at once vertically makes it _much_ easier to find them and remember what I'm doing. In general, more drastic UI customization and experimentation with different UI/UX flows is what I'm getting at here. This is one of the major advantages of VS Code and electron based editors in general vs IDEs - we can experiment with UX, and try to find better flows and patterns rather than being stuck in the same old workflows from 10 years ago.

On the flip side, opening the pandora's box of custom CSS means that the HTML/CSS structure of the app is no longer private API, and internal changes could break lots of plugins. Maybe there's a way we can get the best of both worlds, an API that allows us to experiment like so without strongly tying things to the underlying structure and styles. Or maybe it should just be very explicit using CSS means anything could break at any time, and it's on addon authors to navigate that.

[apkd]

I feel like there's a balance to be struck here. Exposing this as an API to the extension developers isn't even necessary at first - I would settle for a supported way of loading a custom stylesheet. Support for live reload (similar to how it works for settings.json) would go a long way, too.

The vscode-custom-css extension covers my use case (applying a css filter style to increase text contrast in difficult lighting conditions) but it feels like a bit of a hack; it requires admin rights, makes vscode complain about a corrupted installation and I expect it to fail after an update or two.

[gabrielecirulli]

Similarly to the other commenters, I used vscode-custom-css to make small tweaks to the display of files in Explorer. Being able to customize the editor's visuals to your own needs would add an amazing layer of control on top of an already great editor.

I feel like there's a balance to be struck here. Exposing this as an API to the extension developers isn't even necessary at first

Indeed. I think the biggest use case here is for end-users to be able to make small tweaks without requiring the time investment of building their own theme or forking the one they're using. The possibility to have live-reload of custom CSS and a much more clean solution than what vscode-custom-css can offer would be great reasons to pursue this.

[usernamehw]

@bpasero, seeing you close this PR https://github.com/Microsoft/vscode/pull/40764#issuecomment-355011312 attempting to fix the issue you can as well close this, since there is no intention to allow this kind of modifications whatsoever. The next user won't waste their time making a new PR.

[bpasero]

@usernamehw yes good point. Closing as per https://github.com/Microsoft/vscode/pull/40764#issuecomment-355011312

People that have voted on this issue please cast your vote on the related theming issues, e.g. #26128, #26129 and #26130

[ThomasHickman]

@bpasero is there an issue tracking the ability to easily create user scripts, analogous to using the "Open Your Init Script" menu item in atom?

[bpasero]

@ThomasHickman is that about injecting custom JavaScript into VS Code on startup? We would probably not accept that either for similar reasons as outlined in https://github.com/Microsoft/vscode/pull/40764#issuecomment-355011312

[ThomasHickman]

Hmm, I was thinking of a feature where would you would be able to add JavaScript macros, which would execute as if they were an extension e.g. in javascript psudocode, this could be in the "init script":

addCommand("repeat_text", () => {
    let text = user_input("What text would you like to repeat?");
    let repeat_times = parseInt(user_input("How many times would you like repeat the text?"))

    text_editor.insert(text.repeat(repeat_times));
})

This is what I use the "Open Your Init Script" feature in atom for, however I think this would probably depend on https://github.com/Microsoft/vscode/issues/1422 being resolved

[bpasero]

@ThomasHickman I see, that sounds a bit different from this request so maybe worthwhile to file as feature request (after searching for duplicates).

[andraz]

Quick fix: copy-paste or enter css manually upon each app start, steps described in the #42336

[andraz]

I agree that doing this manual solution each time is stupid and unnecessary (I am using a macro to do it for me) as it could be a simple setting that writes a string to that place.

But as long as nobody in the vscode team knows how to program this feature into the software, we have no other option to make GUI presentable.