DEV Community

Cover image for Dark Mode in 3 Lines of CSS and Other Adventures

Dark Mode in 3 Lines of CSS and Other Adventures

Mads Stoumann on April 29, 2023

Dark Mode is a design trend where the color scheme of a website is changed to a dark background with light-colored text and elements. It's also ref...
Read full post
Collapse
 
l10nelw profile image
Lionel Wong • • Edited 
<fieldset id="colorScheme">
Enter fullscreen mode Exit fullscreen mode 
colorScheme.addEventListener(...)
Enter fullscreen mode Exit fullscreen mode

What is the general consensus in the community about referencing elements like this? As opposed to:

document.getElementById('colorScheme').addEventListener(...)
Enter fullscreen mode Exit fullscreen mode

Isn't it considered unsafe and error-prone? I don't really remember, it's rarely seen in the wild, perhaps for a reason.

Collapse
 
madsstoumann profile image
Mads Stoumann •

When I write example-code for articles, I tend to omit selectors, because I want to focus on what the code does, rather than how to select a Node in the DOM.
I assume most of Dev.to's readers knows how to do that anyway, and might want to use their own selectors (class-based, attribute-based, something else?) instead of just copy/pasting the code.

But I could be wrong! So thank you for your feedback — I've added this to the article:

const colorScheme = document.getElementById('colorScheme');
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wadecodez profile image
Wade Zimmerman •

It's best practice to use document.getElementById over the global variable because defining a local variable colorScheme would take precedence. It's also annoying to debug these global variables because they are not explicitly defined. When searching for something like colorScheme = you won't find anything, and finding something like colorScheme.addEventListener tells you nothing about the type of variable. However, finding document.getElementById tells you it's a DOM element.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

I vote that implicit code is dangerous code and explicit code is safe code and there is no grey area 🫣

Collapse
 
madsstoumann profile image
Mads Stoumann •

(see updated feedback above)

Collapse
 
iamhectorsosa profile image
Hector Sosa •

Very detailed post! Great share! @madsstoumann Framing these screenshots would've been chef's kiss. I've built a simple OSS tool to help with screenshots with ease. Give it a shot and let me know what you think.

github.com/ekqt/screenshot

Collapse
 
madsstoumann profile image
Mads Stoumann •

Cool!

Collapse
 
ant_f_dev profile image
Anthony Fung •

Very cool.

I've used this scheme of system themed colours when programming Windows desktop apps.

I didn't know it existed in CSS though - thanks!

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
slowcodersloth profile image
Slow Coder Sloth •

I love it.

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
noruwa profile image
Obaseki Noruwa •

Love this ❤️, Thanks for sharing.

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
devgancode profile image
Ganesh Patil •

This is something I'm for, Thanks for sharing! 🚀

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
ruthmoog profile image
ruthmoog •

Great tips, this was exactly what I've been looking for! 👏

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
sehgalspandan profile image
Spandan Sehgal •

Amazing code snippet.. thanks for telling.

You just saved a lot of time ⏲️ 😌

Collapse
 
madsstoumann profile image
Mads Stoumann •

👍🏻

Collapse
 
louwers profile image
Bart Louwers •

If statement missing here:

window.matchMedia('(prefers-color-scheme: dark)').matches)) {
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maxyudin profile image
Max Yudin •

A notice that the article refers exclusively to the latest version of Chrome should be included at the very beginning.

Collapse
 
madsstoumann profile image
Mads Stoumann •

??? System colors work in all browsers

Collapse
 
maxyudin profile image
Max Yudin •

Just test your code in all browsers and you'll get bad news. The browser war is still here.