Web designers are gradually adding multiple contrast methods to their projects. This gives users the ability to view a website in their preferred color scheme.
In practice, this results in providing dark and light modes. But it is only for cosmetic purposes. Contrast plays a huge role in accessibility. For example, some visually impaired users will find a dark color scheme easier to read.
Designers are also taking into account user system preferences. Some websites will now detect whether a user’s operating system is set to use a dark or light color scheme – and then serve the appropriate styles.
Still, it’s never a good idea force users into a specific 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 drastic changes. The menu uses HTML radio buttons styled into a toggle switch. It is simple, attractive, and functional.
See the Light / Dark / Black Pen Theme by Håvard Brynjulfsen
Easy Dark Mode with SASS by Kaio Almeida
A simple checkbox enables to toggle this contrast mode. From there, JavaScript is used to a data-theme attribute to the page’s HTML tag. SASS then looks for the value of the attribute and styles the content accordingly.
Check out Kaio Almeida’s Easy Pen Dark Mode with SASS
Light or Dark Mode with Alex
Why not have fun with changing the concept of contrast methods? This snippet contains SVG images and animations to create a unique day to night toggle. Note that while it conveys the message visually, it could benefit from some accessibility improvements before going into a production environment.
Check out the Light Pen / Dark Mode by Alex
CSS Theme Translator by Michelle Barker
Many items in this collection use JavaScript – but CSS can handle 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.
Check out the CSS Pen Theme Switcher by Michelle Barker
Toggle GitHub Dark Mode by Chintu Yadav Sara
While this oversized toggle keeps its white background throughout, it changes icons along with the page’s contrast mode. Also, notice that the different background shapes turn into bright neon colors when in dark mode. This adds both fun and context to the presentation.
Check out the Dark Mode Pen GitHub Toggle by Chintu Yadav Sara
Permanent Dark Mode by Brian Haferkamp
If you’re looking for simplicity, this color mode button will do the job. There are no fancy icons (although you can certainly add them) or wild animations. All it takes is one click and some smooth CSS transitions. Additionally, there is a handy bit of JavaScript that will save the user’s selection in local storage.
Check out Brian Haferkamp’s Permanent Dark Mode Pen
Basic Vue Reactivity by CodePen
As we’re seeing more and more JavaScript-powered UI these days, it’s only fitting that we have such an example. Here, the Vue component allows users to change contrast modes via a simple checkbox. This one has plenty of opportunity to dress up via CSS.
See the Basic Vue Reactivity Pen with CodePen
Dark Mode at Airen
For projects that could use a little more creativity, this swinging light bulb switch should provide plenty of inspiration. To keep things accessible, the bulb image is placed inside HTML button element. Animation is provided via CSS. It’s a great way to spice up a portfolio or blog.
Check out Airen’s Dark Mode Pen
Go to Dark Mode (Or Light – It’s Your Choice)
Adding color contrast methods to your website makes sense in some cases. It allows designers to offer their aesthetic preference to users while making content more accessible.
As the clips above show, there is no shortage of ways to implement this feature. CSS allows for almost limitless styling options, while JavaScript can provide important functionality when needed.
We hope this roundup will serve as an example of what is possible with color contrast methods. And if you want to see more clips, check out our CodePen collection!
