11 ms·

Show HN: I built a VS Code Theme Creator – easily make VS Code themes in browser

375 points by miketromba 6y ago

miketromba 6y ago
Hi HN, I built the VS Code Theme Studio after realizing how hard and annoying it is to create a theme the standard way. You have to tweak tons of hex color codes in a huge JSON file... yuck. Most of the time you don't even know which settings to edit, or how they actually affect the UI. I wanted to build a much more intuitive and user-friendly way of designing VS Code themes, so that anyone could design a beautiful, polished theme in under an hour (instead of a week). In a future iteration, I want to make the theme studio even handle the process of publishing your theme to the VS Code marketplace for you. This way, all you'll have to do is design the theme, and click a single button... "Publish". I had a lot of fun building this and I look forward to seeing the themes you create :) (Built with my favorites: Vue.js + Nuxt.js + Firebase)
- andrewnc 6y ago
  This looks great :) I didn't create a theme because of the soft login lock, but it seems like a really great tool. As someone who spends FAR too much time on theming, this also might be a bit dangerous ;)
  - city41 6y ago
    It'd be nice to let people create themes anonymously and only save them to localStorage, then require an account if they want to do more from there.
    - miketromba 6y ago
      I considered this a little, but I want to optimize for a more robust set of features in the future that would require an account... E.g. eventually handling the submission to the marketplace for the user, etc. + I was worried about users potentially losing lots of work if LocalStorage gets wiped for some reason.
      - beaconstudios 6y ago
        maybe make the changes they make in-memory-only and prompt them to sign up to persist. Like what piskelapp.com do - you can edit an image and save it locally, but if you want to save it to your gallery you need to create an account.
- dblooman 6y ago
  Can you remove sign up?
  - miketromba 6y ago
    This is a popular request, so I might implement this moving forward.
    - gravelc 6y ago
      As many others have said, as soon as the login came up, I closed. Nice idea though.
- jasondigitized 6y ago
  Mike, This seems like a fun project. I wanted to second my favorite Vue + Firebase combo. The purists may balk but it is super approachable for a luddite like myself.
- ssivark 6y ago
  Slick tool! Follow-up question: What limits a tool like this to VSCode? Is theming (across editors) standardized/similar enough that the same color variables could be exported to get the same theme in different editors?
- _fullpint 6y ago
  It’d be neat if you could extend this to Windows Terminal as well. They both use very similar structures for themes.
lepouet 6y ago
Looks cool, won't sign up ¯\_(ツ)_/¯
- deleted 6y ago
  [deleted]
apockoffork 6y ago
This is great! Now I'm not going to get any real work done today.
- miketromba 6y ago
  I can't tell you how many times while developing this I got sucked into designing themes hahaha.
css 6y ago
Both the Terms of Service and Privacy Policy links 404. Why does this require an account?
- miketromba 6y ago
  Oooof just pushed a fix for that. It's a lot easier to make a theme in multiple 'sittings' instead of all at once. Your themes get stored under your account so you can come back to them later. Also used for posting the themes in the 'hub'. Localstorage seemed too flakey for theme data storage... it would be a really bad experience to lose an hours worth of theme data.
  - deanclatworthy 6y ago
    localStorage is fairly reliable. Far better than the login requirement. Maybe just make it clear to the user that their settings may be lost if they don't login? i.e. login to "hard save"
    - hanniabu 6y ago
      Agreed. I think localStorage is as well, but if that isn't the case then there's still other options. You can make login option, download the settings and upload later, save to Google Drive, Dropbox, iCloud, etc.
  - searchableguy 6y ago
    You can use anonymous firebase login option to log in users in the background and when they are finished, prompt them to use oauth login.
madeofpalk 6y ago
One of VS Code's strengths is that it can entirely run without the browser. It would be cool to see actual real preview of the themes in action.
- totololo 6y ago
  do you mean within?
  - madeofpalk 6y ago
    My bad. Yes.
- miketromba 6y ago
  I actually experimented with this in earlier iterations of the Theme Studio, but I remember running into a bunch of limitations. I think the HTML/CSS simulation is similar enough to the real thing for now (prob 90-95% accurate), but like you said, it would be cool to interact with the theme in a real editor. (clicking buttons, hover states, etc)
encryptluks2 6y ago
"Unfortunately, the VS Code Theme Studio is not optimized for mobile devices yet. If you want to check it out, please switch to a desktop device." I thought the website would at least explain what it is and show some screenshots before trying to load.
k__ 6y ago
Awesome. I used such theme creators for WebStorm, back in the days, and I certainly missed them for VSCode. Nit: it would be cool if I could click on an element in the UI and it would open the config option on the left. Currently it requires me to search for an option.
- miketromba 6y ago
  Yeah this is a great idea, def going to look into this.
msoad 6y ago
This is cool! I really enjoyed playing around. Some feedback: 1. Do not ask for signup before making a theme. There is so much power in allowing users play around without friction. You will get signups from users that are interested. 2. Make the editor preview itself a selection tool for various colors and other items. That would make it a whole lot easier to use 3. Allow grouping of colors. Some colors are always set to the same value. Allow setting the colors individually too. But users often want harmony.
- abledon 6y ago
  yeah, after looking around some demo themes, was about to make a theme, got blocked by signup and closed tab
  - bartread 6y ago
    Me too: I am unpleased by forced sign-up before I've had chance to try the thing I'm signing up for, so I didn't get beyond browsing demos. Some of them did look nice, but nah.
  - chii 6y ago
    the smart way to do it is to allow you to make a theme, but to save it/share it, you need to sign up. If the theme is just a throwaway, people won't sign up, but if the theme is really good and the person wants to save it, it makes the signing up easier to swallow (since you get value from saving it). Otherwise, you end up with crappy noise in the sign up because people would just make a fake account to try it out.
- miketromba 6y ago
  Thank you, these are great - I agree with all them. Going to add these to my list!
- nness 6y ago
  Same, closed tab the moment I saw a sign-in screen.
- misterbwong 6y ago
borisandcrispin 6y ago
This is really cool and easy to use! Recently I've been checking what can be customized in VS Code and my approach was to just check what was modified by the theme. This makes the whole process more intuitive as you can just tweak the settings and see how it would look like.
elefantastisch 6y ago
This looks really really slick. The signup process only worked for me if I turned off tracking protection in Firefox. One bug, entering hex code aggressively tries to convert 3 digit into 6 digit. So you can't actually type a 6-digit hex code because as soon as you type the first 3 digits, it expands it into 6, so you have to like backspace and mess around with it to get the color you want. It would also be nice to have more flexibility in syntax highlighting section. Not everyone wants to group things in the same way for setting colors.
- miketromba 6y ago
  Thanks, I agree, going to look into this.
breakfastduck 6y ago
Signup = no thanks
zackkrida 6y ago
This is great; nice work. The only feature I see missing is the ability to edit the resulting JSON file. This would also allow users to base their theme off of existing themes, which would be my primary use case for something like this. Often I love a theme except for one or two small details, and it'd be nice to edit them in this tool.
- miketromba 6y ago
  Thanks for the suggestion! One feature that is somewhat close to this is the "Fork" feature that lets you clone an existing theme that is already within the hub. Another thing which I want to implement in the future is the ability to fork ANY VS Code theme that is on the marketplace... so E.g. if you like "Material Theme" you can instantly 1-click clone it into the theme studio.
benatkin 6y ago
If you're on Android and want to check it out, switch to desktop mode in your browser. It works more or less fine in Firefox for Android.
iSloth 6y ago
Asking for signup first made me instant click away - You might want to think is that really needed...
sorenjan 6y ago
Are you allowed to use the VS Code name and logo?
MetaWhirledPeas 6y ago
This is very nice, but it's still not simple enough for me. It's too much work to sift through every nook and cranny changing individual colors. I would love a way to pick a palette of a handful of colors and then be given ways of rolling different color combinations. This would be a great experience: 1. Override the colors on elements I'm interested in (background for instance) 2. Click an Auto button to generate the remaining colors based on my manual selections.
snarkypixel 6y ago
I've built themes before and one nice feature that I'm missing is color variables to avoid having to copy/paste the same RGB everywhere. It makes it much easier to play with various color schemes but also makes creating new themes from a template much easier.
- miketromba 6y ago
  Good idea, noted!
selrond 6y ago
An alternative - not just for VSCode, but a whole range of software - https://themer.dev/ https://themer.dev/
roboterer 6y ago
Really nice. I've enjoyed playing around with the editor. As mentioned by others, color variables would be nice to group some values together. And i would love to import my own themes to adjust some colors or customize it.
- miketromba 6y ago
  Agreed, going to explore this, thanks!
inChargeOfIT 6y ago
This site is blocked for me due to malware threats. ??
- miketromba 6y ago
  Strange, do you know what's giving you that warning?
  - inChargeOfIT 6y ago
    Likely a false positive. I'm on a corporate vpn and the Cisco CA cert is not trusted.
whatever1 6y ago
I am always excited when I get to customize an app, but I always end up with hating the final results. Picking right color combinations & fonts is not an easy task! So now I am at the point where I say, just leave it to the experts. They know better.
deleted 6y ago
[deleted]
pluc 6y ago
This sign up thing is such a plague. I don't want to trade my digital identity for a theme, it's a bad deal. The only reason I would sign up is if you'd allow theme hosting and signing up would allow me to host my themes and gain notoriety.
- miketromba 6y ago
  That's fair. In the future I'd like to implement features like: automatically handle publishing to the marketplace for the user (right now it's a pain), upvotes system, etc. Accounts are a good solution for these types of features + it makes the theme data persistence way more robust so you can comfortably / reliably start a theme and then come back later to finish it. There are many suggestions for making signing-in optional though, so will explore this.
  - soneil 6y ago
    2 emails in 3 days is too much. This is why we don't want to sign up for things. You spin us some crap about why you need it, and then use it to spam us.
    - pluc 6y ago
      and then they try to convince you that "email marketing" isn't spam.
keithnull 6y ago
it looks awesome, but I just always failed to sign in with Github :(
Redoubts 6y ago
Is there a way to upload a partial theme? I already noodle on one and sticking in this to validate or handle sections I didn't think I needed to care about would be great.
Geezus_42 6y ago
How is this different from or better than themer? Themer can be ran locally or you can use the website and no login is required.
- miketromba 6y ago
  I like Themer. I think Themer is awesome for creating less-detailed but still great 'umbrella' themes that you can bring with you to lots of different programs. This is for creating more detailed / robust VS Code-specific themes.
fireeyed 6y ago
Hello, this is great to see. However, the site is not recognizing login on Brave browser even with lowered filters. I logged in via Github and can see your app is authorized. The site still thinks I am logged out. Also, I block facebook pixels, reddit tracking and google tag manager that you have on the site. Could that be the reason. I don't want FAANG scum to get my data each time I lift my toilet lid :)
- miketromba 6y ago
  Yeah the Firebase + GitHub auth seems to be broken across-the-board. Going to dig into this.
vishnumohandas 6y ago
Project looks cool. "Sign in with Github" doesn't seem to be working though.
- miketromba 6y ago
  Seems to be broken for now unfortunately; will have to figure this out.
Gehinnn 6y ago
It would be so cool if you could change the colors directly in VS Code by just pointing to the pixel that you want to change. A color picker would pop up and the change would be applied immediately. (It would not only change the selected pixel but the entire color key) Maybe with some machine learning the easy-to-compute function from colors -> VS Code UI Screenshots could be inversed, so that you know which color keys influence a certain pixel. Sadly the color space is finite, otherwise the color key could be easily encoded in the color without changing the color much. Looking forward to high DPI CSS colors ;)
- iudqnolq 6y ago
  You could do that without ml by setting each color to a marker color and detecting the marker. In theory :). I'm sure it would be a PITA.
mouzogu 6y ago
I like this but please add a light mode. I suffer from astigmatism and looking at a black screen gives me headaches. I specifically create light mode themes that work with my eye condition.
- miketromba 6y ago
  Thanks for sharing this, I will look into a light theme for a future iteration.
liorsbg 6y ago
Wait, does this mean you could create a VSCode extension to create themes for VSCode within VSCode?
- eyelidlessness 6y ago
  You can create an extension that does pretty much arbitrary JS, so I’d assume the answer is yes!
victorbojica 6y ago
Very nice tool. I don't have the patience to fully customise a theme, but i would really like to browse through the existing themes. The only problem here is that there are a lot of themes (most of them) that were started just for checking the tool out, so they're not really finished or different from the default. Maybe you could add some kind of publish button - or as a quick fix, don't show the themes with "Untitled" in the title. Otherwise great project. I really think this would be great for medium sized IT shops/companies for branding their tooling. Great job. PS: found this gem https://themes.vscode.one/theme/rpetersen29/dOaUUtdW https://themes.vscode.one/theme/rpetersen29/dOaUUtdW
- miketromba 6y ago
  Yeah, this needs some curation / clean-up features for sure. The Gem made me laugh. In game design there's some concept of '4 different player archetypes' and I forget the details but I remember one of them is like... that player that just likes to break stuff. Respect to whoever made that :)
tjsix 6y ago
As someone who's created their own theme for VSCode this could've saved a ton of time. However after trying to just change a couple colors I'm already extremely frustrated since I can't actually type a hex code in the color picker without it hijacking what I'm typing and adding characters, even when I'm trying to delete. The only thing that works is if I paste in a hex code. I'm not sure if this is an attempt at autocompleting the hex codes but whatever it is, it's maddening.
- miketromba 6y ago
  Yeah that's a nasty bug. I built the picker from scratch so it has not been battletested. Will fix this moving forward.
deleted 6y ago
[deleted]
mj_green 6y ago
I’d love to be able to use this without signing up!
eyelidlessness 6y ago
Can’t look now because I’m on mobile, but excited to check it out when I get back to my desk. I’ll give more feedback if I have any then, but before that a couple quick thoughts: - if you’re not already aware of/using Shiki[1], it’s an excellent library for using VSCode/TextMate themes on the web, and another potential use case for a tool like this - it would be nice if some mobile functionality was supported where it’s not a heavy lift (eg browse themes) 1: https://shiki.matsu.io/ https://shiki.matsu.io/
shortlived 6y ago
Any chance there can be a screensheet of the diff view? I've used a lot of Neo/Vim themes and this scenario is always where the theme falls down or really shines.
- miketromba 6y ago
  Good idea. The screenshot generation system is a bit limited at the moment just because of the quantity of images that need to be generated on the server-side every time someone updates their theme. This does seem like an important one, so I will add this to my list, thanks!
israrkhan 6y ago
For some reason, this site is being blocked by our corporate security software "This site is blocked due to a security threat."
- miketromba 6y ago
  Third time I'm hearing this... I think it might have something to do with: a) newish domain, b) uncommon TLD ".one" or c) cloudflare DNS setup pointed to netlify with cname flattening. I'm a noob when it comes to DNS stuff, so I'm not sure if/why that would cause problems, but who knows. If anyone else has an idea, let me know! --- I think I figured it out. Someone mentioned "Cisco Umbrella" blocking it. This article explains the categories of 'threats' it blocks: https://support.umbrella.com/hc/en-us/articles/115004563666-Understanding-Security-Categories https://support.umbrella.com/hc/en-us/articles/115004563666-... One of the categories is "newly seen domains" and another is "dynamic DNS". I suspect one (or both) of those is the culprit because everything else appears clean on total scans like this: https://www.virustotal.com/gui/domain/themes.vscode.one/detection https://www.virustotal.com/gui/domain/themes.vscode.one/dete...
wysewun 6y ago
looks great! using hex values for color gets complicated. perhaps a color system like tailwind would be great to simplify choices
staplung 6y ago
Very cool. One feature that seems to be missing is an option to set various text bits to bold.
soneil 6y ago
Having great fun with this. Two things I thought worth mentioning .. "How to actually use the resulting json file without publishing it" would make a really nice faq item. I still haven't figured this step out yet. The downloaded files are named .json.json - a papercut to be sure, but I assume low-hanging fruit too.
jonfw 6y ago
It might make more sense to require users to create a title than to let them use the default 'untitled', if you're planning to continue showing these themes to users
neolog 6y ago
Rank them by number of installs.
trevor-e 6y ago
FYI both Firefox and Cisco Umbrella are reporting this site as a security threat.
OutThisLife 6y ago
Love it! Is there a github to issue PR's? Would love some sort of history panel. I think, also, the amount of notifications/confirmations is a bit overkill.
cylde_frog 6y ago
Cool site but I'm not giving you my email address. Might use once that is removed. I'd use my Github if you weren't requesting to read my private email.
Waterluvian 6y ago
This is wonderful. As a related thought, what I really want is a point and click legend on what all the pieces of vscode's UI are called. Many times I've had to guess wildly in google at what they call "that bar to the side|top|bottom" when I go looking for settings or plugins or bugs etc.
butuzov 6y ago
hm.. nice! I made one theme for myself (github[1], vscode[2]) and wanted to try to upload my json to see how it looks like in your interface... (for a screenshot proposes). cheers! nice project! [2] https://github.com/butuzov/vscode-theme-acid https://github.com/butuzov/vscode-theme-acid [3] https://marketplace.visualstudio.com/items?itemName=butuzov.acid https://marketplace.visualstudio.com/items?itemName=butuzov....
- miketromba 6y ago
  Going to implement an "import from json" feature soon... that would let you do this
turblety 6y ago
Why do I need to sign up before playing with the theme creator? Closed the tab. What a shame.
laex 6y ago
Do the themes work with Monaco editor ?
de_nied 6y ago
VS Code One features: * Clickable slide show, with 120 slides, each containing approximately 1/5th of any current sentence. Good for school presentations, family movie night, or mundane business meetings. * Subdomains for everything. Excellent SEO utilization for preventing server downtime from user connection surges and spikes. * Static sidebar buttons, such as "Create New Theme", that create irremovable forced registration overlay popups. Perfect for dimming screens. (Psst, a secret, you can think of the "Browse Themes" button as the "x" button because that's exactly what it does. Don't tell anyone.) * Statistics of such prominency that require no citations! * Absolute guarantees and claims of being the "fastest, easiest, most efficient way to master VS code". Keeps users safe by keeping them informed of their fantastic choice! * World's first legitimate "shortcut to mastering VS Code". Now with 50% more rich in getting rich! (Or brain in this matter, get it?) * Usage of proprietary and trademarked assets for commercial purposes. Having licensed logos on your product, as well as "VS Code" in its name, can't be cheap! Product shows commitment by following copyright laws. Final thoughts: I felt as if I was with a constantly gasconading taxi driver, orating me his years of skill and knowledge, driving me around, showing me all the roads he knows, and then being charged for the hour, miles away from my destination. In all seriousness, this is a scam. He is charging $150 (which is currently a sale discount from the normal $300) for his videos that teach you...basic introductory topics that already have an immense amount of free official educational resources.
pweissbrod 6y ago
So let me get this straight. I make a theme. In order to actually use that theme I must sign up with azure DevOps create my own organization then get a personal access token then publish it to an open marketplace with my information on it then and only then can I get it into my IDE. Does anyone else see that as ridiculous?
- herbst 6y ago
  Looks like a microsoft standard way to get things done to me
- Firehawke 6y ago
  Don't quite need to do that. Follow https://themes.vscode.one/faq/publishing-theme https://themes.vscode.one/faq/publishing-theme to step 4. Then use VSCE to make a package file as shown on https://code.visualstudio.com/api/working-with-extensions/publishing-extension https://code.visualstudio.com/api/working-with-extensions/pu... You can then distribute the VSIX file that you create any way you please and also do a VSIX file installation of the theme on your local copy of VSC.
  - pweissbrod 6y ago
    Thanks! It's still a lot of hoops to jump through coming from visual studio perspective where all settings can be imported or exported to a file. But this is workable!
acqbu 6y ago
This is amazing - one of the best projects I've seen in a long time.
Firehawke 6y ago
Had a bit of trouble changing the title/description. Something was triggering uBlock Origin in such a way that I had to disable it to be able to change the title and description so I could save it.
rudilee 6y ago
Anybody know something similar for phpstorm or intellij ide? I try to create custom theme using the plugin sdk route, I might be doing it terribly wrong, the result works weird on some place like there's white border around windows and missing colors.

375 points by miketromba 6y ago

Hi HN, I built the VS Code Theme Studio after realizing how hard and annoying it is to create a theme the standard way. You have to tweak tons of hex color codes in a huge JSON file... yuck. Most of the time you don't even know which settings to edit, or how they actually affect the UI. I wanted to build a much more intuitive and user-friendly way of designing VS Code themes, so that anyone could design a beautiful, polished theme in under an hour (instead of a week). In a future iteration, I want to make the theme studio even handle the process of publishing your theme to the VS Code marketplace for you. This way, all you'll have to do is design the theme, and click a single button... "Publish". I had a lot of fun building this and I look forward to seeing the themes you create :) (Built with my favorites: Vue.js + Nuxt.js + Firebase)

andrewnc 6y ago
This looks great :) I didn't create a theme because of the soft login lock, but it seems like a really great tool. As someone who spends FAR too much time on theming, this also might be a bit dangerous ;)
- city41 6y ago
  It'd be nice to let people create themes anonymously and only save them to localStorage, then require an account if they want to do more from there.
  - miketromba 6y ago
    I considered this a little, but I want to optimize for a more robust set of features in the future that would require an account... E.g. eventually handling the submission to the marketplace for the user, etc. + I was worried about users potentially losing lots of work if LocalStorage gets wiped for some reason.
    - beaconstudios 6y ago
      maybe make the changes they make in-memory-only and prompt them to sign up to persist. Like what piskelapp.com do - you can edit an image and save it locally, but if you want to save it to your gallery you need to create an account.
dblooman 6y ago
Can you remove sign up?
- miketromba 6y ago
  This is a popular request, so I might implement this moving forward.
  - gravelc 6y ago
    As many others have said, as soon as the login came up, I closed. Nice idea though.
jasondigitized 6y ago
Mike, This seems like a fun project. I wanted to second my favorite Vue + Firebase combo. The purists may balk but it is super approachable for a luddite like myself.
ssivark 6y ago
Slick tool! Follow-up question: What limits a tool like this to VSCode? Is theming (across editors) standardized/similar enough that the same color variables could be exported to get the same theme in different editors?
_fullpint 6y ago
It’d be neat if you could extend this to Windows Terminal as well. They both use very similar structures for themes.

lepouet 6y ago

Looks cool, won't sign up ¯\_(ツ)_/¯

deleted 6y ago
[deleted]

apockoffork 6y ago

This is great! Now I'm not going to get any real work done today.

miketromba 6y ago
I can't tell you how many times while developing this I got sucked into designing themes hahaha.

css 6y ago

Both the Terms of Service and Privacy Policy links 404. Why does this require an account?

miketromba 6y ago
Oooof just pushed a fix for that. It's a lot easier to make a theme in multiple 'sittings' instead of all at once. Your themes get stored under your account so you can come back to them later. Also used for posting the themes in the 'hub'. Localstorage seemed too flakey for theme data storage... it would be a really bad experience to lose an hours worth of theme data.
- deanclatworthy 6y ago
  localStorage is fairly reliable. Far better than the login requirement. Maybe just make it clear to the user that their settings may be lost if they don't login? i.e. login to "hard save"
  - hanniabu 6y ago
    Agreed. I think localStorage is as well, but if that isn't the case then there's still other options. You can make login option, download the settings and upload later, save to Google Drive, Dropbox, iCloud, etc.
- searchableguy 6y ago
  You can use anonymous firebase login option to log in users in the background and when they are finished, prompt them to use oauth login.

madeofpalk 6y ago

One of VS Code's strengths is that it can entirely run without the browser. It would be cool to see actual real preview of the themes in action.

totololo 6y ago
do you mean within?
- madeofpalk 6y ago
  My bad. Yes.
miketromba 6y ago
I actually experimented with this in earlier iterations of the Theme Studio, but I remember running into a bunch of limitations. I think the HTML/CSS simulation is similar enough to the real thing for now (prob 90-95% accurate), but like you said, it would be cool to interact with the theme in a real editor. (clicking buttons, hover states, etc)

encryptluks2 6y ago

"Unfortunately, the VS Code Theme Studio is not optimized for mobile devices yet. If you want to check it out, please switch to a desktop device." I thought the website would at least explain what it is and show some screenshots before trying to load.

k__ 6y ago

Awesome. I used such theme creators for WebStorm, back in the days, and I certainly missed them for VSCode. Nit: it would be cool if I could click on an element in the UI and it would open the config option on the left. Currently it requires me to search for an option.

miketromba 6y ago
Yeah this is a great idea, def going to look into this.

msoad 6y ago

This is cool! I really enjoyed playing around. Some feedback: 1. Do not ask for signup before making a theme. There is so much power in allowing users play around without friction. You will get signups from users that are interested. 2. Make the editor preview itself a selection tool for various colors and other items. That would make it a whole lot easier to use 3. Allow grouping of colors. Some colors are always set to the same value. Allow setting the colors individually too. But users often want harmony.

abledon 6y ago
yeah, after looking around some demo themes, was about to make a theme, got blocked by signup and closed tab
- bartread 6y ago
  Me too: I am unpleased by forced sign-up before I've had chance to try the thing I'm signing up for, so I didn't get beyond browsing demos. Some of them did look nice, but nah.
- chii 6y ago
  the smart way to do it is to allow you to make a theme, but to save it/share it, you need to sign up. If the theme is just a throwaway, people won't sign up, but if the theme is really good and the person wants to save it, it makes the signing up easier to swallow (since you get value from saving it). Otherwise, you end up with crappy noise in the sign up because people would just make a fake account to try it out.
miketromba 6y ago
Thank you, these are great - I agree with all them. Going to add these to my list!
nness 6y ago
Same, closed tab the moment I saw a sign-in screen.
misterbwong 6y ago

borisandcrispin 6y ago

This is really cool and easy to use! Recently I've been checking what can be customized in VS Code and my approach was to just check what was modified by the theme. This makes the whole process more intuitive as you can just tweak the settings and see how it would look like.

elefantastisch 6y ago

This looks really really slick. The signup process only worked for me if I turned off tracking protection in Firefox. One bug, entering hex code aggressively tries to convert 3 digit into 6 digit. So you can't actually type a 6-digit hex code because as soon as you type the first 3 digits, it expands it into 6, so you have to like backspace and mess around with it to get the color you want. It would also be nice to have more flexibility in syntax highlighting section. Not everyone wants to group things in the same way for setting colors.

miketromba 6y ago
Thanks, I agree, going to look into this.

breakfastduck 6y ago

Signup = no thanks

zackkrida 6y ago

This is great; nice work. The only feature I see missing is the ability to edit the resulting JSON file. This would also allow users to base their theme off of existing themes, which would be my primary use case for something like this. Often I love a theme except for one or two small details, and it'd be nice to edit them in this tool.

miketromba 6y ago
Thanks for the suggestion! One feature that is somewhat close to this is the "Fork" feature that lets you clone an existing theme that is already within the hub. Another thing which I want to implement in the future is the ability to fork ANY VS Code theme that is on the marketplace... so E.g. if you like "Material Theme" you can instantly 1-click clone it into the theme studio.

benatkin 6y ago

If you're on Android and want to check it out, switch to desktop mode in your browser. It works more or less fine in Firefox for Android.

iSloth 6y ago

Asking for signup first made me instant click away - You might want to think is that really needed...

sorenjan 6y ago

Are you allowed to use the VS Code name and logo?

MetaWhirledPeas 6y ago

This is very nice, but it's still not simple enough for me. It's too much work to sift through every nook and cranny changing individual colors. I would love a way to pick a palette of a handful of colors and then be given ways of rolling different color combinations. This would be a great experience: 1. Override the colors on elements I'm interested in (background for instance) 2. Click an Auto button to generate the remaining colors based on my manual selections.

snarkypixel 6y ago

I've built themes before and one nice feature that I'm missing is color variables to avoid having to copy/paste the same RGB everywhere. It makes it much easier to play with various color schemes but also makes creating new themes from a template much easier.

miketromba 6y ago
Good idea, noted!

selrond 6y ago

An alternative - not just for VSCode, but a whole range of software - https://themer.dev/ https://themer.dev/

roboterer 6y ago

Really nice. I've enjoyed playing around with the editor. As mentioned by others, color variables would be nice to group some values together. And i would love to import my own themes to adjust some colors or customize it.

miketromba 6y ago
Agreed, going to explore this, thanks!

inChargeOfIT 6y ago

This site is blocked for me due to malware threats. ??

miketromba 6y ago
Strange, do you know what's giving you that warning?
- inChargeOfIT 6y ago
  Likely a false positive. I'm on a corporate vpn and the Cisco CA cert is not trusted.

whatever1 6y ago

I am always excited when I get to customize an app, but I always end up with hating the final results. Picking right color combinations & fonts is not an easy task! So now I am at the point where I say, just leave it to the experts. They know better.

deleted 6y ago

[deleted]

pluc 6y ago

This sign up thing is such a plague. I don't want to trade my digital identity for a theme, it's a bad deal. The only reason I would sign up is if you'd allow theme hosting and signing up would allow me to host my themes and gain notoriety.

miketromba 6y ago
That's fair. In the future I'd like to implement features like: automatically handle publishing to the marketplace for the user (right now it's a pain), upvotes system, etc. Accounts are a good solution for these types of features + it makes the theme data persistence way more robust so you can comfortably / reliably start a theme and then come back later to finish it. There are many suggestions for making signing-in optional though, so will explore this.
- soneil 6y ago
  2 emails in 3 days is too much. This is why we don't want to sign up for things. You spin us some crap about why you need it, and then use it to spam us.
  - pluc 6y ago
    and then they try to convince you that "email marketing" isn't spam.

keithnull 6y ago

it looks awesome, but I just always failed to sign in with Github :(

Redoubts 6y ago

Is there a way to upload a partial theme? I already noodle on one and sticking in this to validate or handle sections I didn't think I needed to care about would be great.

Geezus_42 6y ago

How is this different from or better than themer? Themer can be ran locally or you can use the website and no login is required.

miketromba 6y ago
I like Themer. I think Themer is awesome for creating less-detailed but still great 'umbrella' themes that you can bring with you to lots of different programs. This is for creating more detailed / robust VS Code-specific themes.

fireeyed 6y ago

Hello, this is great to see. However, the site is not recognizing login on Brave browser even with lowered filters. I logged in via Github and can see your app is authorized. The site still thinks I am logged out. Also, I block facebook pixels, reddit tracking and google tag manager that you have on the site. Could that be the reason. I don't want FAANG scum to get my data each time I lift my toilet lid :)

miketromba 6y ago
Yeah the Firebase + GitHub auth seems to be broken across-the-board. Going to dig into this.

vishnumohandas 6y ago

Project looks cool. "Sign in with Github" doesn't seem to be working though.

miketromba 6y ago
Seems to be broken for now unfortunately; will have to figure this out.

Gehinnn 6y ago

It would be so cool if you could change the colors directly in VS Code by just pointing to the pixel that you want to change. A color picker would pop up and the change would be applied immediately. (It would not only change the selected pixel but the entire color key) Maybe with some machine learning the easy-to-compute function from colors -> VS Code UI Screenshots could be inversed, so that you know which color keys influence a certain pixel. Sadly the color space is finite, otherwise the color key could be easily encoded in the color without changing the color much. Looking forward to high DPI CSS colors ;)

iudqnolq 6y ago
You could do that without ml by setting each color to a marker color and detecting the marker. In theory :). I'm sure it would be a PITA.

mouzogu 6y ago

I like this but please add a light mode. I suffer from astigmatism and looking at a black screen gives me headaches. I specifically create light mode themes that work with my eye condition.

miketromba 6y ago
Thanks for sharing this, I will look into a light theme for a future iteration.

liorsbg 6y ago

Wait, does this mean you could create a VSCode extension to create themes for VSCode within VSCode?

eyelidlessness 6y ago
You can create an extension that does pretty much arbitrary JS, so I’d assume the answer is yes!

victorbojica 6y ago

Very nice tool. I don't have the patience to fully customise a theme, but i would really like to browse through the existing themes. The only problem here is that there are a lot of themes (most of them) that were started just for checking the tool out, so they're not really finished or different from the default. Maybe you could add some kind of publish button - or as a quick fix, don't show the themes with "Untitled" in the title. Otherwise great project. I really think this would be great for medium sized IT shops/companies for branding their tooling. Great job. PS: found this gem https://themes.vscode.one/theme/rpetersen29/dOaUUtdW https://themes.vscode.one/theme/rpetersen29/dOaUUtdW

miketromba 6y ago
Yeah, this needs some curation / clean-up features for sure. The Gem made me laugh. In game design there's some concept of '4 different player archetypes' and I forget the details but I remember one of them is like... that player that just likes to break stuff. Respect to whoever made that :)

tjsix 6y ago

As someone who's created their own theme for VSCode this could've saved a ton of time. However after trying to just change a couple colors I'm already extremely frustrated since I can't actually type a hex code in the color picker without it hijacking what I'm typing and adding characters, even when I'm trying to delete. The only thing that works is if I paste in a hex code. I'm not sure if this is an attempt at autocompleting the hex codes but whatever it is, it's maddening.

miketromba 6y ago
Yeah that's a nasty bug. I built the picker from scratch so it has not been battletested. Will fix this moving forward.

deleted 6y ago

[deleted]

mj_green 6y ago

I’d love to be able to use this without signing up!

eyelidlessness 6y ago

Can’t look now because I’m on mobile, but excited to check it out when I get back to my desk. I’ll give more feedback if I have any then, but before that a couple quick thoughts: - if you’re not already aware of/using Shiki[1], it’s an excellent library for using VSCode/TextMate themes on the web, and another potential use case for a tool like this - it would be nice if some mobile functionality was supported where it’s not a heavy lift (eg browse themes) 1: https://shiki.matsu.io/ https://shiki.matsu.io/

shortlived 6y ago

Any chance there can be a screensheet of the diff view? I've used a lot of Neo/Vim themes and this scenario is always where the theme falls down or really shines.

miketromba 6y ago
Good idea. The screenshot generation system is a bit limited at the moment just because of the quantity of images that need to be generated on the server-side every time someone updates their theme. This does seem like an important one, so I will add this to my list, thanks!

israrkhan 6y ago

For some reason, this site is being blocked by our corporate security software "This site is blocked due to a security threat."

miketromba 6y ago
Third time I'm hearing this... I think it might have something to do with: a) newish domain, b) uncommon TLD ".one" or c) cloudflare DNS setup pointed to netlify with cname flattening. I'm a noob when it comes to DNS stuff, so I'm not sure if/why that would cause problems, but who knows. If anyone else has an idea, let me know! --- I think I figured it out. Someone mentioned "Cisco Umbrella" blocking it. This article explains the categories of 'threats' it blocks: https://support.umbrella.com/hc/en-us/articles/115004563666-Understanding-Security-Categories https://support.umbrella.com/hc/en-us/articles/115004563666-... One of the categories is "newly seen domains" and another is "dynamic DNS". I suspect one (or both) of those is the culprit because everything else appears clean on total scans like this: https://www.virustotal.com/gui/domain/themes.vscode.one/detection https://www.virustotal.com/gui/domain/themes.vscode.one/dete...

wysewun 6y ago

looks great! using hex values for color gets complicated. perhaps a color system like tailwind would be great to simplify choices

staplung 6y ago

Very cool. One feature that seems to be missing is an option to set various text bits to bold.

soneil 6y ago

Having great fun with this. Two things I thought worth mentioning .. "How to actually use the resulting json file without publishing it" would make a really nice faq item. I still haven't figured this step out yet. The downloaded files are named .json.json - a papercut to be sure, but I assume low-hanging fruit too.

jonfw 6y ago

It might make more sense to require users to create a title than to let them use the default 'untitled', if you're planning to continue showing these themes to users

neolog 6y ago

Rank them by number of installs.

trevor-e 6y ago

FYI both Firefox and Cisco Umbrella are reporting this site as a security threat.

OutThisLife 6y ago

Love it! Is there a github to issue PR's? Would love some sort of history panel. I think, also, the amount of notifications/confirmations is a bit overkill.

cylde_frog 6y ago

Cool site but I'm not giving you my email address. Might use once that is removed. I'd use my Github if you weren't requesting to read my private email.

Waterluvian 6y ago

This is wonderful. As a related thought, what I really want is a point and click legend on what all the pieces of vscode's UI are called. Many times I've had to guess wildly in google at what they call "that bar to the side|top|bottom" when I go looking for settings or plugins or bugs etc.

butuzov 6y ago

hm.. nice! I made one theme for myself (github[1], vscode[2]) and wanted to try to upload my json to see how it looks like in your interface... (for a screenshot proposes). cheers! nice project! [2] https://github.com/butuzov/vscode-theme-acid https://github.com/butuzov/vscode-theme-acid [3] https://marketplace.visualstudio.com/items?itemName=butuzov.acid https://marketplace.visualstudio.com/items?itemName=butuzov....

miketromba 6y ago
Going to implement an "import from json" feature soon... that would let you do this

turblety 6y ago

Why do I need to sign up before playing with the theme creator? Closed the tab. What a shame.

laex 6y ago

Do the themes work with Monaco editor ?

de_nied 6y ago

VS Code One features: * Clickable slide show, with 120 slides, each containing approximately 1/5th of any current sentence. Good for school presentations, family movie night, or mundane business meetings. * Subdomains for everything. Excellent SEO utilization for preventing server downtime from user connection surges and spikes. * Static sidebar buttons, such as "Create New Theme", that create irremovable forced registration overlay popups. Perfect for dimming screens. (Psst, a secret, you can think of the "Browse Themes" button as the "x" button because that's exactly what it does. Don't tell anyone.) * Statistics of such prominency that require no citations! * Absolute guarantees and claims of being the "fastest, easiest, most efficient way to master VS code". Keeps users safe by keeping them informed of their fantastic choice! * World's first legitimate "shortcut to mastering VS Code". Now with 50% more rich in getting rich! (Or brain in this matter, get it?) * Usage of proprietary and trademarked assets for commercial purposes. Having licensed logos on your product, as well as "VS Code" in its name, can't be cheap! Product shows commitment by following copyright laws. Final thoughts: I felt as if I was with a constantly gasconading taxi driver, orating me his years of skill and knowledge, driving me around, showing me all the roads he knows, and then being charged for the hour, miles away from my destination. In all seriousness, this is a scam. He is charging $150 (which is currently a sale discount from the normal $300) for his videos that teach you...basic introductory topics that already have an immense amount of free official educational resources.

pweissbrod 6y ago

So let me get this straight. I make a theme. In order to actually use that theme I must sign up with azure DevOps create my own organization then get a personal access token then publish it to an open marketplace with my information on it then and only then can I get it into my IDE. Does anyone else see that as ridiculous?

herbst 6y ago
Looks like a microsoft standard way to get things done to me
Firehawke 6y ago
Don't quite need to do that. Follow https://themes.vscode.one/faq/publishing-theme https://themes.vscode.one/faq/publishing-theme to step 4. Then use VSCE to make a package file as shown on https://code.visualstudio.com/api/working-with-extensions/publishing-extension https://code.visualstudio.com/api/working-with-extensions/pu... You can then distribute the VSIX file that you create any way you please and also do a VSIX file installation of the theme on your local copy of VSC.
- pweissbrod 6y ago
  Thanks! It's still a lot of hoops to jump through coming from visual studio perspective where all settings can be imported or exported to a file. But this is workable!

acqbu 6y ago

This is amazing - one of the best projects I've seen in a long time.

Firehawke 6y ago

Had a bit of trouble changing the title/description. Something was triggering uBlock Origin in such a way that I had to disable it to be able to change the title and description so I could save it.

rudilee 6y ago

Anybody know something similar for phpstorm or intellij ide? I try to create custom theme using the plugin sdk route, I might be doing it terribly wrong, the result works weird on some place like there's white border around windows and missing colors.