Please add a dark mode to the Typescript Playground for better accessibilty

[nisarhassan12]

Currently, the Typescript playground , is not much comfortable as it only has a white theme For someone like me with a low vision

It would be nice if there is a dark mode for the playground.

[orta]

Moved to the website repo, and it will get one when the new site gets dark mode too. If you'd like to see it before then, feel free to submit a PR 👍

[nisarhassan12]

Thanks! a bunch @orta. I'm Junior Front-end Developer would love to make a PR but not sure whether my skillset is ok for this but I will try anyway to make it happen 🙂

[nisarhassan12]

I'm so Sorry! @orta I have got busy in other things so I can't make the PR.

[orta]

Never feel guilty for not contributing to open source

[nisarhassan12]

Never feel guilty for not contributing to open source

Thanks! a bunch! 🙂 ❤️

[keithlayne]

So, instead of constantly trolling @orta about this feature, I figured I should just implement it. The implementation is super easy, but probably need some questions answered before actually doing it.

Currently there's a single theme defined and used in main-2.js. That's all there is to it.

Monaco comes with (AFAICT) 3 built-in themes: vs, vs-dark, and hc-black. Changing the editor theme is as simple as i.e. monaco.editor.setTheme("vs-dark"). BUT, looks like Orta used 'vs' (the built-in light theme) as a basis for the playground theme, which makes me think it would not be desirable to just plug in one of the other two.

So, questions:

1. Would it be okay to use those as-is, at least for a first pass?
2. The other two don't jive too well with the overall theme and branding of the site - should there be changes in the non-editor css when the editor theme changes?
3. I was thinking vscode shipped with more themes (i.e. Solarized) - should this just be a light/dark/HC option, or maybe include at least the default vscode themes for user pleasure? I was thinking of just writing a script to scrape the relevant stuff right out of the vscode repo. Seems like low-hanging fruit, but may not be valuable.
4. Should the theme choice be persisted? If so, how? I think of this as a user preference, i.e. not something that should be reflected in the URL.
5. How do you wanna reflect this in the UI? I was thinking a dropdown on the right side near 'About' named 'Theme' or 'Editor Theme'. I'm an amazing UI designer 🚎

With some guidance on these things, I can turn this around quickly...let me know!

[keithlayne]

Ummmm...is orta/typescript-play even relevant? Now I feel dumb.

[orta]

orta/typescript-play even relevant

Yep, it's used as a sub-module in this repo.

Would it be okay to use those as-is, at least for a first pass?

Yes

• You can't easily use a vscode theme in monaco (vscode has a theming engine which doesn't run in monaco solo) so I'd make it from scratch. Honestly though, if you get 90% there I'll wrap that up and make it consistent etc. Look here instead for ideas but IMO write it yourself so that we don't have to think about licensing.

• I'd persist it in local storage (we do that for your query) which should be fine IMO

• Yeah, lets start with a dropdown like themes. The site uses bootstrap 3 so you can use these docs to make a dropdown. Theme is fine and a list of options is cool, I'll eventually move it out into the site selector, so please don't offer more than a dark and a high contrast or else they'll get removed later and folks will be sad

[keithlayne]

I'm a little confused. Are you saying that setTheme('vs-dark') won't work? Seemed to when I ran it locally. Especially since there's the base property.

No biggie, I can do pretty much all of this without a lot of specifics on the theme, so I'll get something for you to look at ASAP.

[orta]

too cool for defaults

[keithlayne]

Should this be closed for now or stay open for the eventual v2 implementation?

[orta]

Nah, this is enough IMO