Enable dark mode with just one click using this css trick

on   with No comments

 Using the color-scheme property or background you can enabled the dark mode. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode</title>
</head>
<input type="checkbox"/> Enable dark mode
<div class="document">

</div>
<style>
    html,body {
        margin: 0;
    }
    .document {
        height: 100vh;
        width: 100%;
        background-color: #888;
    }
    input:checked + .document  {
        border: none;
        background-color: black;
        color-scheme: dark;

    }

</style>
</html>


here is the link to the codepen

https://codepen.io/naveen17797/pen/zYLzeyK

Share:

0 comments:

Post a Comment