The key for these customizations is the fact that it relies heavily on keyboard shortcuts. For people like me, who can't remember 500+ shortcuts, I prefer menus. However, this was very informative.
One of the keyboard shortcuts (Ctrl+Shift+P) is secretly 500+ keyboard shortcuts in disguise, with a search function to find exactly what you need without having to click through the interface.
@@InarusLynxHe is saying you can do all the customizations shown but keep the menu bar from top which will have everything you need and overtime your muscle memory will remember the shortcuts. Also command pallete is there as well to search for what you need.
@@glennraya hey brother good morning, and in case I don't see ya': good afternoon, good evening, and good night! I totally did the whole transformation and i am loving it. Also doing some tweaks and changes to my comfort and color.
@@-Anubhab Thank you! 🙏🏼 You can tweak it to your heart's content, you can even create a unique functionality using this technique as you can add your own JavaScript to VS Code. Enjoy!
@@-Anubhab You can install icon sets just like how you install a regular extension, you can go to the extensions panel and search for icons. I recommend "Catppuccin Perfect Icons", or you can browse something you like there.
Thanks! I’ll follow up on this since some people rightly pointed out that it’s too minimalist and lost some of the important features. But I’ll address that in the upcoming video. In the meantime, this setup is designed for editors who prefer a minimalist approach.
no one can make nvim inside any IDE, there would be so many inconsistencies even the yanking doesn't work properly in VSC it just doesn't go in global buffer. Sorry to say but VSC sucks.
@@ItsBarmanji Are you ok? I don't know what you're ranting about. This video is obviously just a customization video, not promoting VS Code (that you hate). And by the way, this customization is inspired by the Zed editor, not NVim, I haven't used it.
@@drugoviic actually it does not. yanking works horribly in vim mode the copying is not global scoped also the fire manipulation is just absurd compare to vim.
Thanks for the great template! I had to tweak a few things, like fixing the command palette moving when fewer options were shown, but now it works perfectly. Love how it looks!
Thank you! I will be releasing sort of a part 2 of this, where I will discuss VS Code editing productivity. Since this is a minimal setup, a lot of people rightfully criticized it's too simple, like the line numbers are gone, tabs are gone and so on.
Thank you! 🙏🏼 I would love to, but since this is a fairly new channel, I still only have a few videos in my library. When this grows, I will re-organize the contents.
I always wanted to give VSCode a more Aqua look, like how the old Mac OS X versions looked (Snow Leopard GUI for example) so this is a wonderful tutorial. Thanks for sharing.
This is the most nice looking VSCode setup! I followed it and made some tweaks to make this like my terminal set up. This tutorial is so helpful that not only it guides you but also teach you how to customise the settings yourself in an easy and concise way of explaining. Kudos!🎉
VS Codeはテーマや拡張機能でカスタマイズが簡単にできるエディタですが、さらに進んで見た目や動作を大きく変える方法が紹介されているのは新鮮です。自分好みに完全にカスタマイズすることで、開発環境がより快適になり、作業効率がアップしますね。どんな拡張機能や設定でVS Codeを変身させるのか、具体的な例が気になります！
If anyone is trying to follow along with Codium and noticed that there's no "Custom CSS and JS Loader", try "Apc Customize UI++" instead and import the css on your user settings JSON as: `"apc.imports": ["yourOwnPath"]... thanks for the video!
yes, i have encountered the same problem and it did not work the CUSTOM CSS.... and i followed your suggestion, "apc.imports": ["file:///Users/myUsername/vscode_custom_css"] is what i've typed for the extension of APC, however idk why it still did not work? could you assist me further? i would really appreciate this. thanks
@@soldout2866 from the extension readme : "apc.imports": [ "/Users/some/path/style.css", "/Users/some/path/script.js", "/C:/Users/path/style.css", // Windows path ... no "file://" in the path
its the tutorial that im looking for brooo! i really like to keep my vs code minimalistic as possible but this one push beyond what i have rn, so thank you
@@glennraya May I ask you a question? I applied the command palette partially and used it. When I type something and the result shrinks, the command palette also shrinks, and the input command gradually moves toward the center. Can I fix it based on the initial palette's top line?
@@마카-p6w I ran into the same issue and you can simply add this piece of css: .quick-input-list, .quick-input-list .list_id_6 { min-height: 400px !important; } That's the classes that controls the command palette height, you can also experiment with your own implementation.
one of the best video, i have ever seen. Thanks man. I have been in this field for the last few years but my vs code was not looking great, but it will look great now
I've always been attracted to super dark themes, but no matter how many times I've tried to keep it like that, I kept on switching themes like a maniac. I finally settled with the Slack inspired light theme and I honestly thought this would be the end of the endless theme hunting. Your video showed up on my news feed and I honestly wasn’t expecting much. I'm glad I was wrong. Thank you so much! This is honestly the best discovery I've made in a long time.
8:30 Even though I entered the correct PATH of the custom-vscode.css file in the settings.json file, The source is saying that it couldn't load the custom-vscode.css file. My OS is Windows, what should I do?
@@VelixRoblox Often times the path was wrong, path should be exactly as shown. If it still doesn't work, might be some other extension are conflicting with CSS and js loader extension.
I changed it to restore some icons and change font family to Prompt. Did not take much time. Thanks for sharing! Let me know if you'd like to see remixes as a PR's (for inspection and inspiration for future versions)
Thank you! well actually it's my personal preference only (the one in my settings). So I can easily restore mine in case I got a new machine for example, so probably let's skip the PR for now. 👍
Update for Window users: it seems that it conflict with APC Customize UI extension, and you have to open it natively with admin permission so it won't cache with other profiles. Tbh that's a deal breaker for me. It's quite fair to said that this video is more so towards Mac users, for window is a debatable option.
@@dreams4550 Ah that's right. I remember I also used APC before and yeah it conflicts with css and js loader. However, this is not just for mac users as there are a lot of windows users who doesn't have the same issue.
Having trouble on windows, even though the paths for the custom CSS and JS are correct it couldn't apply those to my vscode. Have the C:/ and Admin permission while running vscode. However, the style couldn't apply after enable custom CSS and JS. Not even changing the comments color. If any window user able to replicate this it would be awesome for some guidance!
@@glennraya I have tried this, and ensure that the path is correct. If the path is wrong usually you would received "Cannot load file:///C:/Users/... Skipping" from custom CSS and JS Loader extension. But couldn't change even the comments color /* Code comment style */ .mtk3 { color: yellow !important; } Failed.
@@dreams4550 That is weird of you already ran vs code with admin privilege. Have you tried taking ownership of the files? Or refer to the extension's docs
@@Whizzy.mp4 Have you tried this on your settings.json? // "file:///C:/path-of-custom-css/custom-vscode.css", // "file:///C:/path-of-custom-css/custom-vscode-script.js"
This is awesome! Thanks for the detailed tutotrial. I was making my own modifications and I',m wondering if it's possible to have different colors for a directory vs a file at the moment I can only change colour for both of them but not individually, maybe I missed something.
Thank you, regarding your question I think you can. You'll just need to figure out the element/class name that controls different parts of the UI, and then you can tweak it to your liking as seen in the video. However, you might need to dig deeper in some areas. I haven't tried what you want to achieve though. But I think it's possible.
Command pallet is good, but I could never live without my line numbers and tabs. Even though I don't use tabs a lot directly, preferring ctrl+p for it. Somehow I prefer to see the open tabs as a measure of how much I have worked.. :P😅
Absolutely fine, you can tweak it however you like. I could live without the line numbers being display since I can go to the line numbers quickly if I need to by just typing ":" from the command palette, then type the line number you want to go.
Awesome video! Just one question: i followed every step, everything is working just fine, but i get the warning (everytime i open vscode): your Code installation appears to be corrupt. Please reinstall I also installed from scratch deleting everything, but i get the same error. I’m on Mac with silicon
Thank you!, that "corruption" message you see is just a side effect of the modification, but it's normal. As stated in the Custom CSS and JS Loader extension's docs, that behavior is expected. All you need to do is ignore it and click the "Don't show this message again." button from the gear icon of the popup message. Please refer to the extension's docs for more info.
If you are on windows make sure the file path is correct "file:///C:\...", or you need run vs code as an admin. If you are on macOS or Linux, you may need to take ownership of the css/js files. Please refer to the docs from my Github repo.
@@Whizzy.mp4 Kindly check your file paths if you're on Windows: "file:///C:/path-of-custom-css/custom-vscode.css", "file:///C:/path-of-custom-css/custom-vscode-script.js"
Hi,I noticed that the inline color hints provided by the Tailwind CSS IntelliSense extension are no longer showing. Could this be because your CSS configuration is overriding the effect?
@@lzl-g4b Hello, I also use Tailwind’s extension. However, my tailwind intellisense still works for me. Maybe something is conflicting with it on your end, try reloading the css and js loader extension.
I've quite understood that customisation isn't for me rather just a simple vsCode theme and 2-4 Quality of Life extensions are fine. And I recommend the same, productivity over asthetics!
You need to reload the extension. You may also need to take ownership of the files of VS Code to modify itself on certain systems. You can find it from the extension's docs.
When I try to enable or reload the extension it doesn’t even tell me I need to refresh vscode and even if I completely close it and open again as both admin or not it doesn’t show any update
Kindly double check the URL path you specified on your settings where the css/js are located. The 'file:///...' should be prepended ex. file:///C:\path-of-custom-css\custom-vscode-script.js. Please check the docs from the Git Repo.
@@glennraya I have triple checked it and when i ctrl+click the link it opens the link but it seems like the extension is just not recognized by my vs code for some reason
What a great video, I just have one question, I've done some research but I don't think I'm doing it the best way. How can I keep the minimize, close and fullscreen buttons? When I make an app full screen those options are hidden.
Thanks, you may need to dig deep into the dev tool's code inspector to target that div that contains those buttons. That's what I typically do if I want to change some elements.
Very amazing video. I never knew customising VS Code could be this easy. But I have one small problem. I use coderunner extension which allows to run code by tapping on run button on top. Can you tell me how can I enable it?
@@tejaslimbikai11 Thank you. As per your question, I'm sorry but I don't use code runner. You may need to use the code inspector as I shown to target specific elements so you can write custom css to display it.
the blur does not work on windows.. i tried everything from running vs code as ADMIN and trusted the folder where I added the file, I created a js file instead of downloading... still none :(
That's weird, many how have tried it on Windows works. Have you tried to reload CSS and js loader extension after you made the changes. And also make sure to include the file:/// in your path.
@@glennraya Yes i tried reloading multiple times, closing and restarting vs code, made sure that the file path are exactly as your video shows. I also tried turning PC on and off but still doesn't work :(
@@MrJxtr "file:///C:/path-of-custom-css/custom-vscode-script.js" - Is this how your path looks like from your settings.json? It’s weird it’s not working for you.
@@glennraya ooooh should I add "custom" to the name of the js file? like "custom-vscode-script.js"... the name of the js file on your repo was just vscode-script.js and I just used that. but here I do have "file:///C:/" on the path EDIT: I tried renaming. still no luck
@@glennraya Yes. except for the file name since I only have "vscode-script.js", I also renamed it to be exactly "custom-vscode-script.js" but still does not work. I already created an issue on github so you can see more context
after following the steps, I got a warning about an installation corrupt, any idea? I mean, works but the warning is annoying, and it appears even if I check "do not show again"
That behavior is expected as said in the "CSS and JS Loader" extension. You just need to click the "Don't show again" button from the gear icon when the pop-up dialog appears. VS Code thinks some file is corrupted since you injected custom CSS/JS, but it's normal.
came across this error when I tried enabling `Custom Css and JS Loader` after creating the CSS file to add my custom styles; `Run VS Code with admin privileges so the changes can be applied.`
Congratulations on the video, the customization was very good, but I have a question, I followed the same steps to change the image, with the code you left on github it works fine, but if I try to put another image, it doesn't work. Do you need to do any treatment that isn't in the video?
Thank you, please make sure that you are using SVG to change the image (VS Code icon replacement) and convert it to CSS like in the video. Also make sure to add the !important attribute.
Great! I did smt similar, however i'd like to keep the git highlighting for filenames, how would you accomplish that? since it's getting overridden (on windows)
@@ChrissyCode well for that you might need to use the developer tools again so you can target the elements that you want to modify. Basically that's all I did to target specific elements of the editor so I can customize it.
@@glennraya I found it! it was the "git.decorations.enabled" setting, it was set to false. After setting it to true it worked again, I didn't see it at all. thanks for this video. Also mind, if you keep sticky settings, your "blurring" approach doesn't work, i did a workaround for that, which also blurrs out the sticky areas (e.g. in explorere view, or in file view to see the function declarations e.g.)
The key for these customizations is the fact that it relies heavily on keyboard shortcuts. For people like me, who can't remember 500+ shortcuts, I prefer menus. However, this was very informative.
you can take all custom and just let the menu bar and it’s look cool
@@Svpra_what? Try saying that again but reword it. You made absolutely no sense.
One of the keyboard shortcuts (Ctrl+Shift+P) is secretly 500+ keyboard shortcuts in disguise, with a search function to find exactly what you need without having to click through the interface.
@@InarusLynx Just apply all the customizations, but keep the menu on. Damn dude it's not that hard, or you're just retarded
@@InarusLynxHe is saying you can do all the customizations shown but keep the menu bar from top which will have everything you need and overtime your muscle memory will remember the shortcuts. Also command pallete is there as well to search for what you need.
I could never imagine such vscode transformation. Thank you brother for making my day better definitely gonna try it
@@-Anubhab thanks, you’re welcome 🙏
@@glennraya hey brother good morning, and in case I don't see ya': good afternoon, good evening, and good night!
I totally did the whole transformation and i am loving it. Also doing some tweaks and changes to my comfort and color.
@@glennraya but i had a question like how did you replaced the file icons in the explorer with no disclosure triangle in 1:05
@@-Anubhab Thank you! 🙏🏼 You can tweak it to your heart's content, you can even create a unique functionality using this technique as you can add your own JavaScript to VS Code. Enjoy!
@@-Anubhab You can install icon sets just like how you install a regular extension, you can go to the extensions panel and search for icons. I recommend "Catppuccin Perfect Icons", or you can browse something you like there.
I had no idea we could change styles with JS like that. Very cool. Hidden under a setting labeled "custom css" ... priceless. Thanks!
Thanks! I’ll follow up on this since some people rightly pointed out that it’s too minimalist and lost some of the important features. But I’ll address that in the upcoming video. In the meantime, this setup is designed for editors who prefer a minimalist approach.
I use a minimalist setup myself, but you take it to next step with these rounds corners, well done.
Getting some ideas for sure.
@@casadogaspar Thank you 🙏
That command plate is so AMAZING!!!! Love it
I've try to find somthing like this for so long great job. bro
@@马青-p4j Thanks, enjoy!
This allowed me to make the best coding experience ive ever had! Taking away things i dont use and learning keybinds felt so good🔥
Thank you, and enjoy making your editor a joy to use.
bro made nvim inside vscode 💀
no one can make nvim inside any IDE, there would be so many inconsistencies even the yanking doesn't work properly in VSC it just doesn't go in global buffer.
Sorry to say but VSC sucks.
@@ItsBarmanji Are you ok? I don't know what you're ranting about. This video is obviously just a customization video, not promoting VS Code (that you hate). And by the way, this customization is inspired by the Zed editor, not NVim, I haven't used it.
@@ItsBarmanji you do know enabling vim mode, does exactly that
@@drugoviic actually it does not. yanking works horribly in vim mode the copying is not global scoped also the fire manipulation is just absurd compare to vim.
That's amazing. I could'nt imagine how flexible it is to customize it that much. 🔥
I didn't ask for this, but turns out i've needed this every second of my entire existence, thanks man!
@@Alita299 you're welcome! Thanks 🙏
Thanks for the great template! I had to tweak a few things, like fixing the command palette moving when fewer options were shown, but now it works perfectly. Love how it looks!
Thanks and you're welcome! 🙏🏼
@SenneCools, any pointers on what you changed to fix the command palette? Or could you share the tweaks you made?
@@codigomovil yes, please
I'm still on my first steps on Odin Project
But this is the best customization I've seen so far.
Awesome!
Thank you! 🙏🏼
Odin project? wtf? lmao 😂 Odin project 🤣
@@spthepero2282???
Duuude, it's crazy. You nailed it!✨
Thank you! I will be releasing sort of a part 2 of this, where I will discuss VS Code editing productivity. Since this is a minimal setup, a lot of people rightfully criticized it's too simple, like the line numbers are gone, tabs are gone and so on.
@@glennraya oh man, keep up, for sure
So cool, man! I never thought customizing VS Code deeply would be so easy. Thank you so much for making my day better-I’m definitely going to try it!
Thank you! 🙏🏼
I would LOVE to see this channel produce playlists on front and backend.
Thanks for the video
Thank you! 🙏🏼 I would love to, but since this is a fairly new channel, I still only have a few videos in my library. When this grows, I will re-organize the contents.
I've seen several vscode customization videos, and this was the most complete and different. congratulations and thanks for the content bro
@@lu_k4x thanks and you're welcome 🙏
2:22 if you move the activity panel to top, its much smaller and you still can access it with the mouse. can be a good transition to completly hide it
The best customization video ever
Thank you! 🙏🏼
I always wanted to give VSCode a more Aqua look, like how the old Mac OS X versions looked (Snow Leopard GUI for example) so this is a wonderful tutorial. Thanks for sharing.
@@Trojan.Win32.Vandenplas Thank you!
Damn, I will surely customize the command plate and scrollbar right now!!!
This video deserves millions of likes, my vscode was beautiful!
Thank you so much! 🙏🏼
Really cool video👍. Never thought customizing vscode deeply would be so easy. Thanks
Great design and fonts, well done!! Thanks!
The command palette is 🔥
This is the most nice looking VSCode setup! I followed it and made some tweaks to make this like my terminal set up. This tutorial is so helpful that not only it guides you but also teach you how to customise the settings yourself in an easy and concise way of explaining. Kudos!🎉
Thank you 🙏🏼
VS Codeはテーマや拡張機能でカスタマイズが簡単にできるエディタですが、さらに進んで見た目や動作を大きく変える方法が紹介されているのは新鮮です。自分好みに完全にカスタマイズすることで、開発環境がより快適になり、作業効率がアップしますね。どんな拡張機能や設定でVS Codeを変身させるのか、具体的な例が気になります！
If anyone is trying to follow along with Codium and noticed that there's no "Custom CSS and JS Loader", try "Apc Customize UI++" instead and import the css on your user settings JSON as:
`"apc.imports": ["yourOwnPath"]... thanks for the video!
yes, i have encountered the same problem and it did not work the CUSTOM CSS.... and i followed your suggestion,
"apc.imports": ["file:///Users/myUsername/vscode_custom_css"]
is what i've typed for the extension of APC, however idk why it still did not work? could you assist me further? i would really appreciate this. thanks
@@soldout2866 I guess it should be vscode_custom_css.css
@@soldout2866 from the extension readme :
"apc.imports": [
"/Users/some/path/style.css",
"/Users/some/path/script.js",
"/C:/Users/path/style.css", // Windows path
...
no "file://" in the path
its the tutorial that im looking for brooo! i really like to keep my vs code minimalistic as possible but this one push beyond what i have rn, so thank you
Thank you.
You bring joy to the world !
Thank you! 🙏🏼
Amazing video, I never thought that such customizations can be done in vscode
@@imadsaddik Thank you 🙏
you've opened up so many ideas for me. thank you!
@@socks5proxy You're welcome! 👌
Amazing, especially command palette. I really want to apply for my vsc asap. thanks!
Thank you!
@@glennraya May I ask you a question?
I applied the command palette partially and used it. When I type something and the result shrinks, the command palette also shrinks, and the input command gradually moves toward the center. Can I fix it based on the initial palette's top line?
@@마카-p6w I ran into the same issue and you can simply add this piece of css:
.quick-input-list, .quick-input-list .list_id_6 {
min-height: 400px !important;
}
That's the classes that controls the command palette height, you can also experiment with your own implementation.
@@glennraya Thank you so much!
Thanks!
@@socks5proxy Thank you! 🙏
one of the best video, i have ever seen. Thanks man. I have been in this field for the last few years but my vs code was not looking great, but it will look great now
Thank you! 🙏🏼
I've always been attracted to super dark themes, but no matter how many times I've tried to keep it like that, I kept on switching themes like a maniac. I finally settled with the Slack inspired light theme and I honestly thought this would be the end of the endless theme hunting. Your video showed up on my news feed and I honestly wasn’t expecting much. I'm glad I was wrong. Thank you so much! This is honestly the best discovery I've made in a long time.
Thank you! 🙏🏼
Thank you a lot , I changed the command palette to the center and added the blur to background , love it
Thank you! This layout by the way is inspired by the Zed editor, which has a similar layout. I'm tired of VS Code's old look. hahaha
Very cool config, man👍
Thanks 🙏🏼
Great cuztomization. keep it up 🤞
Pretty cool tutorial,
Prompts me to wonder if I could inject custom css and js into other Electron-based applicstions too haha.
@@kronixosneko655 thank you. You might if it's open-source.
8:30 Even though I entered the correct PATH of the custom-vscode.css file in the settings.json file, The source is saying that it couldn't load the custom-vscode.css file. My OS is Windows, what should I do?
If you're on Windows, you should run VS Code with admin privilege so it can modify itself.
@@glennraya did that, doesnt work
@@VelixRoblox Often times the path was wrong, path should be exactly as shown. If it still doesn't work, might be some other extension are conflicting with CSS and js loader extension.
@@glennraya nvm, i fixed it with a little help from ChatGPT. Thanks for the reply tho!
Awsome video. Thanks man!
This is just incredible. Love you man.
I changed it to restore some icons and change font family to Prompt. Did not take much time. Thanks for sharing! Let me know if you'd like to see remixes as a PR's (for inspection and inspiration for future versions)
Thank you! well actually it's my personal preference only (the one in my settings). So I can easily restore mine in case I got a new machine for example, so probably let's skip the PR for now. 👍
This is so dope man!
Thank you 🙏🏼
Bro you are a real Developer! Hats Off
Yes, I'm a full-stack developer.
Update for Window users: it seems that it conflict with APC Customize UI extension, and you have to open it natively with admin permission so it won't cache with other profiles. Tbh that's a deal breaker for me. It's quite fair to said that this video is more so towards Mac users, for window is a debatable option.
@@dreams4550 Ah that's right. I remember I also used APC before and yeah it conflicts with css and js loader. However, this is not just for mac users as there are a lot of windows users who doesn't have the same issue.
This is really cool !!! Thanks for the video.. Learnt a lot!
Thank you! 🙏🏼
thanks pare. Idk how you discovered or actually felt the need to do this but this is definitely different haha.
Just for fun, maarte ako eh. 😃
I love u ...just this is the best customization ever
Thank you! 🙏🏼
You are electronjs expert man ❤
@@haniahani5351 Thank you 🙏
This will be my first task tomorrow morning 😂 but in light mode! Thanks!
You're welcome! I should also make a version in light mode, since my examples is for dark mode. haha
@@glennraya would love that! 🎉🙏
" but in light mode"--- This man is dangerous
@@IMONSP33D finished already 😂
@@eluertmukja5549 check out stylta material light.
Lol I love the full size visual studio look.
Having trouble on windows, even though the paths for the custom CSS and JS are correct it couldn't apply those to my vscode. Have the C:/ and Admin permission while running vscode. However, the style couldn't apply after enable custom CSS and JS. Not even changing the comments color. If any window user able to replicate this it would be awesome for some guidance!
Some Windows users also experienced this. They fixed this by running VS Code as admin, so Code can modify itself.
@@glennraya I have tried this, and ensure that the path is correct. If the path is wrong usually you would received "Cannot load file:///C:/Users/... Skipping" from custom CSS and JS Loader extension.
But couldn't change even the comments color
/* Code comment style */
.mtk3 {
color: yellow !important;
}
Failed.
@@dreams4550 That is weird of you already ran vs code with admin privilege. Have you tried taking ownership of the files? Or refer to the extension's docs
@@glennraya even i have the same problem....
@@Whizzy.mp4 Have you tried this on your settings.json?
// "file:///C:/path-of-custom-css/custom-vscode.css",
// "file:///C:/path-of-custom-css/custom-vscode-script.js"
This is awesome! Thanks for the detailed tutotrial. I was making my own modifications and I',m wondering if it's possible to have different colors for a directory vs a file at the moment I can only change colour for both of them but not individually, maybe I missed something.
Thank you, regarding your question I think you can. You'll just need to figure out the element/class name that controls different parts of the UI, and then you can tweak it to your liking as seen in the video. However, you might need to dig deeper in some areas. I haven't tried what you want to achieve though. But I think it's possible.
@@glennraya I figured it out eventually thank you :)
@@kevinirabor1370 I'm glad! Enjoy
"VS Code looksmaxxing"
damn, gonna edit according to my liking now!
We need more customisation videos.
Thanks mate,
I'll do the switch for the command menu dialog 👍
Command pallet is good, but I could never live without my line numbers and tabs. Even though I don't use tabs a lot directly, preferring ctrl+p for it. Somehow I prefer to see the open tabs as a measure of how much I have worked.. :P😅
Absolutely fine, you can tweak it however you like. I could live without the line numbers being display since I can go to the line numbers quickly if I need to by just typing ":" from the command palette, then type the line number you want to go.
Very well explained
@@neoTriny thank you 🙏
thanks bro it helped me a lot!
If you don't work with css files often, you may have to change your encoding to UTF-8 for the file type. Spent hours to figure that out.
@@jamesgreen9070 In my case I didn't have to do that.
Thank you Glenn, Amazing content man 🙌🙏
@@MohamedElguarir you’re welcome! 😊
What a masterpiece 🔥
Awesome video!
Just one question: i followed every step, everything is working just fine, but i get the warning (everytime i open vscode): your Code installation appears to be corrupt. Please reinstall
I also installed from scratch deleting everything, but i get the same error.
I’m on Mac with silicon
Thank you!, that "corruption" message you see is just a side effect of the modification, but it's normal. As stated in the Custom CSS and JS Loader extension's docs, that behavior is expected. All you need to do is ignore it and click the "Don't show this message again." button from the gear icon of the popup message. Please refer to the extension's docs for more info.
And what does the diff view, the terminal or the extensions panel look like?
Those views are just going to use the current theme you use. I didn't touch them since I'm not using them, I always the terminal for git stuff.
External css file cannot find by vs code. I put the directory properly, but the extension gives me an error. How can I fix this issue?
If you are on windows make sure the file path is correct "file:///C:\...", or you need run vs code as an admin. If you are on macOS or Linux, you may need to take ownership of the css/js files. Please refer to the docs from my Github repo.
@@glennraya not working bro
@@Whizzy.mp4 Kindly check your file paths if you're on Windows:
"file:///C:/path-of-custom-css/custom-vscode.css",
"file:///C:/path-of-custom-css/custom-vscode-script.js"
For some reason I wanted soo bad to hide cursor logo 😂. Huge Thank
Hi,I noticed that the inline color hints provided by the Tailwind CSS IntelliSense extension are no longer showing. Could this be because your CSS configuration is overriding the effect?
@@lzl-g4b Hello, I also use Tailwind’s extension. However, my tailwind intellisense still works for me. Maybe something is conflicting with it on your end, try reloading the css and js loader extension.
I've quite understood that customisation isn't for me rather just a simple vsCode theme and 2-4 Quality of Life extensions are fine. And I recommend the same, productivity over asthetics!
Productivity and aesthetics can co-exists, especially for designers/dev (like me). Of course, everyone is different, which is fine.
@@glennraya Great Perspective brother!!
the two files i imported aren't doing any changes even though the file path is correct
You need to reload the extension. You may also need to take ownership of the files of VS Code to modify itself on certain systems. You can find it from the extension's docs.
@glennraya Thanks, I found the problem! I had to move VSCode from the Downloads folder to the Applications folder. Appreciate the help
@@glennraya just a question how did u replace the folders arrows with icons?
@ you can install that as extension. You can search it from the official vscode marketplace.
@@glennraya found it thanks dude your the best
I love this! Thank you so much kabayan!
@@JSONFX Thank you, you’re welcome po
So this works pretty well except when you have a second window open, then the command palette is just regular any way to change that?
@@nicholasferrara8028 hmmm, I also tried opening a second window and the command palette styling still works for me though.
@@glennraya got ya, no worries, I'll try and figure it out, thanks anyways!
Where do i find images like the one you showed at this timestamp 15:03, i want to find one for C++
You can find them from here: www.svgrepo.com/
@@glennraya thank you
Thanks so much! ♥ 🤩
When I try to enable or reload the extension it doesn’t even tell me I need to refresh vscode and even if I completely close it and open again as both admin or not it doesn’t show any update
Kindly double check the URL path you specified on your settings where the css/js are located. The 'file:///...' should be prepended ex. file:///C:\path-of-custom-css\custom-vscode-script.js. Please check the docs from the Git Repo.
@@glennraya I have triple checked it and when i ctrl+click the link it opens the link but it seems like the extension is just not recognized by my vs code for some reason
I am getting a error when Enable Custom CSS and JS Loader
Run VS Code with admin privileges so the changes can be applied.
Thanks brother • I'll try. ❤
You're welcome
Can someone help me, at 8:47 when I activate CSS and JS, it gives an error how to solve?? It seems that it asks to run with admin
what is the error it give you? If you're on windows, you need to run VS Code as admin so VS Code can modify itself.
@@glennraya I ran VS code as admin and it seems to work... thanks.
Great Work Man thanks a lot
Thank you! 🙏🏼 You're welcome
saw your video on tiktok and didnt save it. open youtube just to see your video. much appreciated. i love my new setup
@@joseph5058 Thank you. 🙏
When it comes to different profiles, is it possible for this to be in only one profile?
No, you may need to create one for each profile.
@@glennraya oh thats perfect. I wanted to have it in only one profile. Thanks so much for all this
Why my css don't show even i added the path abd downloaded the extension?
You might need to take the ownership of the css/js file. Also make sure to enable/reload the extension after making changes.
Are you on Widows? if yes, make sure to include the c:/ in your path. It is very important
the plugin does not work with my vscode. I am using mac silicon , Any idea how can I resolve this issue?
You might need to take ownership of the css/js files.
how if there is an update for vscode apps ?
@@penyepongNASA you need to reload VS CODE to apply your styling again if there's an update.
What a great video, I just have one question, I've done some research but I don't think I'm doing it the best way.
How can I keep the minimize, close and fullscreen buttons?
When I make an app full screen those options are hidden.
Thanks, you may need to dig deep into the dev tool's code inspector to target that div that contains those buttons. That's what I typically do if I want to change some elements.
Very amazing video. I never knew customising VS Code could be this easy. But I have one small problem. I use coderunner extension which allows to run code by tapping on run button on top. Can you tell me how can I enable it?
@@tejaslimbikai11 Thank you. As per your question, I'm sorry but I don't use code runner. You may need to use the code inspector as I shown to target specific elements so you can write custom css to display it.
@@glennraya I fixed it by trial error on few elements.
I did as the instruction said for linux but it still shows me the read-only error. how do i fix it?
@@alienxd3808 Have you tried to take ownership of the files? and for Linux also try to take ownership of the VS Code files itself.
the blur does not work on windows.. i tried everything from running vs code as ADMIN and trusted the folder where I added the file, I created a js file instead of downloading... still none :(
That's weird, many how have tried it on Windows works. Have you tried to reload CSS and js loader extension after you made the changes. And also make sure to include the file:/// in your path.
@@glennraya Yes i tried reloading multiple times, closing and restarting vs code, made sure that the file path are exactly as your video shows. I also tried turning PC on and off but still doesn't work :(
@@MrJxtr "file:///C:/path-of-custom-css/custom-vscode-script.js" - Is this how your path looks like from your settings.json? It’s weird it’s not working for you.
@@glennraya ooooh should I add "custom" to the name of the js file? like "custom-vscode-script.js"... the name of the js file on your repo was just vscode-script.js and I just used that. but here I do have "file:///C:/" on the path
EDIT: I tried renaming. still no luck
@@glennraya Yes. except for the file name since I only have "vscode-script.js", I also renamed it to be exactly "custom-vscode-script.js" but still does not work. I already created an issue on github so you can see more context
The extension didn't work for me on Windows, instead I used 'Apc Customize UI++' extension.
Yes, that extension is also a good alternative.
after following the steps, I got a warning about an installation corrupt, any idea? I mean, works but the warning is annoying, and it appears even if I check "do not show again"
That behavior is expected as said in the "CSS and JS Loader" extension. You just need to click the "Don't show again" button from the gear icon when the pop-up dialog appears. VS Code thinks some file is corrupted since you injected custom CSS/JS, but it's normal.
It seems the settings.json you uploaded on Github or the custom css isn't up to date with the video cause my results are different...
Yes, I might have pushed some changes to the CSS file, but of course you can make your own styles. Thanks for watching! 🙏🏼
@@glennraya Can you please help me wit your CSS file, your design looks good
@@victorshallangwa952 What do you need?
@@glennraya You Custom VSCode CSS so mine can look exactly like yours
@@victorshallangwa952 the latest version I use is the one from the git repo. The link is in the description.
Coolest thing I hvae seen,..😍😍😍😍😍
thank you! 🙏🏼
@@glennraya I would like you to post such more content and explain things how we also can achieve such cool things
@@AjayChauhan-ix7nn That's the plan. I will regularly post what I think will be useful. Thanks
o no i mistakenly hid entire menu bar , how to get back help !
To undo the CSS styling you used to hide things, just reverse the changes you made that hid the menu bar.
What about using it on Cursor app? Will work?
What's a cursor app?
@@glennraya its a AI code editor like vs code
came across this error when I tried enabling `Custom Css and JS Loader` after creating the CSS file to add my custom styles;
`Run VS Code with admin privileges so the changes can be applied.`
I think you should run vs code as admin if you're on Windows. Especially if you're not an admin user.
@@glennraya I am Using Ubuntu 22.04
I have the same error, what did you do to fix? @samkabiru8805 I'm using linux mint, but it should be the same problem.
I fixed this error by taking ownership of the files as explained in the docs.
@@Jorven which docs?
I've a question, in the start of the video you show the explorer. the folder opens like icons without the arrows by default, how do u make it?
I used the Material Themes Icon (Palenight) for that. That icon set doesn't include the arrows.
Where should we create the files: custom-vscode.css and vscode-script.js?
Please Reply
You can save these files anywhere in your computer, so long as you correctly reference the path in your settings.json file.
Congratulations on the video, the customization was very good, but I have a question, I followed the same steps to change the image, with the code you left on github it works fine, but if I try to put another image, it doesn't work. Do you need to do any treatment that isn't in the video?
Thank you, please make sure that you are using SVG to change the image (VS Code icon replacement) and convert it to CSS like in the video. Also make sure to add the !important attribute.
Great!
I did smt similar, however i'd like to keep the git highlighting for filenames, how would you accomplish that? since it's getting overridden (on windows)
If your files keep getting overwritten, maybe you need to take ownership of files or run VS Code with admin privilege.
@@glennraya no the files work, but i mean the git status coloring (orange, red, green) doesn't work
@@ChrissyCode well for that you might need to use the developer tools again so you can target the elements that you want to modify. Basically that's all I did to target specific elements of the editor so I can customize it.
@@glennraya I found it! it was the "git.decorations.enabled" setting, it was set to false. After setting it to true it worked again, I didn't see it at all. thanks for this video.
Also mind, if you keep sticky settings, your "blurring" approach doesn't work, i did a workaround for that, which also blurrs out the sticky areas (e.g. in explorere view, or in file view to see the function declarations e.g.)
@@ChrissyCode nice, I don’t use the sticky headers so I’m fine with it, thanks for pointing it out.
Maraming salamat kabayan, magiging viral to
You're welcome po