##Dark mode forever!

On the surface, dark mode features might not appear to be the most business critical of ventures to designate resources to. When launching a product, the ability to give users or clients the option to change a theme might seem insignificant. After implementing my own dark mode feature at FareHarbor, I feel like I have some opinions developed from experience that might dispel some of the premises held by those who deem dark mode projects not to be worthwhile.

When researching Google Material Design and Nielsen Norman Group were two of the primary resources I referenced. one of the first questions I tried to answer was whether there were any substantial performance increases for users reading comprehension when viewing dark themed websites?

• https://www.nngroup.com/articles/dark-mode/ • https://m2.material.io/design/color/dark-theme.html

From my understanding the answer is no. Generally (for non vision impaired users) there does not seem to be a substantial gain in reading performance to be had from viewing a site in a dark theme as compared to a light theme. What's more if done incorrectly, dark mode definitely has the potential to hamper users reading performance and a sites accessibility.

Let's talk about the technical advantages of incorporating a dark mode feature:

Using CSS vars throughout your codebase instead of static variables can help you in the long run by future proofing your styles. Relying on fallbacks and css vars for every text element or surface color in your site will allow you to rapidly incorporate globally consistent style changes as your design system changes. Change is inevitable for any website or application. Say for example after an audit of your site you have discovered that the text contrast on all body text is not high enough. Your site is inaccessible, users are falling off as a result. By using variables in your css you can quickly fix this from one place. Alternatively having various text colors set statically in different places will require your developers to change each one individually (think like 0(1) vs 0(n)). Rolling out a dark mode feature will likely require variables, and if your codebase isn't already using them for it's css this will drastically improve the developer experience of your site/app which in my opinion merits the effort. If you are kicking off a dark mode project yourself and don't know where to begin with using css vars I highly recommend you research Brad Frost and his work on design tokens when building up a dark mode specific feature.

E-commerce platforms should be brand agnostic, if you are designing for one - you need a dark theme. This point is pretty niche but if you are by any chance a developer or a designer for a company that provides a platform for other companies to buy or sell things on, you owe it to your users to support dark themed branding. I'd actually extend this beyond the e-commerce ecosystem into social media, dating, and publishing platforms as well.

Imagine you are a small business owner and you have just spent countless time and money on researching and building your brands identity. You find a platform to sell your product or service on that fits your needs to a T except it only supports lighter images. Now you have to pay a graphic designer to invert logos, retake/edit product photos and delay going live or decide to sacrifice the visual consistency of your store. That sucks.

Reduced eye strain and visual delight, how much are they worth Depending on your product and where it's used having a bright interface can lead to some discomfort. Say for example you are a POS(place of service lol) application used in resturaunts, a night time bar that opens at 6pm and is dimly lit. Your waitstaff is going to have to deal with the discomforting flashlight effect experienced when an interface has a high contrast with the environment it's used in. Having an interface that has less contrast with low light settings will make it easier for customers and employees to use your software.

Guidelines: where to look?

If you've read this far, thanks - you have a better attention span than i do. When I started looking for guidelines I looked at these resources:

Google material design: https://m2.material.io/design/color/dark-theme.html

NordHealth design: https://nordhealth.design/tokens/?theme=nord-dark#color ^Looked at for naming inspo, did not steal IP I promise!

IBM Carbon: https://carbondesignsystem.com/guidelines/themes/overview/

Beautiful dark mode interfaces: Netlify, Github, Youtube

Some reminders to consider when building a dark mode feature for designers and developers:

• Document your decisions for dark themed colors, their contrast level, where they are used in your interface.

• Use HSL values in your variables. Don't use transparent colors as base variables in your codebase. You can always do color: HSLA(var(--hsl-variable)); if you want transparency .

• If you are using css vars in a sass codebase, just know the two sometimes don't play nice with each other. Look into sass interpolation.

• When designing in figma, use a contrast checker plugin for all text colors. Document that level next to the color var in a chart. A minimum contrast of 4:5:1 is required for large text.

• Only use the variables you need in your codebase, you can design a ton but any variable you add is more space in memory taken up by something not immediately being used.

• For dark mode toggles, make sure to use a transition animation on the html to smooth the transition from dark to light.

• You might not need javascript to enable dark mode, just a thought.

> [data-theme="dark"] { > --color-tokens: hsl() > }

> @media (prefers-color-scheme: dark) {

Below are some screenshots of the interface I designed and helped build being used by a client.