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

• CSS accent-color
• Snippet Generator