No video

Top 11 Visual Studio Code Themes You Should Try Today

  Рет қаралды 23,273

CSS Weekly

CSS Weekly

Күн бұрын

Make your development environment stand out with stunning Visual Studio Code color themes. The themes are picked carefully, with subtle colors so that UI doesn’t get in your way when you’re coding; primarily dark, but plenty of options with light versions.
🎨 Themes
(Dark/Light) Community Material Theme: marketplace.vi...
(Dark/Light) Serendipity: marketplace.vi...
(Dark/Light) Bearded Theme: marketplace.vi...
(Dark/Light) Tokyo Night: marketplace.vi...
(Dark/Light) Ayu: marketplace.vi...
(Dark) Andromeda: marketplace.vi...
(Dark) AlterNight: marketplace.vi...
(Dark) In Bed By 7pm: marketplace.vi...
(Dark) Dracula Official: marketplace.vi...
(Dark) Ariake Dark: marketplace.vi...
(Dark) Moonlight: marketplace.vi...
📖 Chapters
00:00 Intro
00:50 (Dark/Light) Community Material Theme
02:10 (Dark/Light) Serendipity
02:43 (Dark/Light) Bearded Theme
03:19 (Dark/Light) Tokyo Night
04:12 (Dark/Light) Ayu
04:45 (Dark) Andromeda
05:21 (Dark) AlterNight
05:52 (Dark) In Bed By 7pm
06:36 (Dark) Dracula Official
07:02 (Dark) Ariake Dark
07:30 (Dark) Moonlight
08:34 What’s your favorite theme?
Become PRO with the best linting tools in the industry:
🔥 Mastering Prettier & Stylelint: masteringlinti...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#vscode #visualstudiocode

Пікірлер: 74
@beongky
@beongky 3 ай бұрын
Thanks for that helpful video, btw, which font are you using for your vs code? It looks better than the default
@CSSWeekly
@CSSWeekly 3 ай бұрын
You're welcome, Daniel! 🙂 Oh, I think the font in this video is Menlo. I do switch my coding font often though, and lately I've been using GitHub's Monaspace Neon. If you're interested, I go over my favorite coding fonts in this video: kzfaq.info/get/bejne/l6ukZ8-fsL-RZas.html 🙂
@atanas-nikolov
@atanas-nikolov Жыл бұрын
Currently rocking Dainty Dark+ (Chroma 4, Darkness 2) and it is by far the theme that I've found most useful. I have some very particular needs and this one covers them all. Dainty is pretty great with the themes, to be honest. I almost always preferred themes modded by them than the originals.
@CSSWeekly
@CSSWeekly Жыл бұрын
That's a great theme, Atanas! Dainty is quite nice, but somehow I missed it. Thanks so much for sharing it; I think it'll make it into the next set of VS Code themes I share. 🙂
@litttlemooncream5049
@litttlemooncream5049 5 ай бұрын
luv the moonlight!
@CSSWeekly
@CSSWeekly 5 ай бұрын
Good to hear this! Thanks for sharing! 🙂
@adilogan
@adilogan Ай бұрын
Which font are you using in VS code?
@CSSWeekly
@CSSWeekly Ай бұрын
Thanks for your question, Aditya! 🙏 I think this is Menlo. I change it quite often, and these days I'm using Monaspace. 🙂 I shared my favorite fonts in this video, in case you want to check it out: kzfaq.info/get/bejne/l6ukZ8-fsL-RZas.html
@ArsenArts
@ArsenArts Жыл бұрын
Very helpful video! Thanks, Zoran!
@CSSWeekly
@CSSWeekly Жыл бұрын
I'm thrilled to hear you found it helpful! 🙂
@michapau19
@michapau19 11 ай бұрын
Really nice video! I'm really curious about what kind of cursor settings you are using, ref. timestamp 0:32 - 0:39 ish, the yellow cursor blinking with the yellow border as well. It looks like a really nice and timesaving feature :) Wanna share, maybe?
@CSSWeekly
@CSSWeekly 11 ай бұрын
Thank you so much, Michael! 🙏 I'm using Vim-Mode, so this would be the cursor in the Command mode, which should correspond to the "Block" "Cursor Style" option, I think. And I also have "Cursor Blinking" set to "smooth." And the color is coming from the theme. I hope this is what you're looking for. 🙂
@u-bum
@u-bum 7 ай бұрын
Thanks for the great video, Zoran! Just curious, what is your preferred setup for both light/dark themes? I'm using the dynamic option (which adapts to the system theme) and just seeking some inspiration.
@CSSWeekly
@CSSWeekly 7 ай бұрын
That's very interesting! Could you share how you have this set up? 🙂 I'm all over the place with dark/light themes. I prefer a dark theme for my code editor and light for writing/reading; I have some apps and websites set to dark and some to light, so I never used the option to follow my system preferences. 🙂
@u-bum
@u-bum 7 ай бұрын
​@@CSSWeekly by setting the Preferred Light (or Dark) Color Theme settings in Workbench → Appearance, you can also do this in the settings.json file: ("workbench.preferredDarkColorTheme": "SynthWave '84"). And to set it all up, Window → Auto Detect Color Scheme, and it should work 🙂. PS I'm kinda on the same boat, always rotating themes (kinda how I got here), but yeah I never really found a good light theme yet, currently using Bearded Theme Light.
@CSSWeekly
@CSSWeekly 7 ай бұрын
@u-bum It certainly feels like there are more good dark themes than light. 🙂
@seekknowledge1928
@seekknowledge1928 Жыл бұрын
I choose the moonlight theme from your video. Really nice theme
@CSSWeekly
@CSSWeekly Жыл бұрын
I'm thrilled to hear you found a theme to use in the video! Thanks so much for watching and commenting! 🙏🙂
@faizanjaliyawala3752
@faizanjaliyawala3752 Жыл бұрын
You forgot cobalt2 and night owl. These are really good ones.
@CSSWeekly
@CSSWeekly Жыл бұрын
Thanks so much for the suggestions, Faizan! 🙏 Cobalt2 was in very close consideration-I love it, just like Wes Bos' work in general. But I managed to miss Night Owl. This is a really good one. 💯 It looks like a follow-up video is already beginning to take shape. 🙂
@krishvaghasiya7370
@krishvaghasiya7370 11 ай бұрын
Great choice. I like moonlight and tokyo night from your video
@CSSWeekly
@CSSWeekly 11 ай бұрын
Thank you, Krish! Those are nice! 🔝 Do you have any favorites that aren't mentioned in the video? 🙂
@krishvaghasiya7370
@krishvaghasiya7370 11 ай бұрын
​@@CSSWeekly I think you forgot night owl
@CSSWeekly
@CSSWeekly 11 ай бұрын
Oh, Night Owl is a very nice theme as well! I might include it in my next video on themes. 🙂
@N4M3L3SS_CH4NN3L
@N4M3L3SS_CH4NN3L 6 ай бұрын
Mine fav theme is Deep Dark Space. Not perfect, but better than many themes I've seen.
@CSSWeekly
@CSSWeekly 6 ай бұрын
I haven't seen this one. It's quite interesting, but probably a bit too much contrast for my taste. 🙂
@PretoraSankti-cm6su
@PretoraSankti-cm6su 10 ай бұрын
I've recently come across *Galactic Glow* 🌌, a hidden gem in the VSCode extension world. It lets you change your coding environment's appearance to match iconic characters 🌟. It's like a Star Wars adventure for your code
@CSSWeekly
@CSSWeekly 10 ай бұрын
Thanks so much for sharing this, Pretora! I didn't know about this theme, but it certainly is interesting. 🙏 Have you created it? 🙂
@yashjain8705
@yashjain8705 7 ай бұрын
please checkout the "Chai Theme" developed by Hitesh Chaudhary, it's a very good theme
@CSSWeekly
@CSSWeekly 6 ай бұрын
Thanks for sharing it, Yash! That's an interesting one, but a bit too much contrast for my taste. 🙂
@johncerpa3782
@johncerpa3782 Жыл бұрын
Great selection of themes
@CSSWeekly
@CSSWeekly Жыл бұрын
Thanks so much, John! I'm glad you think so! 🙂
@enrv8555
@enrv8555 5 ай бұрын
I just found a cool new theme called "Evro Dark" really nice
@CSSWeekly
@CSSWeekly 5 ай бұрын
I've just checked it out. It's quite nice! Thanks for sharing it! 🙂
@anasalhariri5474
@anasalhariri5474 3 ай бұрын
My favorite is PhoenixMates theme is really really good, you should try it out
@CSSWeekly
@CSSWeekly 3 ай бұрын
I just tried it out, Anas. It really is nice! Thanks so much for sharing it! 🙏
@anasalhariri5474
@anasalhariri5474 3 ай бұрын
My pleasure 😊
@Hassibayub
@Hassibayub Жыл бұрын
Great choice. However theme preference is quite subjective I love Dracula theme for my dev beside that night owl and monokia are great options overall with well balanced colors, easy on eyes and great highlights color choices.
@CSSWeekly
@CSSWeekly Жыл бұрын
I couldn’t agree more, Muhammad! It is subjective, and Night Owl and Monokai are fantastic themes indeed. 💯 Thanks for watching and sharing this! 🙏
@codernerd7076
@codernerd7076 Жыл бұрын
I just like the default vscode darker+ theme they added not so long ago
@CSSWeekly
@CSSWeekly Жыл бұрын
Default choices are nowadays excellent. 💯 I still somehow find it ‘necessary’ to change my theme, at least occasionally. 🙂
@jackspencer8290
@jackspencer8290 9 ай бұрын
Best light theme is Daobeam. His other themes are good too, particularly Tranquility Base Dark.
@CSSWeekly
@CSSWeekly 9 ай бұрын
Daobeam is a good one, Jack! 🙂 I haven't seen it before, so thanks for sharing! 🙏
@tauhidrahmangazi4184
@tauhidrahmangazi4184 Жыл бұрын
Can anyone tell me how to get those beautiful text colour.
@CSSWeekly
@CSSWeekly Жыл бұрын
Thanks for the question, Tauhid! 🙏 Which color exactly are you referring to? The color of the code?
@TheOnceAndFutureDoug
@TheOnceAndFutureDoug Жыл бұрын
What's doing the color highlighting you're doing in your CSS? I need that. I need it in my life.
@CSSWeekly
@CSSWeekly Жыл бұрын
Oh, you definitively do need it, Doug! 🙂 That would be the Color Highlight extension: marketplace.visualstudio.com/items?itemName=naumovs.color-highlight I went over the better CSS extensions I'm using in this video, in case you're interested: kzfaq.info/get/bejne/nJqAqZdjlZaXqWg.html
@TheOnceAndFutureDoug
@TheOnceAndFutureDoug Жыл бұрын
@@CSSWeekly I am very interested! Thanks!
@CSSWeekly
@CSSWeekly Жыл бұрын
​@@TheOnceAndFutureDoug Thank you, Doug! 🙂
@therealadrinux
@therealadrinux Жыл бұрын
@@CSSWeekly Does that support colour syntax other than hex? My codebases have a lot of hsl and more recently oklch - these types of extensions always seem a bit out of date when it comes to colour syntax.
@CSSWeekly
@CSSWeekly Жыл бұрын
It supports HSL format but it's not ideal; new syntax isn't working with opacity. Newer formats like LCH and OKLCH don't work, sadly. Test: cln.sh/YDcPLM6B
@user-nr7mz5kc3o
@user-nr7mz5kc3o 4 ай бұрын
Thanks for the useful video🙏! You have a wonderful channel👍! A lot of necessary information💪. Tell me, what is the theme on your screen, between 0:25 and 0:50
@CSSWeekly
@CSSWeekly 4 ай бұрын
Thank you so much, Антон! I really appreciate it! 🙏 It's Community Material Theme Palenight High Contrast 🙂 This one: www.vscolors.com/themes/bf8aa94a-4051-42fe-9bd1-2becad466fe7-41e84e99
@user-nr7mz5kc3o
@user-nr7mz5kc3o 4 ай бұрын
@@CSSWeekly Thank you🙏, this editor theme is very pleasing to the eye👍. Others are also good. Sometimes I change the editor theme, when I get tired of one, I put another one. I'm using now - Ayu Mirage Bordered.
@CSSWeekly
@CSSWeekly 4 ай бұрын
Oh, yes, I love Ayu! This used to be my theme of choice! 🙂 Thanks for sharing it! 🙏
@ankitaswal2894
@ankitaswal2894 Жыл бұрын
Thanks alot
@CSSWeekly
@CSSWeekly Жыл бұрын
Thank *you* for watching and commenting! 🙏
@muscimilieng
@muscimilieng Жыл бұрын
I’m rocking Panda for years but I also like the Catppuccin suite
@CSSWeekly
@CSSWeekly Жыл бұрын
Both are fantastic themes, but I like Catppuccin a bit more, especially Mocha. 🙂 Thanks so much for watching and sharing your favorites! 🙏
@VirtualDarKness
@VirtualDarKness Жыл бұрын
light bearded wins 😎
@CSSWeekly
@CSSWeekly Жыл бұрын
Bearded has too many fantastic palettes. 🙂 I’m glad to hear that someone found a good light theme. 🙂
@Bearded_Bear
@Bearded_Bear Жыл бұрын
Thanks ^^
@CSSWeekly
@CSSWeekly Жыл бұрын
🐻❤️
@sawilliams
@sawilliams 10 ай бұрын
is it just me, but most of them look the same
@CSSWeekly
@CSSWeekly 10 ай бұрын
I suppose they are similar. I guess this is my bias, as this seems to be what I like. But some have many different versions, like Bearded Theme, which comes in many flavors. 🙂 What's your favorite theme? Or what type of themes do you like? 🙂
@badcatdesign
@badcatdesign Жыл бұрын
🧛🏻‍♂️
@CSSWeekly
@CSSWeekly Жыл бұрын
Thanks so much for watching and commenting! 🙂
@rad0stin
@rad0stin 7 ай бұрын
Wow this man replies to every comment!!
@CSSWeekly
@CSSWeekly 7 ай бұрын
Of course! 🙂
12 VS Code Extensions to INCREASE Productivity 2024
27:13
Devression
Рет қаралды 645 М.
What you need to know about the Story in Satisfactory
6:33
Coffee Stain Studios
Рет қаралды 230 М.
Get 10 Mega Boxes OR 60 Starr Drops!!
01:39
Brawl Stars
Рет қаралды 15 МЛН
Кадр сыртындағы қызықтар | Келінжан
00:16
Schoolboy Runaway в реальной жизни🤣@onLI_gAmeS
00:31
МишАня
Рет қаралды 1,4 МЛН
SCHOOLBOY. Последняя часть🤓
00:15
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 12 МЛН
Ranking the BEST VS Code Themes
7:58
Giodev
Рет қаралды 248 М.
25 VS Code Productivity Tips and Speed Hacks
11:35
Fireship
Рет қаралды 2,3 МЛН
Best Programming Fonts (2024)
9:18
CSS Weekly
Рет қаралды 20 М.
20 Essential VS Code Extensions In 2024
14:26
Traversy Media
Рет қаралды 160 М.
Single CSS keyframe tricks are magic
52:02
Bad at CSS
Рет қаралды 6 М.
Code faster with these VS Code shortcuts
8:44
Coder Coder
Рет қаралды 345 М.
5 Ways to Customize VS Code
14:07
James Q Quick
Рет қаралды 686 М.
Best VSCode Extensions I'm in Love with
8:36
Lama Dev
Рет қаралды 382 М.
Get 10 Mega Boxes OR 60 Starr Drops!!
01:39
Brawl Stars
Рет қаралды 15 МЛН