Нужно чтобы по включению чекбокса менялась анимация фона с цветами, текст и элементы становились белыми а фон темным.
body {
width: 100%;
height: 100%;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
.optionswindow {
display: flex;
align-content: center;
width: 1200px;
height: 700px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(50px);
margin: auto;
margin-top: 70px;
margin-bottom: 70px;
border-radius: 13px;
}
.opthead {
font-family: "HISKYFLIPPERHIBOLD",
sans-serif;
font-size: 65px;
color: black;
width: 350px;
height: 65px;
padding: 0 auto;
margin: 0 auto;
padding-top: 40px;
}
.opthead:hover {
color: #2b1de8;
transition: 1s;
}
.opthead:not(:hover) {
transition: 1s;
}
.fa-solid.fa-arrow-left-long {
font-size: 60px;
position: absolute;
padding-top: 45px;
padding-left: 50px;
}
.fa-solid.fa-arrow-left-long:hover {
color: #2b1de8;
transition: 1s;
}
.fa-solid.fa-arrow-left-long:not(:hover) {
transition: 1s;
}
.line {
position: absolute;
background-color: rgb(0, 0, 0);
width: 600px;
height: 1px;
margin-right: 300px;
margin-left: 300px;
margin-top: 130px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 110px;
height: 45px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(255, 255, 255);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 37px;
width: 37px;
left: 4px;
bottom: 4px;
background-color: #1de840;
-webkit-transition: .4s;
transition: .4s;
transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
}
input:checked+.slider {
background-color: rgb(132, 0, 255);
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(65px);
-ms-transform: translateX(65px);
transform: translateX(65px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.content {
position: absolute;
width: 1200px;
margin-top: 250px;
height: 500px;
}
.switch {
margin-left: 140px;
}
.nameSwitch {
font-family: "HISKYFLIPPERHIBOLD",
sans-serif;
font-size: 40px;
color: black;
width:312px;
margin-left: 50px;
margin-top: 60px;
}
.names {
display: flex;
position: absolute;
}
<!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" />
<link
rel="stylesheet"
href="C:\Users\User\Desktop\JSGAME\stylesoptions.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link href="http://fonts.cdnfonts.com/css/hiskyflipper" rel="stylesheet" />
<script
src="https://kit.fontawesome.com/0436764e77.js"
crossorigin="anonymous"
></script>
<script src="C:\Users\User\Desktop\JSGAME\darkmode.js"></script>
<title>Options</title>
</head>
<body>
<div class="screen">
<div class="optionswindow">
<div class="line"></div>
<h1 class="opthead">OPTIONS</h1>
<i
class="fa-solid fa-arrow-left-long"
onclick="document.location='mainscreen.html'"
></i>
<div class="content">
<div class="names"><p class="nameSwitch">Night Mode</p></div>
<label id="toggle" class="switch">
<input type="checkbox" class="dark-cb" />
<span class="slider round"></span>
</label>
</div>
<!-- Content -->
</div>
<!-- OptionsWindow -->
</div>
<!-- Screen -->
</body>
</html>