Dark mode has, until recently, been the preserve of developers and professional creatives such as photographers and filmmakers.
But in 2019, that has changed. A number of companies from Apple to Google to Facebook didn't all embrace the idea that not everything has to be white all the time and started offering users the option to choose an alternative color palette that was easier on the eyes late at night.
We're happy to announce that you can now add a pocket of deliciousness to the list of companies offering dark mode when browsing the website, and from today you can read your favorite news, reviews, specs, shopping and more in light or dark -Mode mode on our website.
But why did we decide to add a dark mode in your pocket yummy. What are the benefits, and how can you enjoy it yourself?
Why walk in the dark?
There are a number of benefits to using dark mode, ranging from being easier on the eyes - especially late at night, making images look better, improving battery life, and most importantly, increasing accessibility.
Google says that it has found that one of the biggest benefits of dark mode after implementing it on the latest version of Android (10) is that it can lead to improved battery life.
Apple didn't quote battery performance profits, but Pocket Juicy said earlier that the cause of the overall darkness mode is due to the many creative professionals that the company asks to take the opportunity to remove any distractions.
For a pocket sized treat, the decision to go "dark" was a combination of all of these reasons, but also because of the team's request for what they wanted and were sure our readers wanted too.
Working in a variety of environments from an office during the day or a plane flying across the Atlantic to events in remote locations somewhere in the world, this is understandable. The Pocket Delicious team spend a very large amount of time not only looking at the screen on your phone, tablet or computer, but also at Pocket Delicious.
Dark mode was requested and problems with its implementation began.
How it works
We'll cover the design process in a minute, but it's worth noting how it works and how you can enable dark mode.
What was clear from the beginning was that dark mode is not something that is suitable for all environments and all applications. Therefore it is not something that should be automatically forced on visitors whether they want it or not. And so that's the approach we've taken to pocket some yummy. You can completely ignore the pocket nippy dark mode if you like and continue to use the light mode normally. It was very important.
Dark mode, and now the corresponding light mode, should be user preference to enjoy content, not something you have no choice.
Some like the idea of dark backgrounds, light text and whatever comes with dark mode, while others find it too polarizing and too harsh compared to how they're used to seeing sites.
In this regard, we offer dark mode in three different ways:
- Determined by the operating system of the device
- Enabled by using the toggle switch at the top of the site in the header
- Controlled by time of day
The first makes logical sense. If you're running dark system-wide mode, it's because you've decided in through the system settings of the device you're using, so you'll want to see your pocket nibbles in dark mode.
The second one is meant to let you enable dark mode if you don't like it, but also to enable it if you don't use dark mode at the system level.
The third, it seems to us, is trying to understand the needs of the user without them, worrying about it themselves. Dark mode is best done when it's dark outside, i.e. at night - and that's why we decided to put it on 10pm to 7am, even if the system settings are set to light mode. We can do this by understanding what the user's timezone is, and setting it accordingly. Of course, you can override this setting if you wish, via that all-important toggle switch.
Dark mode design
Dark mode isn't just about inverting colors from black to white and white to black.
In Pocket-Lint we looked at a number of dark mode palettes to analyze which is best not only in terms of accessibility, but also in terms of readability.
The documentation on the web is still very much in its infancy, and while some palettes work well in some environments, they don't work in others.
Passing "full black" and long articles with a lot of words became tedious to read, and choosing too light gray means dark effects in the mode are lost. You should also consider font color and font, font spacing in terms of kerning and leading, and elements such as hyperlinks, headings, images, and other "font furniture" credits across the page.
The end result was to pick up a color palette with a strong blue-gray and turquoise influence delivering, we believe, a dark mode that is accessible on multiple levels, as well as passing a series of tests on accessibility and readability.
To start, we used colorhunt.co. The easy to use website allows you to see the different color palettes and how the colors complement each other. This is a fantastic resource, whatever your dark design mode is.
Once we had chosen the palette we wanted to work with we set about translating those tones into a pocket yummy design.
We used the darkest color in the palette as our default background and second dark as the highlighter on this background.
You will see these colors most prominently on our newly designed hub pages. The use of color here lifts our "map" design away from the page and greatly improves readability. We also used color for the horizontal rules around the place to paginate listings for example.
The instinctive reaction would be to use teal in the hyperlink palette, on a light background, which works well, however, this is one of the common mistakes when it comes to dark mode. Colored text on a dark background does not work.
To combat this, we changed the pocket-style lint hyperlink to a thick underline that is underlined on hover rather than coloring the associated word or phrase. This approach makes it much easier on the eyes, and we've even adopted it into our light mode theme going forward too.
To improve readability, we have chosen to color the text on the page from white/light grey, the final color in the selected palette, rather than choosing "full white". This creates a much smoother experience and we find it much easier on the eye when it comes to reading.
Yes, dark mode is about contrasts, but you don't want it to be too high contrast. Black and white can really be very sharp side by side.
Once we completed the dark mode, we turned to updating our now new light mode. Previously, the only way to keep a consistent design style and spirit had to change too to fit the same approach and beliefs.
For Pocket-lint, which means a new hyperlink style and a new font color - a dark color in the new palette, plus a few tweaks and changes elsewhere to keep things consistent.
Availability
While many simply see dark mode as something "cool", there are a number of main reasons why it's good in terms of accessibility as well. It was something we wanted to make sure that one of the benefits of implementing a dark mode on Pocket Tasty.
There are a number of tools that can be used to test contrast colors. The World Wide Web Consortium is the premier international standards organization for the World Wide Web and has a set of guidelines for completing it in a more accessible place.
Web content, accessibility guide (groups) 2.1 , in particular, covers a wide range of recommendations for making web content more accessible.
Making sure that both the light and dark modes presented by the pocket lint have gone through these tests is paramount.
And so we worked with guidelines to use contrasting colors to make everything look the best it could.
Design issues
Once we've developed a color palette, translating that into the site is pretty easy, though time consuming.
Pocket Lint has been running for 16 years and it was a good time to tidy up and improve the code in the CSS master file. The CSS file is the file that handles all the styling and layout of the articles and pages on the site, it's a lot of work.
Over the years with numerous manufacturers adding and changing code the trend has been to add styles based on how they look, including their color. It's a big no-no when it comes to implementing dark and light designs and something that when you have a positive and negative color scheme, you need to change.
Another challenge was deciding on a single icon to be used on the site to represent to readers that they could switch between light mode and dark mode whenever they wanted.
With dark mode still in its infancy, there is not a single icon that is used on the web. Those that have already implemented the dark mode have chosen different icons and texts to symbolize have a choice. The moon, sun, light bulbs, and words are used with a little care and attention.
After designing and testing several different icons with team members, family and friends, we settled on the Crescent Moon icon, something solid or blank depending on whether dark mode is on or off. We think it made the most sense and is easy to understand, no matter where you are or what language you speak.
Next Steps
We have now implemented a dark mode on Pocket-Lint, we plan to continue to monitor how it is being used by readers and whether our design choices cause any issues or questions when available to a much wider audience.
Dark mode