body.dark {
  background-color: #111;
  color: #ddd;
}
body.dark .site-header,
body.dark .site-footer {
  background-color: #111;
  color: #ddd;
  border-color: #444;
}
body.dark a:link { color: #5bf; }
body.dark a:visited { color: #6bf; }
body.dark a:hover { color: #39d; }
body.dark .site-title, body.dark .site-title:visited { color: #ddd; }
body.dark code, body.dark pre, body.dark .highlight {
  background-color: #1a1a1a;
  color: #eee;
  border-color: #444;
}
body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: #ddd; }
body.dark strong { color: #fff; }
body.dark hr { border-color: #444; }
body.dark table th { background: #444; color: #fff; }
body.dark table td, body.dark table th { border-color: #444; }
body.dark table tr:nth-child(even) { background: #1a1a1a; }
body.dark img { filter: brightness(0.9); }

.theme-switch {
  display: inline-block;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 4px;
}
.theme-switch-track {
  width: 50px;
  height: 24px;
  border-radius: 30px;
  border: 1px solid #555;
  background-color: hsl(222, 14%, 7%);
  position: relative;
  transition: all 0.2s ease;
}
.theme-switch-icon {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 0; bottom: 0;
  margin: auto 0;
  line-height: 0;
  transition: opacity 0.25s ease;
}
.theme-switch-icon--light {
  left: 5px;
  opacity: 0;
}
.theme-switch-icon--dark {
  right: 5px;
  opacity: 1;
}
.theme-switch.active .theme-switch-icon--light { opacity: 1; }
.theme-switch.active .theme-switch-icon--dark { opacity: 0; }
.theme-switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fafafa;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform: translateX(0);
}
.theme-switch.active .theme-switch-thumb {
  transform: translateX(26px);
}