vscode-customize-css

vscode-customize-css.css

/*
 * A simple vscode style customization for https://github.com/be5invis/vscode-custom-css
 * Just put this file into anywhere and refer it from your vscode `settings.json` under `vscode_custom_css.imports` as following:
 * "vscode_custom_css.imports": [
 *   "file:///c:/Users/anyone/vscode.css"
 * ]
 **/
a.label-name,
p.subtitle.description,
h1.product-name.caption,
h2,
h3.category-title.max-lines-3,
span,
span.action-label,
.windows,
div.menubar-menu-button,
div.p-Menu-itemLabel {
  font-family: "Source Code Pro";
}

Original extension link reference: https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css.

These styles will force vscode to use Source Code Pro as the font-family for related elements.

If you want to inspect elements in popup menu items, you can locate focusout listener in the editor and set an break point at the line handling lose focus event. And then you can use the element locator to inspect menu item.

Hi, does the CSS above applies to all the UI font in VSCode including context menu, search bar and markdown preview, does it not apply to the editor

Hi, does the CSS above applies to all the UI font in VSCode including context menu, search bar and markdown preview, does it not apply to the editor

No, it's difficult to figure out all styles. There is another solution that can affect context menu, search bar and markdown preview, please check this. Editor font can be customized in settings already, that should be the right way.

Thank you for the reply @cloorc , I have already applied the above method you mentioned. I was just wondering if we could do the same in the .css file using the custom css extension. Can we customize the vscode using .js file like .css , I tried it and it runs the js file but before the html body is loaded, so I cant do much using the js file. can you tell me if there is any way to customize vscode using js file

Thank you for the reply @cloorc , I have already applied the above method you mentioned. I was just wondering if we could do the same in the .css file using the custom css extension. Can we customize the vscode using .js file like .css , I tried it and it runs the js file but before the html body is loaded, so I cant do much using the js file. can you tell me if there is any way to customize vscode using js file

Sorry couldn't help you with any further information. I'm poor with related topics.

its fine. Thanks for the reply

Hey, thanks for creating this thread.
Can someone guide me how to dim the editor when the command palette is invoked?

I tried but couldn't do what you wanted @svk-works

I tried but couldn't do what you wanted @svk-works

Oh, I managed to do that on my own. It looks so much better now!

Code_KovWYk6L5Y.mp4

That's awesome , can u provide your CSS code, it would be helpful for me and did u use js for that. Can you also give CSS code for the mouse effect in the video above

I tried but couldn't do what you wanted @svk-works

Oh, I managed to do that on my own. It looks so much better now!

Code_KovWYk6L5Y.mp4

I have to say, this is awesome! Could you please share your whole css definition? It's difficult for me to figure out all details 🥇

is there a way to hide unused Right click context menu options, its just too bloated to use

is there a way to hide unused Right click context menu options, its just too bloated to use

Sorry, I've no idea how to do this~

Hi, @cloorc , you mentioned above how to inspect right click context menu in this comment https://gist.github.com/cloorc/d2882523def38ce1ca3752b09e4e8fb2?permalink_comment_id=4404443#gistcomment-4404443 .

I have tried and found that inside 'editor-container' class which is the class of the current file opened in editor.
'editor-container' contains 'shadow-root-host' class representing the right click context menu which holds shadow root that contains li element, where each li element represents a right click context menu option, I want to apply 'display:none' to li elements which I dont want to appear by checking whether its child contains span.action-label with aria-label name that I want to hide , for example,
if I want to hide option 'Go to References' then I have to check wheather the child span.action-label has aria-label as 'Go to References' and if it does then I want to apply 'display: none' to li element,
I dont know how to apply css to elements inside shadow dom, can you guide me if you know. or if there is anyother way please guide me.

Thank you.

Hi, @cloorc , you mentioned above how to inspect right click context menu in this comment https://gist.github.com/cloorc/d2882523def38ce1ca3752b09e4e8fb2?permalink_comment_id=4404443#gistcomment-4404443 .

I have tried and found that inside 'editor-container' class which is the class of the current file opened in editor. 'editor-container' contains 'shadow-root-host' class representing the right click context menu which holds shadow root that contains li element, where each li element represents a right click context menu option, I want to apply 'display:none' to li elements which I dont want to appear by checking whether its child contains span.action-label with aria-label name that I want to hide , for example, if I want to hide option 'Go to References' then I have to check wheather the child span.action-label has aria-label as 'Go to References' and if it does then I want to apply 'display: none' to li element, I dont know how to apply css to elements inside shadow dom, can you guide me if you know. or if there is anyother way please guide me.

Thank you.

Sorry, buddy. I'm not professional on CSS yet. 😭

ok @cloorc , thanks for your response, can someone guide me how to access the elements inside shadow root using css and apply styles

Hmm, released a simple tool to start Visual Studio Code that will replace the editors font to JetBrains Mono by default.

https://github.com/horsing/coder.git