How to automatically add dark mode to your site in 3 lines

@media (prefers-color-scheme: dark) {
* {filter:invert(1);}
}

The result won’t be perfect (in fact, it’ll probably look downright awful), but it gives you a great starting point to then pull out individual colours and rebuild the CSS how you…


This content originally appeared on DEV Community and was authored by 

@media (prefers-color-scheme: dark) {
    * {filter:invert(1);}
}

The result won't be perfect (in fact, it'll probably look downright awful), but it gives you a great starting point to then pull out individual colours and rebuild the CSS how you want!

The @media (prefers-color-scheme:dark){ ... } is all you need to automatically trigger dark mode styling on your site if the user has set their browser to dark mode.

This is how I created the new dark mode on my blog. Started with the filter:invert(1); trick, picked out the colours manually in the inspector that worked, and slowly tweaked the rest. You can see the final result here: https://flipsphere.net/


This content originally appeared on DEV Community and was authored by


Print Share Comment Cite Upload Translate Updates
APA

| Sciencx (2021-10-16T23:32:59+00:00) How to automatically add dark mode to your site in 3 lines. Retrieved from https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/

MLA
" » How to automatically add dark mode to your site in 3 lines." | Sciencx - Saturday October 16, 2021, https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/
HARVARD
| Sciencx Saturday October 16, 2021 » How to automatically add dark mode to your site in 3 lines., viewed ,<https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/>
VANCOUVER
| Sciencx - » How to automatically add dark mode to your site in 3 lines. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/
CHICAGO
" » How to automatically add dark mode to your site in 3 lines." | Sciencx - Accessed . https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/
IEEE
" » How to automatically add dark mode to your site in 3 lines." | Sciencx [Online]. Available: https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/. [Accessed: ]
rf:citation
» How to automatically add dark mode to your site in 3 lines | | Sciencx | https://www.scien.cx/2021/10/16/how-to-automatically-add-dark-mode-to-your-site-in-3-lines/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts