Web designers are increasingly adding multiple contrast modes to their projects. This provides users with the ability to view a website in their preferred color scheme.
In practice, this tends to result in the offering of both dark and light modes. But it’s not just for cosmetic purposes. Contrast plays a huge role in accessibility. For instance, some users with visual impairment will find a dark color scheme easier to read.
Designers are also taking a user’s system preferences into account. Some websites will now detect whether a user’s operating system is set to use a dark or light color scheme – then serve up the appropriate styles.
Still, it’s never a good idea to force users into a particular contrast mode. That’s why it’s important to provide a way to toggle between them. And that functionality is our focus for today.
Here are eight unique CSS and JavaScript code snippets for switching between dark and light modes.
Light, Dark or Black Theme by Håvard Brynjulfsen
This settings panel provides three distinct color modes and is beautifully designed. The transition between modes is smooth, allowing for less-jarring changes. The menu uses HTML radio buttons that have been styled into a toggle switch. It’s simple, attractive, and functional.
See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen
Easy Dark Mode with SASS by Kaio Almeida
A simple checkbox powers this contrast mode toggle. From there, JavaScript is used to add a data-theme attribute to the page’s HTML tag. SASS then looks for the attribute’s value and styles the content accordingly.
See the Pen Easy Dark Mode with SASS by Kaio Almeida
Light or Dark Mode by Álex
Why not have some fun with the concept of switching contrast modes? This snippet features SVG images and animation to create a unique day-to-night toggle. Note that while it visually conveys the message, it may benefit from some accessibility enhancements before being put into a production environment.
See the Pen Light / Dark Mode by Álex
CSS Theme Switcher by Michelle Barker
Several snippets in this collection use JavaScript – but CSS is capable of handling the task alone. This example not only looks good but also implements an accessible HTML form to power the mode switch. When you create functionality that everyone can use, it’s a win-win situation.
See the Pen CSS Theme Switcher by Michelle Barker
GitHub Dark Mode Toggle by Chintu Yadav Sara
While this oversized toggle maintains its white background throughout, it does change icons along with the page’s contrast mode. Also, note that the various background shapes turn into bright neon colors while in dark mode. This adds both fun and context to the presentation.
See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara
Persistent Dark Mode by Brian Haferkamp
If you’re looking for simplicity, this color mode button will do the job. No fancy icons (although you can certainly add them in) or wild animation. Just a single click and some smooth CSS transitions. In addition, there’s a handy bit of JavaScript that will save the user’s preference in local storage.
See the Pen Persistent Dark Mode by Brian Haferkamp
Basic Vue Reactivity by CodePen
As we’re seeing more JavaScript-driven UIs these days, it’s only fitting that we have such an example. Here, a Vue component lets users switch contrast modes via a simple checkbox. This one has plenty of potential for dressing up via CSS.
See the Pen Basic Vue Reactivity by CodePen
Dark Mode by Airen
For projects that could use a bit more creativity, this swinging-lightbulb toggle should provide plenty of inspiration. To keep things accessible, the bulb image is placed inside an HTML button element. Animation is provided through CSS. It’s a great way to spice up a portfolio or blog.
See the Pen Dark Mode by Airen
Come to the Dark Mode (Or Light – It’s Your Choice)
Adding color contrast modes to your website makes sense in several scenarios. It allows designers to offer users their choice of aesthetic while also making content more accessible.
As the snippets above demonstrate, there is no shortage of ways to implement this feature. CSS allows for near-limitless styling options, while JavaScript can provide key functionality where needed.
We hope this roundup serves as an example of what is possible when it comes to color contrast modes. And if you’d like to see even more snippets, check out our CodePen collection!
