How To Build A Website With A Dark Mode Option

Web-based native dark mode? Say what..?

Today, we will delve into the popular world of dark mode in web design. Modern operating systems, whether it’s Windows, Mac, or Linux, are offering users the choice to select a light or dark mode through their system preferences.

From a user experience standpoint, if a user enables on their operating system, their native applications, such as finder or file explorer, display a dark color scheme. However, if they browse your website and it is brightly lit with a light color scheme, this abrupt transition can be harsh on the eyes.

To combat this, we at Saigon Digital propose the integration of a native color scheme into your website, enhancing the overall user experience.

So, how does this function on websites?

Numerous websites already offer users an option to toggle between light and dark mode. Twitter, for instance, was among the first to provide this feature to its users.

A common implementation of the mode toggle is to establish a toggle on the website. Depending on whether a dark-mode class exists on the document, the styles in the stylesheet alter accordingly.

To make this function properly, a toggle for users to switch between modes, Javascript to recognize the user’s choice upon toggle change, a cookie or localStorage setting to persist through page reloads, and a check for user preference upon page change or reload are required.

Is there a simpler way to achieve this?

Indeed, operating systems apps do this automatically today. Chrome, Firefox, and most native applications on these operating systems offer a well-themed Dark Mode.

The Automatic Dark Mode Revolution

The CSS media query is introduced to detect a user’s color scheme preference.

body {
     color: #272727;
}
.dark-mode body {
     background-color: #272727;
     color: #ffffff;
}

If we were to manually create a CSS class we would need a few more things to make it work properly:

1. Create some kind of toggle that the user would be able to switch between two modes (dark and light).
2. Add in some javascript that would acknowledge the users choice upon change of the toggle.
3. Keep a cookie or localStorage setting to persists through page reloads.
4. Then when the user changes to a new page, or reloads the current page, we need a check to see what their toggle preference was.

What if we could make that a little more simple.. ?

Surely, there is something easier than all of this? Well…

Operating systems apps automatically do this these days. Chrome has a dark mode built in, same with Firefox. Most of the Native applications running on these operating systems have a nicely themed Dark Mode now. Even Windows does.

Meet automatic mode web design

Introducing the CSS media query that will detect a users colour scheme preference.

“@media (prefers-color-scheme: dark){…}”

body {
    color: #272727;
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: #272727;
        color: #ffffff;
    }
}

It’s great to see that CSS is really is moving forward with new selectors and introducing new features in to the CSS specification. I know personally I would appreciate a “native dark mode” option on websites for the end user.

A “native dark mode” option on websites is something many users, including us at Saigon Digital, greatly appreciate. With Saigon Digital’s expert web design services in Ho Chi Minh City, embracing these user-friendly features has never been easier.

Contact us and learn more about Saigon Digital’s services including Jamstack, digital marketing, SEO, UI/UX design, and more.