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

Activity

1. Orta Therox (orta)

   transferred this issue frommicrosoft/TypeScripton Oct 18, 2019
2. orta commented on Oct 18, 2019

   

   Orta Therox (orta)

   on Oct 18, 2019

   Contributor

   More actions

   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 👍

   👍React with 👍1Reacted by Nisar Hassan Naqvi
3. Orta Therox (orta)

   added

   PlaygroundIssues that affect the PlaygroundIssues that affect the Playground

   on Oct 18, 2019
4. nisarhassan12 commented on Oct 20, 2019

   

   Nisar Hassan Naqvi (nisarhassan12)

   on Oct 20, 2019

   Last edited by nisarhassan12

   Author

   More actions

   Thanks! a bunch Orta Therox (@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 🙂
5. nisarhassan12 commented on Oct 29, 2019

   

   Nisar Hassan Naqvi (nisarhassan12)

   on Oct 29, 2019

   Author

   More actions

   I'm so Sorry! Orta Therox (@orta) I have got busy in other things so I can't make the PR.
6. orta commented on Nov 1, 2019

   

   Orta Therox (orta)

   on Nov 1, 2019

   Contributor

   More actions

   Never feel guilty for not contributing to open source

   ❤️React with ❤️8Reacted by Nisar Hassan Naqvi, Shinigami, Gerrit Birkeland, Frank Weindel, Javier Pacareu, kpietraszko, David and Sashank Gunda
7. nisarhassan12 commented on Nov 1, 2019

   

   Nisar Hassan Naqvi (nisarhassan12)

   on Nov 1, 2019

   Author

   More actions

   Never feel guilty for not contributing to open source

   Thanks! a bunch! 🙂 ❤️
8. keithlayne commented on Nov 4, 2019

   

   Keith Layne (keithlayne)

   on Nov 4, 2019

   More actions

   So, instead of constantly trolling Orta Therox (@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!
9. keithlayne commented on Nov 4, 2019

   

   Keith Layne (keithlayne)

   on Nov 4, 2019

   More actions

   Ummmm...is orta/typescript-play even relevant? Now I feel dumb.
10. orta commented on Nov 4, 2019

    

    Orta Therox (orta)

    on Nov 4, 2019

    Contributor

    More actions

    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
11. keithlayne commented on Nov 4, 2019

    

    Keith Layne (keithlayne)

    on Nov 4, 2019

    More actions

    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.

    👍React with 👍1Reacted by Orta Therox
12. orta commented on Nov 4, 2019

    

    Orta Therox (orta)

    on Nov 4, 2019

    Contributor

    More actions

    too cool for defaults
13. Keith Layne (keithlayne)

    added a commit that references this issue on Nov 5, 2019

    Add selectable editor themes

    ...

    1deb910
14. keithlayne commented on Nov 7, 2019

    

    Keith Layne (keithlayne)

    on Nov 7, 2019

    More actions

    Should this be closed for now or stay open for the eventual v2 implementation?
15. orta commented on Nov 7, 2019

    

    Orta Therox (orta)

    on Nov 7, 2019

    Contributor

    More actions

    Nah, this is enough IMO
16. Orta Therox (orta)

    closed this as completedon Nov 7, 2019