Add dark mode

[vcastrejont]

People sometimes like to read in low light environments, adding a dark mode button is a good idea for that.
The changes will only be made in css and, of course, add a new button for that.
If this approved I can work on this.

[iliakan]

How the "dark" design will look?

[rkavalap]

css class page__inner
background: #242424
content:
color: white
You can probably play around more on the actual colors itself.
probably a button: dark mode on the top beside buy button on enabled will apply for all pages on the tutorial.

[vcastrejont]

I applied the cobalt2 theme

[navjotjsingh]

@vcastrejont Can you tell how you achieved that?

[vcastrejont]

@vcastrejont Can you tell how you achieved that?

inline css style

[scott-ln]

Just to note there is already issue #339 for this.

[SNishalaka]

just type ur console and hit enter ;-) tadaaa

document.querySelectorAll('div').forEach(el => {
el.style.background = "black";
el.style.color = "white";
});

[imabp]

@SNishalaka here is your tadaa looks like

[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.

[PrashantIndurkar]

Hello Everyone is anyone working on this Dark mode? if so... I want to contribute. we can work together if not anyone is working then I can work on this.
@iliakan I would like to work on this could you assign this to me.
Thanks for the idea @vcastrejont

[iliakan]

I believe, we can do theming using CSS variables.

Just need to declare them in variables.styl and then they can be changed (even dynamically), thus affecting the whole look.

That's the server, with install instructions:

• https://github.com/javascript-tutorial/server
• (you'll also need https://github.com/javascript-tutorial/engine in the process).

Just go ahead and update the styles properly, send the PR, and everyone will have the dark mode on! =)

[PrashantIndurkar]

hello @iliakan , I'm new to these things. ok, I got your point but I don't know how much change I have to make in the files.
you said that...

Just need to declare them in variables.styl and then they can be changed (even dynamically), thus affecting the whole look.

after applying this change on-site is it make default dark theme?

and where should I start applying changes?

[iliakan]

I hope, you're proficient with HTML/CSS, is that right?

You can take the code and send the PR that declares the colors in CSS variables and then uses them everywhere else in styles.

So that changing these variables will change the site theme.

That's all that's necessary.

[imabp]

@iliakan , I am using the following extension DarkReader.org
And its working super awesome, on javascript.info
Here are views.

[joaquinelio]

I love darkreader
Im pretty sure it had an export I cant find now

careful, it has several filters, some may hide some text
check sandboxes and scripts like
//javascript.info/selection-range#selecting-element-nodes l