Technology News

Auto Dark Theme

There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by direct choice or a system-level preference. If your website doesn’t have a dark mode, well, then, it doesn’t have a dark mode.

Chrome is testing changing that, and forcing your website to have a dark mode if a user has indicated they prefer them at the system level. André Cipriani Bandarra:

With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the operating system. Users can opt-out of dark themes by either disabling the option on the OS level or in a specific setting in Chrome.

A little scary, I think. But hey let’s give it a test to see. They’ve built in the ability to test this right into Chrome DevTools.

Just looking at my own site quick…

Emulated dark theme on left, normal on right. ????

The homepage looks like crap, as it didn’t flip out the explicit white background color. Not sure why, as it does on article pages where it looks much better:

The link blue feels too dark to me, but otherwise it kinda makes me want to build a real dark theme.

The WordPress admin famously has no dark mode, so here’s a look at that:

Kinda good?

I have mixed feelings about it. On one hand, users should have control over what they want to see in their browsers on their computers. Nobody is claiming accessibility features like high contrast, invert colors, or reduced motion modes shouldn’t exist. They directly affect website rendering. This could be considered an accessibility feature. On the other hand, this can cause accessibility problems (case in point: the contrast issues visible right here in that first screenshot).

This is just an Origin Trial for now, so I imagine there is plenty of time before this ships and for problems to get ironed out. But the web is huge so I imagine the edge cases here are absolutely bonkers and this is going to be very hard to perfect. It’s not even clear if this is just a Chrome-on-Android thing or if it will spread wider than that. It’s also not clear that if it leaves your site alone if you have a hand-crafted dark mode, or if it still messes with the design. Me, I’d probably use their mechanism for opt-ing out until I could get the details right.

Build Great Apps: Designer and Developer Collaboration Just Got Easier
Top 5 Best Practices of Gaming UX Design [Must-follow in 2022]

Related Articles

Biggest Challenges Of Freelance Graphic Designers

Biggest Challenges Of Freelance Graphic Designers
At first glance, the profession of a graphic designer seems to be the most attractive for creative people. However, the freelancer’s path brings specific challenges you must be prepared for.…

How to Audit Brand Mentions for Modern SEO

How to Audit Brand Mentions for Modern SEO
Brand mentions are to AI search what backlinks are to traditional SEO. Links tell Google who to trust; mentions tell AI systems who you are. Auditing your brand’s mentions is how…

The Beginner’s Guide to Learning Sass

the-beginners-guide-to-learning-sass
Writing a lot of CSS can be overwhelming that is why it is beneficial to learn Sass and LESS. They can make any web developer and designer’s life much easier. For…

Build a Code Snippet Web App with Next.js and FaunaDB

Exploring the Potential of the Metaverse: A New World Awaits
While programming, developers encounter problems requiring code reuse, leading to repetitive programming that can be time-wasting and reduces productivity. This gives rise to the need for reusable source code called…