Skip to content

Instantly share code, notes, and snippets.

@cloorc
Last active May 13, 2024 06:29
Show Gist options
  • Save cloorc/d2882523def38ce1ca3752b09e4e8fb2 to your computer and use it in GitHub Desktop.
Save cloorc/d2882523def38ce1ca3752b09e4e8fb2 to your computer and use it in GitHub Desktop.
vscode-customize-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";
}
@cloorc
Copy link
Author

cloorc commented Jan 25, 2023

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.

@BabcB
Copy link

BabcB commented Jan 25, 2023

its fine. Thanks for the reply

@al1gned
Copy link

al1gned commented Mar 9, 2023

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

@BabcB
Copy link

BabcB commented Mar 17, 2023

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

@al1gned
Copy link

al1gned commented Mar 17, 2023

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

@BabcB
Copy link

BabcB commented Mar 17, 2023

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

@cloorc
Copy link
Author

cloorc commented Mar 18, 2023

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 🥇

@BabcB
Copy link

BabcB commented Apr 6, 2023

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

@cloorc
Copy link
Author

cloorc commented Apr 7, 2023

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~

@BabcB
Copy link

BabcB commented May 28, 2023

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.

vscode-context-menu

Thank you.

@cloorc
Copy link
Author

cloorc commented May 30, 2023

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.

vscode-context-menu

Thank you.

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

@BabcB
Copy link

BabcB commented May 30, 2023

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

@cloorc
Copy link
Author

cloorc commented Apr 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment