-
-
Save cloorc/d2882523def38ce1ca3752b09e4e8fb2 to your computer and use it in GitHub Desktop.
| /* | |
| * 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"; | |
| } |
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.
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
这看起来太酷了，您能分享一下您的配置吗？
This looks cool. Can you share your configuration?
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.