Dark extension for code examples (editors snaps where code is written)

[shreyaswikriti]

Programmers often like the dark theme. I found this eye-catching. rather than a light theme, we can convert the editor to a dark theme. I'll start working on this if you like. @patricoferris

[pitag-ha]

Having dark code snippets seems to break a bit with the rest of the site, which is light, doesn't it? Do you have an example of a site where that happens?

[shreyaswikriti]

it's the website of the iconic framework. They also use dark extension. Actually, I thought this extension look quite new and eye-catching that's why I suggested it. Thank you for reviewing this issue.

[pitag-ha]

In the screenshot you've sent everything is dark. The proposal of the issue is making only the code blocks dark and leaving the rest light, right?

[shreyaswikriti]

yes, I proposed to make only code blocks dark not all websites. Just as the above screenshot I have sent (second one).

[pitag-ha]

Sorry, I've misinterpreted the (second) screenshot you've sent. I think this issue is a matter of taste :) Some sites have it one way, others have it the other way; some prefer it one way others prefer it the other way.

Have you seen that applicants can only work on 2, max 3 simple issues (I'm referring to this)? I think you already have 2 simple issues (or more) to work on, don't you? Or do you rely on this one to have something simple? :)

[shreyaswikriti]

I have given only one simple issue to work on. I would love to contribute more.

[patricoferris]

Hi @shreyaswikriti,

I agree with @pitag-ha that this is definitely one of those subjective issues, but I think to add a dark colour format now would entail two important aspects:

• The ability to toggle between the dark and light -- I can't think of a reason why switching to dark from light is an improvement, but having both probably is.
• More work related to the accessibility of the colour choices -- I did quite a lot of work not too long ago in researching the colours we currently have (see https://github.com/ocaml/ocaml.org/issues/1199), to not regress on this I think we would want to do the same here.

What do you think?

[pitag-ha]

The ability to toggle between the dark and light?

Yes, I agree that that might be an improvement, if it is for the whole site. @patricoferris, do you think it would also make sense to only have dark mode for code examples? I think that's what the issue is about. @shreyaswikriti , please correct me if I got that wrong and you actually wanted to implement dark mode for the whole site :)

[shreyaswikriti]

Primarily, I raised this issue to change the color of code blocks only but as mentioned by @patricoferris theme switcher can be added to the whole site. I have seen many websites that do use the theme switcher.

[pitag-ha]

Sounds great. Could you send me a link to a couple of websites with theme switcher? It rings a bell having seen that somewhere, but I don't know where and I'm curious :)

[shreyaswikriti]

Hii @pitag-ha, there is a theme switcher on the GitHub website itself, where we can toggle between dark and light themes. Actually, theme switcher is famous on that website where users spend a lot of time like book reading websites, coding websites, etc. The reason being dark mode gives less eye strain. For this website, we have to Learn section where users can spend more time reading codes, learning about OCaml, etc. So it would be beneficial for a user to have a theme customize option. This is not a compulsory thing but an additional facility for users.

[shreyaswikriti]

So, Can I start working on this??

[pitag-ha]

So, Can I start working on this??

Yes! :) Sounds good to me (and I'm pretty sure it also does to @patricoferris ). You're right: I should have made that clearer.

[shreyaswikriti]

I made a theme switcher for the site. Light mode is the same as previous.Since the video quality is not good, I am attaching some screenshots. Kindly have a look @pitag-ha @patricoferris @gs0510

https://user-images.githubusercontent.com/57635473/114870998-712a5180-9e16-11eb-93fe-d05878ac224d.mp4 Screenshots

[gs0510]

@shreyaswikriti This is a great start! I have a few comments:

1. The code block that's gray is harder to read than before, maybe you can choose a different gray that's help with legibility.
2. The toggle looks a little out of place with the emojis. It would look more consistent with a simpler toggle.
3. Can you run an accessibility tool with your website, I feel there's a bunch of places where the contrast is wonky and makes it harder to see.

[shreyaswikriti]

@gs0510, I have made the changes as suggested. Also, I used the 'WAVE Evaluation Tool ' and it's showing no contrast errors. Kindly have a look.

https://user-images.githubusercontent.com/57635473/115051306-4d403c00-9efa-11eb-845e-4cb8f517b408.mp4

[gs0510]

@shreyaswikriti It definitely looks better! But I think every time you switch to another link, there's a flash where the bright version is loaded first and then the dark version is applied which makes browsing the website uncomfortable. Can you fix that?

The switch can be something like this:

Thanks!

[shreyaswikriti]

@gs0510,

• I searched about the first problem on google. I found this flash generates due to many problems. It's a complex issue that involves speeding up the website. By the way I am doing my best if I can find any solution.
• I implemented the desired toggle button.

[shreyaswikriti]

@gs0510, Kindly Have a look. thanks https://user-images.githubusercontent.com/57635473/115125553-8c4bbb80-9fe6-11eb-9a78-d63df69a4e82.mp4

[gs0510]

Looks really good @shreyaswikriti!! you should go ahead and open a PR :)