Optional dark theme

[vitaly-zdanevich]

Many users like it, many users need it because of sensitive eyes, bad displays, low light conditions. This is called accessibility.

Also, MDN is white only - so dark theme will be your competitive adventure :)

[iliakan]

Would be funny to have it, what you think, @Bezart ?

[nick-walt]

What about starting with enabling users to toggle the code example blocks between light (default?) and dark? I like the code blocks and a dark option might be an easy ehnancement.

The next potential feature is allowing the viewer to select a theme option from a few of the most common themes used for code presentation.

[vitaly-zdanevich]

Just FYI - using extension for browser that invert colors:

[iliakan]

@vitaly-zdanevich what you think about the extension, good enough? :)

[vitaly-zdanevich]

Native is always better :)

[spacewasabi]

Maybe this isn't the place for what I have to say (as this discussion is getting old) but I'll say it anyway, just in case.

@vitaly-zdanevich Thanks for sharing this extension but imo Stylus is a little bit more interesting in our case. It allow users to use custom CSS on webpages.

If we're going for the accessibility debate, I think dark theme is just one of the elements we should consider, text-size, contrast and many more can come in handy for people with bad eye-sight (like me) or let's say color-blind people (like a friend of mine).

[vivekvpatil8888]

I think dark theme will give this website a popularity boost because many new learners like me are using this site daily and we want it to be in dark which is easy on eyes in night.

[originalmk]

No doubt, adding dark theme will be great option for night-readers.

[Bezart]

@iliakan I was thinking about creating a dark theme for tutorial pages only, however illustrations might look weird on dark background. Another point is inline examples that have separate css. To cover these 2 parts will require a lot of manual work. Of course we can leave theme as they are, but it will look ugly. What are your thoughts on this?

[iliakan]

What are your thoughts about this, guys?

@Bezart asks about pictures, here are some of them (made in Sketch editor, Mac only, figures.sketch in the tutorial repo):

[maurodibert]

Hi people! I came here in order to create an issue and start reading this and thought it was an awesome idea. Is still dark mode a thing to develop? I also think as @SugoiNelson that could be just 'the tip of the iceberg' but could be an amazing place to start with.

[dagolinuxoid]

I'm skeptical about it:

1. The current light theme is looking decent.
2. The dark theme actually isn't that good for your eyes.
3. It's hard to make polished dark theme. Honestly speaking a lot of dark themes out there are just crigny, if someone considering of making it at some point you're better put in the work. It's easy to ruin the platform by introducing a sloppy dark theme.

[vitaly-zdanevich]

In the meanwhile was introduced https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[Ali-Hussein-dev]

I use an extension that gives me great control over brightness, contrast and more. it is called "dark reader". it is a great alternative to even native themes.

[sanket-bhalerao]

*** careful while using the flags settings on the browser, this can have serious consequences if not done carefully ***
if you are using a chromium-based browser you can try the following workaround.

go to the flags using the applicable link

chrome: `chrome://flags/#enable-force-dark`
brave:`brave://flags/#enable-force-dark`
edge:`edge://flags/#enable-force-dark`

2. change the flag from default to enabled
3. relaunch the browser

this will turn every site accessed on the browser to dark mode. I would suggest having a secondary browser for this.