[HN Gopher] Show HN: I built a VS Code Theme Creator - easily ma...
___________________________________________________________________
Show HN: I built a VS Code Theme Creator - easily make VS Code
themes in browser
Author : miketromba
Score : 280 points
Date : 2021-03-25 13:24 UTC (9 hours ago)
(HTM) web link (themes.vscode.one)
(TXT) w3m dump (themes.vscode.one)
| soneil wrote:
| 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.
| israrkhan wrote:
| For some reason, this site is being blocked by our corporate
| security software
|
| "This site is blocked due to a security threat."
| miketromba wrote:
| 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-...
|
| 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/dete...
| eyelidlessness wrote:
| 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/
| mj_green wrote:
| I'd love to be able to use this without signing up!
| css wrote:
| Both the Terms of Service and Privacy Policy links 404. Why does
| this require an account?
| miketromba wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| Redoubts wrote:
| 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.
| jonfw wrote:
| 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
| elefantastisch wrote:
| 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 wrote:
| Thanks, I agree, going to look into this.
| breakfastduck wrote:
| Signup = no thanks
| Geezus_42 wrote:
| 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 wrote:
| 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.
| inChargeOfIT wrote:
| This site is blocked for me due to malware threats. ??
| miketromba wrote:
| Strange, do you know what's giving you that warning?
| inChargeOfIT wrote:
| Likely a false positive. I'm on a corporate vpn and the Cisco
| CA cert is not trusted.
| MetaWhirledPeas wrote:
| 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.
| neolog wrote:
| Rank them by number of installs.
| snarkypixel wrote:
| 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 wrote:
| Good idea, noted!
| wysewun wrote:
| looks great! using hex values for color gets complicated. perhaps
| a color system like tailwind would be great to simplify choices
| shortlived wrote:
| 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 wrote:
| 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!
| borisandcrispin wrote:
| 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.
| fireeyed wrote:
| 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 wrote:
| Yeah the Firebase + GitHub auth seems to be broken across-the-
| board. Going to dig into this.
| Gehinnn wrote:
| 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 wrote:
| 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.
| zackkrida wrote:
| 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 wrote:
| 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.
| madeofpalk wrote:
| 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 wrote:
| do you mean within?
| madeofpalk wrote:
| My bad. Yes.
| miketromba wrote:
| 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)
| whatever1 wrote:
| 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.
| mouzogu wrote:
| 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 wrote:
| Thanks for sharing this, I will look into a light theme for a
| future iteration.
| benatkin wrote:
| 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.
| selrond wrote:
| An alternative - not just for VSCode, but a whole range of
| software - https://themer.dev/
| iSloth wrote:
| Asking for signup first made me instant click away - You might
| want to think is that really needed...
| liorsbg wrote:
| Wait, does this mean you could create a VSCode extension to
| create themes for VSCode within VSCode?
| eyelidlessness wrote:
| You can create an extension that does pretty much arbitrary JS,
| so I'd assume the answer is yes!
| encryptluks2 wrote:
| "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.
| staplung wrote:
| Very cool. One feature that seems to be missing is an option to
| set various text bits to bold.
| vishnumohandas wrote:
| Project looks cool. "Sign in with Github" doesn't seem to be
| working though.
| miketromba wrote:
| Seems to be broken for now unfortunately; will have to figure
| this out.
| sorenjan wrote:
| Are you allowed to use the VS Code name and logo?
| roboterer wrote:
| 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 wrote:
| Agreed, going to explore this, thanks!
| [deleted]
| lepouet wrote:
| Looks cool, won't sign up -\\_(tsu)_/-
| [deleted]
| pluc wrote:
| 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 wrote:
| 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.
| tjsix wrote:
| 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 wrote:
| Yeah that's a nasty bug. I built the picker from scratch so it
| has not been battletested. Will fix this moving forward.
| victorbojica wrote:
| 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
| miketromba wrote:
| 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 :)
| trevor-e wrote:
| FYI both Firefox and Cisco Umbrella are reporting this site as a
| security threat.
| miketromba wrote:
| 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)
| dblooman wrote:
| Can you remove sign up?
| miketromba wrote:
| This is a popular request, so I might implement this moving
| forward.
| gravelc wrote:
| As many others have said, as soon as the login came up, I
| closed. Nice idea though.
| _fullpint wrote:
| It'd be neat if you could extend this to Windows Terminal as
| well. They both use very similar structures for themes.
| jasondigitized wrote:
| 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.
| andrewnc wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| ssivark wrote:
| 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?
| keithnull wrote:
| it looks awesome, but I just always failed to sign in with Github
| :(
| apockoffork wrote:
| This is great! Now I'm not going to get any real work done today.
| miketromba wrote:
| I can't tell you how many times while developing this I got
| sucked into designing themes hahaha.
| k__ wrote:
| 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 wrote:
| Yeah this is a great idea, def going to look into this.
| msoad wrote:
| 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 wrote:
| yeah, after looking around some demo themes, was about to make
| a theme, got blocked by signup and closed tab
| bartread wrote:
| 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.
| nness wrote:
| Same, closed tab the moment I saw a sign-in screen.
| miketromba wrote:
| Thank you, these are great - I agree with all them. Going to
| add these to my list!
| harrierpigeon wrote:
| I think the worst part for me was that when I went to sign in
| to GitHub the only thing it asked me for was my private email
| address. Dude, what?
| misterbwong wrote:
| Also, do at least some _light_ curation (votes
| /ranking/popularity). Hitting a page full of _Untitled_ themes
| that all look similar isn 't good for browsing.
| miketromba wrote:
| For sure, I would like to get a HN-type 'hot' algorithm with
| upvotes powering the list in the near future.
| [deleted]
___________________________________________________________________
(page generated 2021-03-25 23:00 UTC)