Dark mode

[ayberkt]

It would be quite convenient to be able to read nlab in dark mode. As far as I know, it is not too hard to achieve this by minor tweaks to the CSS.

Is this something that should be addressed directly by instiki maybe? (CC: @parasew)

[Dorson]

Made exactly that for the night and evening time.

See live demo on GitHub page:

https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Have fun, feel free to fork, copy, adopt, port, etc...

[BinaryQuantumSoul]

Here are some community-made dark themes:

https://nforum.ncatlab.org/discussion/17886/
https://nforum.ncatlab.org/discussion/18734/

[ccatrett]

I would like to work on trying to integrate one of these community made dark themes into the website itself instead of as an external download.

[BinaryQuantumSoul]

In my dark theme, there is a significative part that is about mobile friendliness and modernity regardless of the theme brightness. I'd also like to integrate them into the base website. The dark part could be a toggle

[ccatrett]

@BinaryQuantumSoul would you want to work on it together? I am a relatively new to contributing to open source projects but I think this could be a good feature to work on.

[BinaryQuantumSoul]

Of course, though we must first make sure the project maintainer @sattlerc is interested, so we don't push work for nothing. To be clear, the three things I'd like to do is:

1. Make the website mobile friendly
2. Modernize the light theme
3. Add a dark theme toggle

Can you try my dark theme (it's the second I linked) and give your opinion @ccatrett ? Also try to resize it to see the mobile part.

[sattlerc]

We are happy to merge any work on the user interface as long as:

• the users like it (we can create a test instance if you have problems setting one up yourself),
• the code changes don't make the codebase more complicated to maintain.

[ccatrett]

@BinaryQuantumSoul I tried your dark theme and I really like the mobile support along with the overall color scheme and styles.
Here are some ways that I believe it could be improved:

1. The text on the All Pages is very dark and could be improved for readability. Here is a comparison of the colors between another page with links and the All Pages page:

2. As mentioned before, I am a fan of the mobile support. However, I believe that on wider screens, it stretches too far and becomes a bit difficult to read. Another comparison:

I think that either of the latter widths are easier to read since your eyes don't have to scan the entire length of the viewing window. Potential solutions for this could be limiting the text width or adding a toggle feature to change the desired text width, like Wikipedia has recently done.

3. The bright green surrounding the search bar was a bit jarring when I first saw it. I think the intensity of the green here could be decreased or potentially changed to a different color (although, I like the color as is):

These were my first impressions when I tried your dark theme. Again, overall, I enjoy this dark theme and the above are the areas where I think it could be improved.

With regards to your points 1., 2., and 3., I am in agreeance; I think that these additions to the website would make it more visually appealing and modern.

[BinaryQuantumSoul]

We are happy to merge any work on the user interface as long as:

• the users like it (we can create a test instance if you have problems setting one up yourself),
• the code changes don't make the codebase more complicated to maintain.

Perfect !

[BinaryQuantumSoul]

I tried your dark theme and I really like the mobile support along with the overall color scheme and styles.

Glad you liked it!

1. The text on the All Pages is very dark and could be improved for readability.

You are right, that one and also the purple color for some links look a bit off. For example look at search results page.

2. As mentioned before, I am a fan of the mobile support. However, I believe that on wider screens, it stretches too far and becomes a bit difficult to read.

Are you talking about wide mobile screen or wide monitors overall ? For the first case we can do a specific media query for that middle size. For the big screen I had the feeling like the prior was a waste of space, but you are right we could also add a small toggle for the width.

3. The bright green surrounding the search bar was a bit jarring when I first saw it. I think the intensity of the green here could be decreased or potentially changed to a different color (although, I like the color as is):

In my opinion this whole search box is a bit odd since it's huge, and it goes to google search... but the color is indeed too bright, it's also used in some pages where people add in-article debates, we should find another style

With regards to your points 1., 2., and 3., I am in agreeance; I think that these additions to the website would make it more visually appealing and modern.

Perfect

[ccatrett]

Are you talking about wide mobile screen or wide monitors overall ? For the first case we can do a specific media query for that middle size. For the big screen I had the feeling like the prior was a waste of space, but you are right we could also add a small toggle for the width.

I was referring to wide monitors overall, sorry about the confusion. I think the media query sounds like a great idea!

What do you think some next steps would be? @BinaryQuantumSoul

[BinaryQuantumSoul]

@ccatrett we shall fork the repo and test our modifications. However I haven't been able to test the website locally yet. I added an issue on that. I assume we could also only edit the css in browser console and then add them in a WIP push request, but for the js part it's a bit different (if we want a theme toggle)

[ccatrett]

@BinaryQuantumSoul Have you been able to test the website locally yet?

[BinaryQuantumSoul]

Nope tested a whole day without having it working but now I won't have time until july