These days, it’s common practice for web designers to include many different levels of contrast in their final products. That way, visitors may see a website in the colors of their choice.
As a practical matter, this usually means choosing between dark and bright settings. Nonetheless, the aim is not only aesthetic. The level of contrast between the background and foreground is crucial for readability. For instance, a dark color scheme may be preferred by those users who have trouble seeing the screen.
Designers are also considering the user’s preferred system configuration. Some websites may now automatically determine if the user’s computer is configured to a dark or light theme and provide the appropriate design options accordingly.
However, requiring one specific contrast setting from people is never a wise idea. This is why a switch between them must be made available. And on that capability, we will now concentrate.
Here are eight separate bits of code, written in both CSS and JavaScript, that allow you to toggle between dark and light themes.
Brynjulfsen’s “Light, Dark, or Black” Theme
This elegant control panel, which has three separate colour schemes, is a great place to make such adjustments. There is a seamless transition between modes, making transitions less abrupt. Toggle-styled HTML radio buttons are used in the menu. It does its purpose with ease and style.
See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen (@havardob) on CodePen.
Easy Dark Mode with SASS by Kaio Almeida
Changing the contrast level is as easy as checking a box. The next step is for JavaScript to insert a data-theme attribute into the HTML element for the page. The value of the property is then used by SASS to determine how to format the document’s text.
See the Pen Easy Dark Mode with SASS by Kaio Almeida (@KaioRocha) on CodePen.
Light or Dark Mode by Álex
Why not play around with the idea of contrasting backgrounds? This code sample uses animated SVG pictures to switch between day and night in a novel fashion. It’s important to keep in mind that even if the information is communicated visually, it may need some accessibility improvements before being used in a real-world setting.
See the Pen Light / Dark Mode by Álex (@lerida) on CodePen.
CSS Theme Switcher by Michelle Barker
The usage of JavaScript in some of these samples is unnecessary as CSS can do all that’s being asked of it and more. This demo uses an accessible HTML form to power the mode toggle, so it’s not just a pretty face. It’s a win-win scenario when you develop features that everyone can take advantage of.
See the Pen CSS Theme Switcher by Michelle Barker (@michellebarker) on CodePen.
GitHub Dark Mode Toggle by Chintu Yadav Sara
This large toggle retains its white backdrop throughout, but its icons adapt to the page’s contrast setting. While in dark mode, you may have noticed that the different backdrop forms now include dazzling neon colouring. This enhances the presentation in a humorous and informative way.
See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara (@chintuyadav) on CodePen.
Persistent Dark Mode by Brian Haferkamp
This colour mode button can do the trick if you want something straightforward. There is no crazy motion or cutesy symbols (but you may always add such). It takes just one click and some nice CSS transitions. Moreover, there is a useful snippet of JavaScript that will remember the user’s setting and load it later.
See the Pen Persistent Dark Mode by Brian Haferkamp (@brianhaferkamp) on CodePen.
Basic Vue Reactivity by CodePen
It’s appropriate to have this kind of example, since JavaScript is increasingly powering user interfaces. A Vue component in this case provides a toggle for the contrast setting. There’s a lot of room for customization with CSS on this one.
See the Pen Basic Vue Reactivity by CodePen (@codepen) on CodePen.
By Airen, in Black Mode
This dangling light bulb switch is sure to spark plenty of imagination for any undertakings that might use some more flair. The light bulb icon is housed inside an HTML button element for easy navigation. All the moving parts are handled by CSS. It’s a fantastic addition to any resume or website.
See the Pen Dark Mode by Airen (@airen) on CodePen.
Activate the Nighttime Setting Darkness (or brightness; your call)
There are a number of cases when it might make sense to include colour contrast modes on your website. To make material more accessible, it enables designers to provide consumers a choice of visual styles.
There is a plethora of options for implementing this functionality, as seen by the aforementioned examples. As far as style goes, CSS opens you almost infinite possibilities, while JavaScript may fill in crucial gaps.
Our intention is that this compilation will inspire you to experiment with different colour contrast settings. And if you want to see many more examples, go over to our CodePen collection!
10 TOP PROGRAMS FOR REMOVING MINIFICATION FROM CSS FOR CLEANER LAYOUT
MORE THAN 50 FREE HTML5 AND CSS3 LOGIN FORMS
Image by user15285612 on Freepik