/* Colour theme. JS sets data-theme="light" or "dark" on <html>. */

.theme-toggle {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.theme-toggle-group {
  display: inline-flex;
  border: 1px solid #d1d5da;
  border-radius: 6px;
  overflow: hidden;
}
.theme-toggle button {
  margin: 0;
  padding: 5px 10px;
  font: inherit;
  line-height: 0;
  color: #586069;
  background: transparent;
  border: 0;
  border-left: 1px solid #d1d5da;
  cursor: pointer;
}
.theme-toggle button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.theme-toggle button:first-child {
  border-left: 0;
}
.theme-toggle button:hover {
  background: rgba(128, 128, 128, 0.15);
}
.theme-toggle button[aria-pressed="true"] {
  color: #fff;
  background: #0366d6;
}

html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .bg-gray {
  background-color: #010409 !important;
  color: #c9d1d9;
}
html[data-theme="dark"] .bg-white {
  background-color: #0d1117 !important;
}
html[data-theme="dark"] .markdown-body,
html[data-theme="dark"] .markdown-body h1,
html[data-theme="dark"] .markdown-body h2,
html[data-theme="dark"] .markdown-body h3,
html[data-theme="dark"] .markdown-body h4,
html[data-theme="dark"] .markdown-body h5,
html[data-theme="dark"] .markdown-body h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3 {
  color: #c9d1d9;
}
html[data-theme="dark"] a,
html[data-theme="dark"] .markdown-body a {
  color: #58a6ff;
}
html[data-theme="dark"] .muted-link,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .text-gray-dark,
html[data-theme="dark"] .UnderlineNav-item,
html[data-theme="dark"] .markdown-body blockquote {
  color: #8b949e;
}
html[data-theme="dark"] .UnderlineNav-item:hover,
html[data-theme="dark"] .UnderlineNav-item:focus,
html[data-theme="dark"] .UnderlineNav-item.selected,
html[data-theme="dark"] .muted-link:hover {
  color: #c9d1d9;
}
html[data-theme="dark"] .UnderlineNav-item.selected {
  border-bottom-color: #f78166;
}
html[data-theme="dark"] .UnderlineNav,
html[data-theme="dark"] .Box,
html[data-theme="dark"] .Box-body,
html[data-theme="dark"] .border,
html[data-theme="dark"] .markdown-body hr,
html[data-theme="dark"] .markdown-body table th,
html[data-theme="dark"] .markdown-body table td,
html[data-theme="dark"] .markdown-body h1,
html[data-theme="dark"] .markdown-body h2,
html[data-theme="dark"] .markdown-body blockquote {
  border-color: #30363d;
}
html[data-theme="dark"] .markdown-body hr {
  background-color: #30363d;
}
html[data-theme="dark"] .Box {
  background-color: #161b22;
}
html[data-theme="dark"] .markdown-body code,
html[data-theme="dark"] .markdown-body tt {
  background-color: rgba(110, 118, 129, 0.4);
}
html[data-theme="dark"] .markdown-body pre,
html[data-theme="dark"] .highlight pre,
html[data-theme="dark"] .chroma {
  background-color: #161b22;
}
/* Invert the light syntax colours so they stay readable on a dark background. */
html[data-theme="dark"] .chroma {
  filter: invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] .markdown-body table tr {
  background-color: #0d1117;
  border-top-color: #30363d;
}
html[data-theme="dark"] .markdown-body table tr:nth-child(2n) {
  background-color: #161b22;
}
html[data-theme="dark"] img {
  opacity: 0.9;
}
html[data-theme="dark"] .theme-toggle-group,
html[data-theme="dark"] .theme-toggle button {
  border-color: #30363d;
}
html[data-theme="dark"] .theme-toggle button {
  color: #8b949e;
}
html[data-theme="dark"] .theme-toggle button[aria-pressed="true"] {
  color: #fff;
  background: #1f6feb;
}

/* Keep button text readable: the link colour above must not apply to buttons. */
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] .markdown-body a.btn-primary {
  color: #fff;
  background-color: #1f6feb;
  background-image: linear-gradient(-180deg, #388bfd 0%, #1f6feb 90%);
  border-color: rgba(240, 246, 252, 0.1);
}
html[data-theme="dark"] a.btn-primary:hover {
  color: #fff;
  background-color: #1158c7;
  background-image: linear-gradient(-180deg, #2f81f7 0%, #1158c7 90%);
}