Use the source code to make a website with dark mode
<html>
<head>
<style>
*{margin:0px;padding:0px;background-color:#3504D0;}.maindiv{position:relative;top:50%;left:50%;transform:translate(-50% , -50%);background-image:linear-gradient(to bottom,#00FFA3,#00E3FF);height:400px;width:700px;}.maindiv
div{height:100%;width:100%;background-image:linear-gradient(to bottom,#00FF93,#00F3FF);}/*colorful animation*/.maindiv:before{position:absolute;top:0px;left:0px;content:'';background:linear-gradient(45deg,#00FF01,#00FFE7,#FF00D5,#FF005E,#1100FF ,#00FF01,#00FFE7,#FF00D5,#FF005E,#1100FF);
height: calc(100% + 4px) ;
width: calc(100% + 4px) ;
background-size:400%;
z-index:-1;
animation:animate 20s infinite linear;}.maindiv:before{ filter: blur(40px);} @keyframes animate{ 0%{ background-position: 0,0 ; } 50%{ background-position: 400%,0 ; } 100%{ background-position: 0,0 ; } }/*end*/a{text-decoration:none;}
h1{font-size:100px;text-align:center;color:#fff;background:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}/* property for dark mode */@media (prefers-color-scheme: dark){*{background-image:linear-gradient(to bottom,#303030,#000);}.maindiv div {background-image:linear-gradient(to bottom,#303030,#000);}}/*end*/
</style>
<body>
<div class="maindiv">
<a href="my hrml.html">
<div>
<h1> dark mode </h1>
</div>
</a>
</div>
</body>
</html>
Video:---