0

Нужно чтобы по включению чекбокса менялась анимация фона с цветами, текст и элементы становились белыми а фон темным.

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>

1 ответ 1

0

Не совсем про checkbox, но в некотором отношении этот вариант лучше...

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --main-color: red;
}

header,
footer {
  width: 100vw;
  height: 4em;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: red;
  background-color: var(--main-color);
}

header {
  display: flex;
}

header button {
  align-self: center;
}

main {
  flex: 1;
  padding: 0 16px;
  box-sizing: border-box;
}

h1,
blockquote {
  color: red;
  color: var(--main-color);
}

blockquote {
  border: 1px solid;
  border-color: red;
  border-color: var(--main-color);
  padding: 1em;
  background-image: linear-gradient(transparent 0, var(--main-color) 100%);
  background-size: 1px 1000px;
  background-position: 0 -100px;
}
<header>
  <button class="red" onclick="body.style.setProperty('--main-color', 'red')">red</button>
  <button class="green" onclick="body.style.setProperty('--main-color', 'green')">green</button>
  <button class="blue" onclick="body.style.setProperty('--main-color', 'blue')">blue</button>
</header>
<main>
  <h1>Lorem ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque sapien. Duis aliquam ultricies finibus. Suspendisse non dapibus urna. Morbi metus sem, lacinia ut erat nec, luctus ullamcorper arcu. Nam at ante purus. Maecenas libero lorem, condimentum
    ut lacus eget, congue porta nunc. Fusce nec porttitor risus. Quisque suscipit magna fermentum ligula pretium pretium. Nulla congue, justo ut faucibus ornare, justo nulla egestas metus, eu imperdiet magna purus sit amet erat. Aenean auctor ligula ut
    erat semper semper. Pellentesque in dictum velit.
  </p>
  <blockquote>Praesent tempus pulvinar felis, sit amet suscipit dolor ullamcorper eget. Sed venenatis risus quis nisi dignissim, dictum eleifend nibh volutpat.</blockquote>
  <p>
    Mauris feugiat rutrum posuere. Quisque vestibulum lectus eu velit iaculis, at dignissim diam finibus. Maecenas gravida sit amet libero condimentum eleifend. Sed placerat magna sed nibh lacinia, ut dignissim lorem hendrerit. Vivamus convallis massa felis,
    sit amet efficitur est aliquam id. Donec ultricies, ante sit amet sodales consectetur, velit urna venenatis diam, vel interdum neque turpis at nibh. Morbi a porttitor nisl. Vestibulum ut leo et leo ullamcorper elementum et nec tellus. Aenean nunc
    ex, aliquet eu fringilla sed, aliquam a mauris. Integer imperdiet ultrices lacus quis vehicula. Nulla bibendum elit velit, ac eleifend velit sagittis eget. Cras vel varius ligula, quis porta odio.
  </p>
</main>
<footer></footer>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.