Style Dark Mode in HTML
Introduction
The dark mode nowadays has gained a lot of acceptance. While it can also be characterized as "night mode" or "dark theme", it is a graphic user interface (GUI) that comprises light characters and icons against a black background. It serves as an aesthetically seen replacement for the standard white mode, providing reduced eye strain in a dimly lit setting and giving a smooth, modern appearance to websites and mobile applications.
This is not only because dark mode looks good but also because it helps save energy, especially for smartphones that use OLED or AMOLED screens, which consume less power than light modes. The fact that the application of dark mode has become increasingly essential to both designers and developers is a result of consumer desire to work with a captivating and responsive interface.
Uses of Dark Mode
The dark mode in HTML may well be meant to maximize users' comfort with visualization, especially in low-light areas.
- Diminished Eye Strain: The dark mode, which is designed to display less blue light from the screen, is a great way to reduce eye strain and improve comfort at night or in poorly lit places.
- Better Readability: From the side of traditional black text on a white background of something, others think white writing over a dark background is more legible than reading for longer periods.
- Energy Efficiency: OLED and AMOLED displays can be roughly two times more power-efficient in the dark mode than in the light mode, which can greatly increase the battery's lifetime.
- Accessibility: The dark mode improves the readability of material by minimizing glare and enhancing font legibility, which is also good for those with vision problems.
- Aesthetic Appeal: Switching on Dark Mode in a website or application could make the appearance more stylish, modern, and contemporary and increase user experience.
- Customization: Providing the option of dark mode enables users to adjust their experience according to their personal preferences and needs, making for a more immersive graphic-audio environment.
- Compliance: There is a scenario when we need to provide a dark mode so that we can comply with accessibility guidelines and laws that say that on web pages, there should be a provision for offering other colour scheme options to visitors who have visual defects.
Different Ways to Style Dark Mode in HTML
There are some small but effective methods you can apply to HTML paragraphs without using any code to turn them into dark modes.
- Using CSS Variables: Employ JavaScript to define CSS variables for colors and switch them around between the bright and the dark modes for these variables. Thus, you can now adjust the paragraphs' color schemes by using those variables.
- Using Classes: In your CSS, provide a separate class for the styles in the bright and dark modes. Now, using these classes with Javascript toggles, you will be able to turn paragraphs on or off according to the light or dark mode.
- Using Media Queries: The solution is to supply CSS media with the query to tell whether the user plans for a bright or dark colour scheme, and then you can change the paragraph styles according to that preference.
- Using Browser Extensions: A visitor can add browser extensions to his browser that allow him toggling the dark mode for all websites. Typically, these extensions replace the CCS of the webpage to change the colour of graphics, including paragraphs.
- Using CSS Frameworks: The black theme is accessible in CSS frameworks, such as Bootstrap. Implementing dark mode for your paragraphs can be made quickly using these frameworks if you do not create unique CSS.
Common Steps to Create Dark Mode Page in HTML
1. HTML Document: Create an HTML file (e.g., index.html) and add the following content:
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dark Mode Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut consequat libero. Donec vestibulum urna sed felis commodo, in rutrum turpis tempor.</p> </div> <button id="toggleButton">Toggle Dark Mode</button> <script src="script.js"></script> </body> </html>
2. CSS Styling: Create a CSS file (e.g., styles.css) and define the styles for both light and dark modes:
body {
font-family: Arial, sans-serif;
background-color: #ffffff; /* Light mode background color */
color: #000000; /* Light mode text color */
}
.dark-mode {
background-color: #222222; /* Dark mode background color */
color: #ffffff; /* Dark mode text color */
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
3. JavaScript Functionality: Create a JavaScript file (e.g., script.js) and add functionality to toggle the dark mode class on the body element:
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff; /* Light mode background color */
color: #000000; /* Light mode text color */
transition: background-color 0.5s, color 0.5s; /* Smooth transition for color change */
}
body.dark-mode {
background-color: #222222; /* Dark mode background color */
color: #ffffff; /* Dark mode text color */
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>click to switch to dark mode.</p>
</div>
<button id="toggleButton" onclick="toggleDarkMode()">Toggle Dark Mode</button>
<script>
function toggleDarkMode() {
var body = document.body;
body.classList.toggle("dark-mode");
}
</script>
</body>
</html>
Output:
Explanation:
This code generates a basic website that contains a paragraph of text enclosed in a container. Below is an explanation of each section of the code:
1. HTML Organisation:
- The webpage's fundamental structure is defined by the <html>, <head>, and <body> tags.
- A paragraph (<p>) element with some placeholder content is contained in a <div> element with the class container within the <body> tag.
2.CSS Styles:
- The webpage's CSS styles are included in the embedded.
- The body selector sets the default styles for the body element, such as the font family, background colour (light mode), and text colour (light mode).
- The physique.dark-mode selector specifies styling for the body element when the dark-mode class is applied, altering the background color to a dark mode color scheme and the text color to white.
3. The Dark Mode Button:
- A button () element with the ID toggleButton and the text "Toggle Dark Mode" is presented at the bottom of the paragraph.
- The JavaScript method (toggleDarkMode) is invoked when a button is clicked, and it is set to the onclick property.
4. JavaScript Operation:
- toggleDarkMode() is a javascript function that is included between <script> tags.
- When the button is clicked, this function adds the 'dark-mode' class to the 'body' element and changes the whole page's tone from light to dark back and forward.
- Use the classList on the body element and switch the value on. toggle() function
Conclusion
Finally, the dark theme interface can be achieved by implementing it using CSS and JavaScript. The dark mode option gives your site visitors a better experience. Providing dark shade variables could help some individuals view things more easily and reduce eye strain, particularly in poorly lit locations.
The scripting code uses JavaScript for class toggling and CSS to define the styling for each mode. This means that you can switch between bright and dark modes with just a click of a button. This technology enables a user to easily switch between modes easily, thereby providing good visuals and an intuitive experience.
You can also associate dark mode detection with the user's preferences and those included in the system settings, include transitions, and use CSS variables for colour schemes to further customize the dark mode implementation.
To sum up, dark mode is an appropriate feature that is very handy in enhancing the usability and accessibility of your website, making it warm and cozy in a wide range of viewing conditions.