Dark/light mode toggle in CSS with Source Code
Hi Guys!
In This Article I will Show you How to Create dark/light mode toggle in CSS. (Including source code).
Table of Contents
- Use of Dark/light mode in Website
- How to Create dark/light mode toggle in CSS
- Source Code
dark/light mode is a colour scheme When change website from light to dark theme it increases the Readability and gives good experience to Website's Users.
How to Create Dark/light mode toggle in CSS
To Create dark/light mode toggle in CSS follow these Steps.
- First of all Open any Code Editor (Note Pad ++ , VS Code etc)
- Index.html (HTML File)
- style.css (CSS3 File)
HTML CODE:
Paste The following Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Pure CSS Light-Dark Mode Trick</title>
</head>
<body>
<input type="checkbox" name="">
<section>
<h2>Pure CSS Dark / Light Mode Tricks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id consectetur purus ut faucibus. Nunc congue nisi vitae suscipit tellus mauris a. Malesuada fames ac turpis egestas. In ornare quam viverra orci sagittis eu. Est sit amet facilisis magna etiam tempor orci eu. Amet facilisis magna etiam tempor orci eu lobortis elementum. Aenean sed adipiscing diam donec adipiscing tristique risus. Congue quisque egestas diam in arcu. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Erat velit scelerisque in dictum. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.</p>
<img src="https://fsa.zobj.net/crop.php?r=A2tikG9WGMmF-HcugMDBb1AE2ju-XLe7NPfr3GDH-4OiMe6DvLQ-s08ZHoUUhyAzWolYCqW35sYmpFXfACuje-SRjfS45rRwxlinGkJ1Zuuv7vWGlfFDKOkAHAEHmhJPffP7QhtPFp5bdncv" alt="purple-forest">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est velit egestas dui id ornare arcu odio ut. Cras pulvinar mattis nunc sed blandit libero. Vitae et leo duis ut diam quam nulla porttitor. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Mauris pellentesque pulvinar pellentesque habitant morbi tristique. Praesent semper feugiat nibh sed. Est ante in nibh mauris cursus mattis. Purus sit amet volutpat consequat mauris nunc congue nisi. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a erat. Hac habitasse platea dictumst quisque sagittis purus sit amet. Sociis natoque penatibus et magnis. Nunc id cursus metus aliquam eleifend mi. Non curabitur gravida arcu ac tortor. Phasellus vestibulum lorem sed risus ultricies. Molestie ac feugiat sed lectus vestibulum mattis.
At imperdiet dui accumsan sit amet nulla. Mattis molestie a iaculis at erat. At auctor urna nunc id. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Et odio pellentesque diam volutpat commodo sed egestas egestas. Vestibulum lectus mauris ultrices eros in cursus turpis. Tortor id aliquet lectus proin. Adipiscing elit duis tristique sollicitudin nibh sit. Tristique risus nec feugiat in fermentum. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Tempor nec feugiat nisl pretium.
Accumsan sit amet nulla facilisi morbi tempus. Aliquet nibh praesent tristique magna sit amet purus gravida. Ornare quam viverra orci sagittis eu volutpat. Sit amet nisl suscipit adipiscing bibendum est. Mauris cursus mattis molestie a iaculis at erat pellentesque. Sagittis purus sit amet volutpat consequat mauris. Congue nisi vitae suscipit tellus mauris. Tempus egestas sed sed risus pretium quam vulputate dignissim. Nam libero justo laoreet sit amet cursus sit amet. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Est ullamcorper eget nulla facilisi etiam dignissim diam quis. Quam vulputate dignissim suspendisse in est. Venenatis a condimentum vitae sapien pellentesque habitant morbi. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio.
Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Tortor dignissim convallis aenean et tortor at risus viverra. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Felis eget nunc lobortis mattis aliquam faucibus purus in. Augue interdum velit euismod in pellentesque massa. Amet aliquam id diam maecenas ultricies mi eget. Nunc sed augue lacus viverra vitae. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Nullam eget felis eget nunc lobortis. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Tristique nulla aliquet enim tortor at auctor urna nunc id. Sem fringilla ut morbi tincidunt augue interdum velit. Pharetra et ultrices neque ornare. Ut consequat semper viverra nam libero justo. Ultrices neque ornare aenean euismod elementum nisi. Nulla facilisi nullam vehicula ipsum a arcu. Quis eleifend quam adipiscing vitae. Feugiat in fermentum posuere urna nec tincidunt praesent semper.
Egestas sed sed risus pretium quam. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Massa id neque aliquam vestibulum morbi blandit cursus risus. Aliquam etiam erat velit scelerisque in dictum non consectetur a. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Massa tincidunt dui ut ornare lectus sit amet. Consequat interdum varius sit amet mattis vulputate enim. Feugiat nisl pretium fusce id velit ut tortor. In eu mi bibendum neque egestas congue quisque egestas. Sodales ut etiam sit amet nisl. In hac habitasse platea dictumst. Quam nulla porttitor massa id neque aliquam vestibulum. Ornare arcu odio ut sem nulla. Dolor purus non enim praesent elementum. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque.
Est ultricies integer quis auctor elit sed vulputate mi. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Facilisi cras fermentum odio eu feugiat pretium nibh. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Nisi quis eleifend quam adipiscing vitae. Enim nunc faucibus a pellentesque. Nunc eget lorem dolor sed. Vel orci porta non pulvinar. Facilisi cras fermentum odio eu feugiat pretium nibh. Fermentum leo vel orci porta non pulvinar. Egestas erat imperdiet sed euismod nisi porta. Quam quisque id diam vel quam. Tristique et egestas quis ipsum suspendisse ultrices. Sed euismod nisi porta lorem mollis aliquam ut. Varius duis at consectetur lorem donec. Porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
</section>
</body>
</html>
CSS CODE
Copy the Following Code and Paste it in your Profile
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Poppins', sans-serif;
}
p {
text-align: justify;
}
input[type = "checkbox"] {
position: fixed;
z-index: 1;
top: 40px;
right: 100px;
cursor: pointer;
-webkit-appearance: none;
}
input[type = "checkbox"]::before {
position: absolute;
content: 'Dark';
color: #fff;
background: #000;
padding: 10px 20px;
}
input[type = "checkbox"]:checked::before {
content: 'Light';
color: #000;
background: #fff;
}
input[type = "checkbox"]:checked ~ * {
filter: invert(1);
}
section {
position: absolute;
top: 0;
left: 0;
background: #fff;
min-height: 100vh;
padding: 80px 100px;
}
section img {
max-width: 500px;
float: left;
margin: 10px 20px 10px 0;
filter: inherit;
}
By: Jeevan Puhan
If You Like this dark/light mode toggle (Project) Then Subscribe Sinine Tech YouTube Channel Link and also Subscribe this blog. I Hope This Article Helps you in making dark/light mode using HTML CSS only.
Thanks For visiting Sinine Tech Blog.
Tags:
Programming