Skip to content
Sign upLog in
← Back to Community
Question
Profile icon
NinjaCoderz

How do i make a dark theme and ligth theme switch like with html and css and js if anyone know

Answered by EpicGamer007 [earned 5 cycles]
View Answer
Voters
Profile icon
NinjaCoderz
Comments
hotnewtop
Profile icon
EpicGamer007

you could make to seperate css files and then when the user presses a button or something. you change the href of where you link your stylesheet to the other stylesheet

Profile icon
NinjaCoderz

@EpicGamer007
thanks and congrats

Profile icon
NinjaCoderz

@EpicGamer007
can u see if the dark mdeo is good enuf?

Profile icon
EpicGamer007

@NinjaCoderz
it is good :)

Profile icon
[deleted]

Answer

In HTML do

<button onclick = "darkmode()">Whatever you want in here</button>

In Javascript:

function darkmode() { let element = document.body; element.classList.toggle("dark-mode"); }
Profile icon
AustinAtkins2

Buy discussion post. Online classes have become an essential part of our life. Even though written communication is considered to be one of the most convenient types of interaction, students still may feel it difficult to convey their thoughts. If the communication happens within the online course, it's better to buy a research paper from a professional writing service.

Profile icon
SixBeeps

If you want a comprehensive guide on adding dark mode to your website, CSS Tricks has you covered.

Profile icon
NinjaCoderz

@SixBeeps
tanks i will look into it

Profile icon
19wintersp

Here's one way of doing it.

If you add this to your CSS:

body { background-color: var(--bg); color: var(--fg); } body.dark-mode { --bg: #112; --fg: #fff; } body.light-mode { --bg: #eee; --fg: #110; }

Applying the class "light-mode" or "dark-mode" to <body> will change it to light or dark mode respectively.

You can add a button or checkbox, which, when changed, will trigger some JavaScript code to update the class.