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) {",
"\t$0",
"}"
],
"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!

Resources

Posted in: #vscode #css by @ https://danleatherman.com/dark-mode-snippet/

Webmentions

5 Likes

henry ✷
Evan
Fernando Mateus
David leininger
Maria Kravtsova

2 Retweets

henry ✷
David leininger

1 Reply

henry ✷
henry ✷

@danleatherman clean! thanks for sharing mate :D source

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


More posts