Dark Mode Toggles Should be a Browser Feature
Tag Archives: dark mode
Building an Adaptive SVG favicon that responds to Dark Mode
Speaking of favicons: In the latest episode of GUI Challenges, Adam details how to create an adaptive favicon that responds to Dark Mode. SVG Favicons were introduced in Chromium 80 (2019) and Firefox 41 (2015). No support in Safari. Building an adaptive favicon → 🤔 On the WebKit Issue tracker I can find this RESOLVED …
Continue reading “Building an Adaptive SVG favicon that responds to Dark Mode”
Dark mode in 5 minutes, with inverted lightness variables
Lea Verou shows a method to implement dark mode, not by swapping entire colors, but by simply changing their lightness The basic idea is to use custom properties for the lightness of colors instead of the entire color. Then, in dark mode, you override these variables with 100% – lightness. This generally produces light colors …
Continue reading “Dark mode in 5 minutes, with inverted lightness variables”
The Quest for the Perfect Dark Mode Toggle, using Vanilla JavaScript
In The Quest for the Perfect Dark Mode, Joshua W Comeau extensively explains how he has implemented the Dark Mode Toggle on his Gatsby-powered website. It follows the system’s light/dark mode preference, but also allows for an override which he persists in localStorage. The flow to decide if Dark Mode should be used or not …
Continue reading “The Quest for the Perfect Dark Mode Toggle, using Vanilla JavaScript”
Dark Mode and Variable Fonts
Robin Rendle writing for CSS-Tricks, on leveraging Variable Fonts when implementing a Dark Mode: Oddly enough, these two bits of text [shown above] are actually using the same font-weight value of 400. But to my eye, the white text looks extra bold on a black background. How do we fix this? Well, this is where …
Building dark mode on Stack Overflow
The Stack Overflow team walks us through their Dark Mode implementation. Building dark mode on Stack Overflow → 💡 Writing a JS app (React / Angular / Vue / …) and looking to implement Dark Mode? No worries, I’ve got you covered.
How to Design Delightful Dark Mode Themes
When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption. However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will …
Continue reading “How to Design Delightful Dark Mode Themes”
How to add Dark Mode to a JavaScript App (React / Angular / Vue / etc)
In this post I’ll cover how to add Dark Mode to a JavaScript App. All major frameworks (React, Angular, Vue, etc.) are covered!
Emulate Dark Mode using Chrome DevTools
Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark” from the menu You can also access the option via the Rendering panel. (Via @ChromeDevTools)
SVG favicons in Chrome
A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉 🦊 Firefox already has support for SVG favicons, ever since version 41 Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME …