Skip to content

Dark Mode Media Query Code Snippet

While styling up a new project soon to be revealed, I started using accent-color to help easily style form inputs. Unfortunately, I set this accent color at the root and it was causing checkboxes to disappear on Safari.

This led me to create a tiny code snippet for prefers-color-scheme: dark. Let me know if it's helpful to you!

Add this to your VSCode by going to Code → Settings → Configure User Snippets → New Global Snippet and paste the snippet below.

"Media Query Dark Mode": {
"prefix": "@media:dark",
"body": [
"@media (prefers-color-scheme: dark) {",
"description": "Media Query Dark Mode"

A gist if you prefer

Now, when you type @media:dark it will expand and place your cursor in the brackets. Here's to typing less and styling more!


Posted in: #vscode #css by @



henry ✷
Fernando Mateus
David leininger
Maria Kravtsova


henry ✷
David leininger

1 Reply

henry ✷
henry ✷

@danleatherman clean! thanks for sharing mate :D source

These are webmentions via the IndieWeb and Mention this post from your site:

More posts