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.<\/p>\n
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<\/a> will find a dark color scheme easier to read.<\/p>\n 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 \u2013 then serve up the appropriate styles.<\/p>\n Still, it’s never a good idea to force<\/em> 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.<\/p>\n Here are eight unique CSS and JavaScript code snippets for switching between dark and light modes.<\/p>\n 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<\/a>. It’s simple, attractive, and functional.<\/p>\n See the Pen Light \/ Dark \/ Black Theme<\/a> by H\u00e5vard Brynjulfsen<\/p>\n A simple checkbox powers this contrast mode toggle. From there, JavaScript is used to add a See the Pen Easy Dark Mode with SASS<\/a> by Kaio Almeida<\/p>\n 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.<\/p>\n See the Pen Light \/ Dark Mode<\/a> by \u00c1lex<\/p>\n Several snippets in this collection use JavaScript \u2013 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.<\/p>\n See the Pen CSS Theme Switcher<\/a> by Michelle Barker<\/p>\n 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<\/a> while in dark mode. This adds both fun and context to the presentation.<\/p>\n See the Pen GitHub Dark Mode Toggle<\/a> by Chintu Yadav Sara<\/p>\n 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.<\/p>\n See the Pen Persistent Dark Mode<\/a> by Brian Haferkamp<\/p>\n 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<\/a> via CSS.<\/p>\n See the Pen Basic Vue Reactivity<\/a> by CodePen<\/p>\n 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 See the Pen Dark Mode<\/a> by Airen<\/p>\n 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.<\/p>\n 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.<\/p>\n 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<\/a>!<\/p>\n The post 8 CSS & JavaScript Snippets for Switching between Dark or Light Modes<\/a> appeared first on Speckyboy Design Magazine<\/a>.<\/p>\n Source: Specky Boy<\/p>\nLight, Dark or Black Theme by H\u00e5vard Brynjulfsen<\/small><\/h2>\n
Easy Dark Mode with SASS by Kaio Almeida<\/small><\/h2>\n
data-theme<\/code> attribute to the page’s HTML tag. SASS then looks for the attribute’s value and styles the content accordingly.<\/p>\nLight or Dark Mode by \u00c1lex<\/small><\/h2>\n
CSS Theme Switcher by Michelle Barker<\/small><\/h2>\n
GitHub Dark Mode Toggle by Chintu Yadav Sara<\/small><\/h2>\n
Persistent Dark Mode by Brian Haferkamp<\/small><\/h2>\n
Basic Vue Reactivity by CodePen<\/small><\/h2>\n
Dark Mode by Airen<\/small><\/h2>\n
button<\/code> element. Animation is provided through CSS. It’s a great way to spice up a portfolio or blog.<\/p>\nCome to the Dark Mode (Or Light – It’s Your Choice)<\/h2>\n