dark.css

/* Internet Explorer does not support css variables */
:root {
  --dark: #000;
  --medium: #1b1b1b;
  --light: #2e2e2e;
}

.dark-mode-button {
  background: transparent;
  border: none;
  height: 40px;
  width: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.top-dark-mode-button {
  position: absolute;
  top: 60px;
  right: 15px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 1000;
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  /* without a property, this is shorthand for transition: all */
  transition: 0.3s ease-in;
}

.top-dark-mode-button .dark-toggle {
  background: rgb(230, 230, 230);
  border-color: rgb(230, 230, 230);
  width: 35px;
}

.top-dark-mode-button:after {
  /* "content: property inserts generated content after the selected class...in this case, it inserts the text "DARK" after the dark mode button */
  content: 'DARK';
  position: absolute;
  color: #fff;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 22px;
  top: 10px;
  -webkit-transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
}

body.dark-mode .top-dark-mode-button:after {
  /* see above for description of content property */
  content: 'NORMAL';
  color: white;
  top: 12px;
  right: 10px;
}

/* the dark toggle is the slider track */
.dark-toggle {
  margin: 0;
  width: 30px;
  height: 16px;
  z-index: 20;
  border-radius: 10px;
  background: transparent;
  border: 3px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1000;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  align-items: center;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* changes the background of the slider track to blue */
body.dark-mode .dark-toggle {
  background: rgb(67, 183, 255);
  background: -o-linear-gradient(
    left,
    rgba(67, 183, 255, 1) 0%,
    rgba(0, 221, 246, 1) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(67, 183, 255, 1)),
    to(rgba(0, 221, 246, 1))
  );
  background: linear-gradient(
    90deg,
    rgba(67, 183, 255, 1) 0%,
    rgba(0, 221, 246, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43b7ff",endColorstr="#00ddf6",GradientType=1);
  border: none;
}

.dark-toggle span {
  height: 20px;
  width: 20px;
  left: -8px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

body.dark-mode .dark-toggle span {
  left: 15px;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.top-dark-mode-button .dark-toggle {
  background: rgb(230, 230, 230);
  border-color: rgb(230, 230, 230);
  width: 35px;
}

/* Dark mode styles */

/* keyframes and animation classes */

@keyframes dark-transition-main {
  from {
    background-color: white;
    color: black;
  }

  to {
    background-color: black;
    color: white;
  }
}

@keyframes dark-transition-body {
  from {
    background-color: rgb(45, 45, 51);
  }

  to {
    background-color: black;
  }
}

.dark-main-transition {
  animation: dark-transition-main 0.8s linear;
  animation-fill-mode: forwards;
}

.dark-main-no-transition {
  background-color: black !important;
  color: white;
}

.dark-body-transition {
  animation: dark-transition-body 0.8s linear;
}

.dark-body-no-transition {
  background-color: black !important;
}

/* general page styling for dark mode*/
body.dark-mode {
  background: #000;
}

body.dark-mode p {
  color: #fff;
}

body.dark-mode #updates {
  background: #000000;
}

body.dark-mode .main-section.parent-section {
  background: rgb(248, 250, 250);
  background: linear-gradient(
    0deg,
    rgb(228 0 255 / 87%) 3%,
    rgb(0 98 202) 100%
  );
}

body.dark-mode .main-section.child-section {
  background: rgb(248, 250, 250);
  background: linear-gradient(0deg, rgb(179 132 0) 3%, rgb(167 0 0) 100%);
}

body.dark-mode mark {
  background-color: rgb(255 237 69);
}

body.dark-mode main::-webkit-scrollbar-corner {
  color: black;
}