There’s such interesting research into having both dark and light modes. For how it can benefit our productivity. And also how we can use it to make the internet accessible to more people.
Accessibility
Personally I’ve preferred dark mode for the last 10 years. There was something about that Tumblr dashboard that made it much nicer on the mind than any other website. I have dark mode activated whenever I can.
Setting preference and customization could be in the foundation for the things we build. It takes that which is an accessibility tool for some, and makes it a service for all your visitors.
Adding alt text for screen readers, high-contrast and colorblindness options, is spoken of differently within and outside of handicapped communities. But all of us could have something happen, which alters the way we access apps and websites.
It sounds selfish, but may it has to be for more of us to consider this; we can do something for others that is also for our selves.
If you’re as interested in learning more about this, you can find additional information from experts at the the A11Y Project. Or read the HTML: A good basis for accessibility by Mozilla.
Indentities in Dark and Light
There’s something I read about light themes effects on functionality, and that they are often considered better for visual-acuity tasks.
But bright screens specifically are said to be disruptive to sleep. Dark themes, or different lighting could counter this. However some people would advise against using any screen before bedtime all together.
Dark themes are considered more accessible, and some of its other listed benefits are that it can improve battery time.
Yet, as designers will tell you, light text on a dark background is more intensive to read, especially for a longer period of time.
The arguments people could make for either of these themes are compelling. And for some brands either of the themes would make more sense, based on their brand identity. I think it could be more interesting to see a dark and light theme representation of a brand.
Some bigger companies have started going into the direction of incorperating the customization, or theme toggles, in their designs. Twitter famously has had a dark theme for a long time, but now has dark, light and high contrast.
I think this is a space with a lot of room for experimentation. There are technologies that could be created to facilitate this experimentation more. I think spaces such as Tumblr, WordPress and similar platforms, have the ability to play a part in this.
Individual Solutions
One of the ways some people have adapted to this by using a light theme for work hours, and night theme when they’re winding down in the evening.
Other custom solutions are in some browsers, such as Chrome, Opera and Firefox, you can switch to a dark mode. Google has implemented a darkmode option for tools such as Gmail. And Windows 10 and Office now have a dark option.
This is great, but I wonder if there’s room for a more cohesive solution. There’s the prefer-dark-theme selector which works in some browsers, and some mobile devices allow for a global switch which will select the selected theme when available.
This will take a lot of consensus, and probably will require a lot more experimentation to be done, regarding contrast and other implications to accessibility.
Dark and Light Theme in Material Design
One of the major themes they highlight, is the use of color, for contrast, brand identity, and more. This is something I’m still considering how to incorperate this on my own website.
It required me to rethink my branding, as from the foundation it’s meant to be mostly black, white and greyscale colors, to give individual works stand out more. How I will proceed is on the to-do list for now.
WP Night Mode Plugin
When I started experimentation with dark and light themes for this website, I used WP Night Mode. It’s a simple plugin to toggle between dark and light modes in WordPress. It’s easy to use, and does exactly as imagined; add the toggle and style the mode.
The plugin options are very minimal, but with a little CSS, additional tweaks can easily be made. Use the following selector example to try it yourself:
body.wp-night-mode-on #sidebar-bg:after {background:#1c1c1c;}
Another thing to remember when using this plugin specifically, is that a lot of CSS is switched at the same time. And by making manual tweaks elements have a redundant CSS all being applied.
For this reason I’m curious to try other solutions. I’m looking at Dark Mode with CSS, but because of time constraints, this will be a future project.
LLD Website Concept
The scope and concept of lauraljungqvist.se
LLD Website Design
Design of lauraljungqvist.se
Dark Mode by Default
Currently I am contemplating, making the dark the default, in the next major design update. And more monochrome testing is on the planning. There’s so much to do, so little time.
If you have solutions that worked for you, share them. I’m curious to learn more about the different ways to accomplish theme toggles.
And if you have any other resources, related to dark and light themes, that you think would be interesting, please post them in the comments below.
Resources
This checklist uses the The Web Content Accessibility Guidelines (WCAG) as a reference point.
Material is a design system that helps teams build digital experiences.
Dark Mode with CSS - CSS Tricks
Remember you can reverse it and go dark by default but change to a light theme if a user specifically wants it.
Wordpress plugin which enables users to switch between Night and Day Mode.
