Your website visitors can switch to an eye-friendly and resource-saving design whenever they want by enabling dark mode in CSS. There are several UX patterns that you can use to add a dark theme to your site. Know more about the favorable UX patterns by contacting our UI/UX design company in San Jose.
This article will give you insights on how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off.
1. Create the File Structure
This first step is to create a folder and place three empty text files inside of it: one with .html, one with .css, and one with a .js extension. Following this, you also need to create an images folder for the image(s) you want to display on the page.
Some of the “dark mode in CSS” demo also makes use of jQuery. The usual practice is to add the script to the HTML file right from the Cloudflare CDN so that it will always be up-to-date. But you can also download the jQuery library and add it as a local .js file.
Getting in touch with our website development company in San Jose will be an ideal decision. We are only a call away.
2. Mark Up the HTML
The next step requires adding a dark mode switch to the top of the page in the HTML. Following this, it is required to create a <h1> tag for the title and a semantic <article> tag for the content of the page. Finally, adding the two <script> tags right before the closing </body> tag is to be performed.
One thing to pay attention to is that you add the jQuery library before the custom script so that it can use its functionalities. The style.css file goes into the <head> section of the page.
Get professional and expert help for web application testing in San Jose with the help of our team.
3. Create the CSS for the Light Mode
First, it is essential to create the CSS for the light mode, as this is the default state of the page. The CSS usually makes use of a column-based flexbox layout that enables it to easily position elements on the page, specifically the .switch class that handles the wrapper of the dark mode toggle and the <img> elements.
The display: flex; rule added to the <body> tag will make it possible to use the align-self: flex-end; rule on the dark mode switch. The align-self CSS property aligns individual flex items along the cross axis (which is the left-to-right axis when flex-direction is set to column).
Thereby, the switch is automatically positioned at the top right corner of the flex container, at all viewport sizes.
Similarly, the display: flex; and flex-direction: column; rules when added to the <article> tag will make it possible to use the align-self: center; rule on all the images inside the article.
Thereby, it makes it easy for you to center all the images without having to add extra elements to the HTML, just for the sake of positioning.
Were you in search of the ideal UI/UX design company in California that will meet your web development needs? We are only a call away.
4. Add the Switch Functionality with jQuery
The script.js file allows adding the switch functionality to the toggle. So, whenever the user clicks the toggle, the dark mode gets applied, and the label on the switch changes to “ON”. And, if the user by any chance clicks the toggle when the page is in dark mode, the light mode gets applied and the label changes to “OFF”.
Get in touch with us for custom web development services in San Jose CA.
5. Add the CSS for the Dark Mode
The last thing to do is to define some styles for the .dark class added to the HTML by using the jQuery script when dark mode is switched on. Besides the .dark class, also apply the dark mode theme to all of its direct and indirect children by using the .dark * universal CSS selector.
The CSS belonging to the .dark class always goes to the end of the style.css file because of the cascading nature of CSS (= Cascading Style Sheets). Thereby, the cascade can override the colors on the entire page without bumping into specificity or other problems.
If you want to build a more complex page you can create a separate dark.css file for the dark mode styles. You will have to pay attention that you always add the specific dark.css after the generic style.css file in the <head> section of the HTML so that the cascade can properly work.
Unsure about how to go about with the dark theme application process? All you need to do is to get in touch with us our web application testing agency in California
Wrapping Up
Dark mode in CSS is not only a nice addition to your site but also improves user experience and accessibility. A dark mode toggle is especially useful on sites that publish long-form content pieces or require users to focus on the screen for a longer time.
If you are stuck with choosing a dark mode color scheme and need some help, our web application development company in San Jose will guide you to finding the perfect color palette, too.