togglebtn.css

html {
  --bg: #212529;
  --bg-panel: #434343;
  --color-headings: #fcfcfc;
  --color-text: #fffbfb;
  --toggle-btn: #b5b5b5;
  --bars-color: cyan;
  --bars-sorted-color: rgb(0, 255, 0);
  --bars-sorting-blue-color: rgb(62, 62, 255);
  --bars-sorting-red-color: rgb(251, 78, 78);
  --btn-primary-bg: #212529;
  --btn-primary-border: #0d6efd;
  --btn-primary-txt-color: #0d6efd;
  --btn-primary-bg-hover: #0d6efd;
  --btn-close-bg: rgb(238, 228, 228);
}

html[data-theme='light'] {
  --bg: #fcfcfc;
  --bg-panel: #ebebeb;
  --color-headings: #333333;
  --color-text: #333333;
  --toggle-btn: #231f20;
  --bars-color: #41cfff;
  --bars-sorted-color: green;
  --bars-sorting-blue-color: rgb(3, 3, 255);
  --bars-sorting-red-color: red;
  --btn-primary-bg: rgb(238, 237, 237);
  --btn-primary-border: none;
  --btn-primary-txt-color: #333333;
  --btn-primary-bg-hover: #a39fa0;
  --btn-close-bg: rgb(232, 231, 231);
}

body {
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: rgb(255, 85, 122);
}

div a {
  color: var(--color-headings);
  text-decoration: none;
}
div h2 {
  font-weight: 700;
}
.two-components {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
}
input[type='checkbox'] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.toggleLabel {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

.toggleLabel:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + .toggleLabel {
  background: var(--toggle-btn);
}

input:checked + .toggleLabel:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

.toggleLabel:active:after {
  width: 45px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

/*  the bars */
.flex-item {
  background: var(--bars-color);
  border: 1pt solid black;
  width: 10px;
  transition: 0.1s all ease;
}

/* the menu modal  */
.offcanvas {
  background-color: var(--bg);
}
.offcanvas h5 {
  color: var(--color-headings);
}
.offcanvas span {
  color: var(--color-text);
}
.diff-sorts button {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-txt-color);
  border: 1px solid var(--btn-primary-border);
}
.diff-sorts button:hover {
  background-color: var(--btn-primary-bg-hover);
  border: none;
  color: var(--color-text);
}
.btn-close {
  background-color: var(--btn-close-bg);
  border-radius: 50%;
  box-shadow: 0px 0px 3px 3px var(--btn-close-bg);
  transition: all 0.3s;
}
.btn-close:hover {
  transform: scale(1.2);
  transition: all 0.3s;
}