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