I wanna make a website with ‘day’ and ‘night mode’, basically just light and dark version of a website and I have no clue how to do it the best way.
I’ve tried just making two HTML files with different CSS’s included, then i tried changing CSS using PHP.
None of my tries were satisfying, I need something universal and easy to implement.
Thanks for any help!
2
Answers
The best way is probably to use the
prefers-color-scheme
media feature in CSS.Example from
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
You can use the built in
prefers-color-scheme
media featureIt will goes with the user operating system setting (e.g. light or dark mode) or a user agent setting.
read more about the topic
Here’s a simple example on how to create custom style for dark mode:
Or you can do a custom styling without relaying on the user system preferences like the example below :
It can be improved by storing the dark mode/light mode to the localStorage