DEV Community

Discussion on: I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript

Collapse
 
hemant profile image
Hemant Joshi

Nice;
Checkout mine hemant.codes

But this website is under development and soon adding darkmode

Collapse
 
chaoocharles profile image
Chaoo Charles

I have taken a look, it's a good one

Collapse
 
hemant profile image
Hemant Joshi • Edited

Thank you❤️;
Hey is there any easier way to add darkmode to website?

Initially I will have to use conditions in js in my css script for changing color, but is there better way then this?

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Create two themes(css styling) and toggle them with a button click

Thread Thread
 
hemant profile image
Hemant Joshi

Yes, this is a good idea but it is going a tough deal for me to implement is there any blog or documentation for darkmode?

Thread Thread
 
chaoocharles profile image
Chaoo Charles
Thread Thread
 
thomasareinert profile image
Thomas A. Reinert

There's a media query to check if the user has chosen to use dark mode. And you should respect that choice designing your UI.

@media (prefers-color-scheme: dark) {
/* CSS Code when dark mode active */
}

As always with new features don't forget to check on caniuse.com for browser compatibility.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Wow, thank you for this!

Thread Thread
 
ponnex profile image
Emmanuel Francis Ramos Jr.

Check
medium.com/@katiemctigue/how-to-cr...

It is how Katie Mctigue implemented in her portfolio website in here: katiemctigue.com/

I'm also currently working on my portfolio website implementing the same idea
It's still in development but hey kindly check out: ponnex.dev

Collapse
 
ekaranja profile image
Emmanuel • Edited

If you really want control over your website, you'd rather do it from scratch. An "easy" way to do this is by use of css variables and a little bit of javascript. Here's a great guide from Ananya Neogi
OR you could check out darkmode.js