A few posts ago, I described how to set Dark Mode with the
prefs-color-scheme Media Query. The browser will detect the OS Dark Mode setting (set in the Windows Control Panel or macOS System Preferences) and use the appropriate CSS Media Query rule. But what if you want to programmatically set either Dark or Light mode irrespective of the OS setting?
Dark Mode is all the rage with desktop and mobile OS’es right now. Interestingly, modern browsers can detect the OS dark mode preference, and use a different set of CSS styles respectively for light or dark modes! Here’s how I updated My custom Grav theme.
Lots of web pages now rely on SVG instead of PNG or JPG images. SVG stands for Scalable Vector Graphics, an XML-based vector image format that scales well, unlike bitmap images (bitmaps become pixelated when up-sized). I recently wanted a quick way to convert a SVG to PNG, and discovered modern browsers (read: Chrome and Firefox) can do this with a simple bit of code.