How do i do a fade in effect on all the elements for darkmode and lightmode?-CodePudding

So i have an example below that will do a night mode and day mode and the elements i want to fade aren't fading. Feel like iv done it wrong way around or something but need someone else's mind to solve this. Iv included lots of code so you ll have an idea and just swapped out some of the p content to avoid copyright for the work im doing. See code below thanks.

// JavaScript Document
var icon = document.getElementById("togglebutton");
var night_icon = 'assets/Feed_Toggle_Night.png'
var day_icon = 'assets/Feed_Toggle_Day.png'


function input_hover() {
    if (icon.src.includes(night_icon)) {
        $('.border').hover(
            function () {
                $(this).css({ "border": "solid var(--blue) 3px" });
            },
            function () {
                $(this).css({ "border": "solid grey 3px" });
            }
        );
    }else {
        $('.border').hover(
            function () {
                $(this).css({ "border": "solid var(--yellow) 3px" });
            },
            function () {
                $(this).css({ "border": "solid grey 3px" });
            }
        );
    }
}
function button_hover() {
    if (icon.src.includes(night_icon)) {
        $('button').hover(
            function () {
                $(this).css({ "background-color": "var(--blue)" });
                $(this).css({ "animation": "none" });
            },
            function () {
                $(this).css({ "animation": "colours ease-in-out 15s infinite" });
            }
        );
    } else {
        $('button').hover(
            function () {
                $(this).css({ "background-color": "var(--yellow)" });
                $(this).css({ "animation": "none" });
            },
            function () {
                $(this).css({ "animation": "colours ease-in-out 15s infinite" });
            }
        );
    }
}

input_hover()
button_hover()

function toggleDisplay() {
    $("displaytog").on("click", () => {
        if (icon.src.includes(night_icon)) {
            icon.src = day_icon;
            $(icon).animate({ right: '25%' });
            $("body").fadeIn(1000, function () {
                $(this).css("background-color", "rgb(21,21,21)");
                $("p").css("color", "white");
                $("yellow").css("color", "rgb(255,243,110)");
                $("input").css("background-color", "rgb(21,21,21)");
                $("label").css("background-color", "rgb(21,21,21)");
                $("label").css("color", "white");
                input_hover();
                button_hover()
            });
        } else {
            icon.src = night_icon;
            $(icon).animate({ right: '0%' });
            $("body").fadeIn(1000, function () {
                $(this).css("background-color", "white");
                $("p").css("color", "black");
                $("yellow").css("color", "black");
                $("input").css("background-color", "white");
                $("label").css("background-color", "white");
                $("label").css("color", "black");
                input_hover();
                button_hover()
            });
        }
    })
}
toggleDisplay();

@charset "UTF-8";
/* CSS Document */
Sofia Pro
* {
    font-family: 'Sofia Pro';
    cursor: url("assets/Feed_Burger - Copy.png") 10 3, auto;
}
body {

}
main {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}
row{
    position: relative;
    width: 60%;
    margin: 1em auto;
}
row:first-of-type{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
displaytog {
    position: relative;
    display: block;
    width: 2.5em;
    height: 1.2em;
    border-radius: 50px;
    background-color: grey;
}
#togglebutton {
    position: absolute;
    right: 0;
    top: -30%;
}
p {
    font-size: 350%;
    line-height: 130%;
}
.p2{
    font-size: 100%;
}
form{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
form div{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    height: 2.2em;
    width: 33%;
    margin-right: 4%;
}
label{
    position: absolute;
    bottom: 85%;
    left: 5%;
    z-index: 5;
    background-color: white;
    padding: 0 10px;
}
input {
    width: 100%;
    height: 100%;
    font-size: 150%;
    border: solid grey 3px;
    border-radius: 3px;
    transition: all ease-in-out 500ms 0s;
}
input:focus{
    outline: none;
}
.border {
}
button {
    width: 20%;
    padding: 1em 0;
    border: none;
    font-size: 100%;
    animation: colours ease-in-out 15s infinite;
    border-radius: 3px;
}
.blue{
    background-color: blue;
}
row:last-of-type {
    margin-top: 5%;
}


blue {
    color: rgb(0,168,218);
}
orange {
    color: rgb(255,171,77);
}
green {
    color: rgb(135,232,115);
}
pink {
    color: rgb(255,64,180);
}
yellow {
    color: rgb(255,243,110);
}

:root {
    /*
    #00a8da - RGB 0 168 218 
    #fff36e - RGB 255 243 110
    #ffab4d  RGB 255 171 77
    #87e873 - RGB 135 232 115
    #ff40b4 - RGB 255 64 180
    */

    --blue: rgb(0,168,218);
    --yellow: rgb(255,243,110);
    --orange: rgb(255,171,77);
    --green: rgb(135,232,115);
    --pink: rgb(255,64,180);
}

@keyframes colours{
    0%      {background-color:  var(--blue);}
    20%    {background-color:  var(--green);}
    40%    {background-color:  var(--orange);}
    60%    {background-color:  var(--pink);}
    80%  {background-color:  var(--yellow);}
    100%  {background-color:  var(--blue);}
}
@keyframes slideleft{
    0%      {transform: translateX(0%);}
    100%  {transform: translateX(-50%);}
}
@keyframes slideright{
    0%      {transform: translateX(-50%);}
    100%  {transform: translateX(0%);}
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="functions.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body id="background">
    <header></header>
    <main>
        <row>
            <img src=""/>
            <displaytog>
                <img src="assets/Feed_Toggle_Night.png" id="togglebutton"/>
            </displaytog>
        </row>
        <row>
            <p><blue>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blue> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <orange>websites,</orange><green> apps</green> and <pink>digital marketing</pink> Lorem Ipsum is simply dummy text of the printing and typesetting industry. <yellow style="color: black;">Market your business online like a pro&ast;.</yellow></p>
        </row>
        <row id="formrow">
            <form>
                <div>
                    <label>Your name</label>
                    <input type="text" class="border"/>
                </div>
                <div>
                    <label>Your email</label>
                    <input type="text" class="border" />
                </div>
                <button type="submit">Sign up</button>
            </form>
        </row>
        <row>
            <p class="p2">&ast;more info coming soon.</p>
        </row>
    </main>
    <footer></footer>
</body>
</html>
<script src="functions.js"></script>

CodePudding user response：

This still needs a bit of work but the primary idea is to simply add a class to your body that overides all your root variables.

Some additional recommendations are:

Use css for all style related elements. Only use JavaScript to create triggers. This goes for animations too.
Don't create your own html tags. Although most browsers allow it they are not HTML5 compliant. Instead of <yellow> use <span >

// JavaScript Document
var icon = document.getElementById("togglebutton");
var night_icon = 'assets/Feed_Toggle_Night.png'
var day_icon = 'assets/Feed_Toggle_Day.png'

function toggleDisplay() {
  $("displaytog").on("click", () => {
    if (icon.src.includes(night_icon)) {
      icon.src = day_icon;
      $(icon).animate({
        right: '25%'
      });
      $("body").addClass("dark");
    } else {
      icon.src = night_icon;
      $(icon).animate({
        right: '0%'
      });
      $("body").removeClass("dark");
    }
  })
}

toggleDisplay();

@charset "UTF-8";

/* CSS Document */

:root {
  --body: rgb(255, 255, 255);
  --primary: rgb(0, 0, 0);
  --primaryOn: rgb(255, 255, 255);
  --blue: rgb(0, 168, 218);
  --yellow: rgb(255, 243, 110);
  --orange: rgb(255, 171, 77);
  --green: rgb(135, 232, 115);
  --pink: rgb(255, 64, 180);
}

.dark {
  --body: rgb(21, 21, 21);
  --primary: rgb(255, 255, 255);
  --primaryOn: rgb(0, 0, 0);
  --blue: rgb(0, 168, 218);
  --yellow: rgb(0, 0, 0);
  --orange: rgb(255, 171, 77);
  --green: rgb(135, 232, 115);
  --pink: rgb(255, 64, 180);
}

Sofia Pro * {
  font-family: 'Sofia Pro';
  cursor: url("assets/Feed_Burger - Copy.png") 10 3, auto;
}

body {
  background-color: var(--body);
  transition:all ease-in-out .3s;
}

main {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

row {
  position: relative;
  width: 60%;
  margin: 1em auto;
}

row:first-of-type {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

displaytog {
  position: relative;
  display: block;
  width: 2.5em;
  height: 1.2em;
  border-radius: 50px;
  background-color: grey;
}

#togglebutton {
  position: absolute;
  right: 0;
  top: -30%;
}

p {
  font-size: 350%;
  line-height: 130%;
  color: var(--primary);
}

.p2 {
  font-size: 100%;
}

form {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}

form div {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
  height: 2.2em;
  width: 33%;
  margin-right: 4%;
}

label {
  position: absolute;
  bottom: 85%;
  left: 5%;
  z-index: 5;
  background-color: white;
  padding: 0 10px;
  background-color: var(--primary);
  color: var(--primaryOn);
}

input {
  width: 100%;
  height: 100%;
  font-size: 150%;
  border: solid grey 3px;
  border-radius: 3px;
  transition: all ease-in-out 500ms 0s;
  background-color: var(--primary);
}

input:focus {
  outline: none;
}

button {
  width: 20%;
  padding: 1em 0;
  border: none;
  font-size: 100%;
  animation: colours ease-in-out 15s infinite;
  border-radius: 3px;
}

row:last-of-type {
  margin-top: 5%;
}

blue {
  color: rgb(0, 168, 218);
}

orange {
  color: rgb(255, 171, 77);
}

green {
  color: rgb(135, 232, 115);
}

pink {
  color: rgb(255, 64, 180);
}

yellow {
  color: rgb(255, 243, 110);
}

@keyframes colours {
  0% {
    background-color: var(--blue);
  }
  20% {
    background-color: var(--green);
  }
  40% {
    background-color: var(--orange);
  }
  60% {
    background-color: var(--pink);
  }
  80% {
    background-color: var(--yellow);
  }
  100% {
    background-color: var(--blue);
  }
}

@keyframes slideleft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slideright {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Untitled Document</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <link href="functions.css" rel="stylesheet" type="text/css">
  <link href="responsive.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body id="background">
  <header></header>
  <main>
    <row>
      <img src="" />
      <displaytog>
        <img src="assets/Feed_Toggle_Night.png" id="togglebutton" />
      </displaytog>
    </row>
    <row>
      <p>
        <blue>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blue> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        <orange>websites,</orange>
        <green> apps</green> and
        <pink>digital marketing</pink> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        <yellow style="color: black;">Market your business online like a pro&ast;.</yellow>
      </p>
    </row>
    <row id="formrow">
      <form>
        <div>
          <label>Your name</label>
          <input type="text" class="border" />
        </div>
        <div>
          <label>Your email</label>
          <input type="text" class="border" />
        </div>
        <button type="submit">Sign up</button>
      </form>
    </row>
    <row>
      <p class="p2">&ast;more info coming soon.</p>
    </row>
  </main>
  <footer></footer>
</body>

</html>
<script src="functions.js"></script>