darkmode.css

:root {
  --background: #0d1117;
  --background-secondary: #161b20;
  --text: #c9d1d9;
  --text-secondary: #b3bdc7;
  --text-tertiary: #5f6c79;
  --accent: rgb(136 165 210);
  --accent-dark: #11161d;
  --accent-secondary: #515d71;
  --border: #2f3948;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 600;
}

.text-tertiary {
  color: var(--text-tertiary);
}

body {
  color: var(--text-secondary);
  background: var(--background);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

code.language-text {
  background: var(--background-secondary) !important;
}

hr {
  background: var(--border);
}

blockquote {
  border-left: 2px solid var(--accent-secondary);
  background: var(--background-secondary);
}

pre[class*="language-"],
code[class*="language-"] {
  color: var(--text);
}

/* The rules below are a hacky way of overriding classes generated by styled components */
.algolia-autocomplete input {
  background: var(--background-secondary);
  border: 1px solid var(--border);
  color: var(--text);
}
[class*="MobileNav"] + [class*="Overlay"] {
  background: rgba(0, 0, 0, 0.7);
}

.ds-dropdown-menu .ds-suggestion,
.ds-dropdown-menu .ds-suggestion {
  background: var(--background-secondary);
}

.ds-dropdown-menu .ds-dataset-1 {
  color-scheme: dark;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
}

.algolia-docsearch-suggestion--subcategory-column {
  color: var(--text);
}

.algolia-docsearch-suggestion--wrapper {
  color: var(--text-secondary);
}

.algolia-docsearch-suggestion--category-header {
  color: var(--text-tertiary);
}

main > header > div {
  background-color: var(--background) !important;
}

.site-title,
.title-sidebar {
  font-weight: 600;
}

:not(pre) > code[class*="language-"] {
  color: #d4b27f;
}

[class*="AsideLinkInner"]:hover,
.headingLink:hover {
  color: var(--accent) !important;
}

aside span[class*="HeaderInner"] {
  display: none;
}

ul[class*="StyledList"] {
  color: var(--text-secondary);
}

table[class*="-StyledTable"] thead {
  background: var(--accent-dark);
}

div[class*="-Menu"] {
  background: var(--background-secondary);
}

[class*="-MenuItem"] {
  color: var(--text-tertiary);
}

/* A very hacky way to select the copy button as it does not
   have a class name that we can reliably target */
[class*="-Header"] button:hover {
  background: var(--background-secondary);
}

[class*="Wrapper-StyledSelect"] > button:hover {
  background: var(--background-secondary);
}

div[class*="-MenuItem"]:hover {
  background: var(--background);
}

table[class*="StyledTable"] tr:hover {
  background: var(--background-secondary);
}

div[class*="LinkTitle"] {
  color: var(--text-tertiary);
}

div[class*="BodyContent"] a[href]:not([class]) {
  color: var(--accent) !important;
}

@media (max-width: 850px) {
  aside {
    background-color: var(--background-secondary) !important;
  }
}

deprecated::after {
  content: 'deprecated';
  font-size: 12px;
  padding: 5px 8px;
  margin-left: 5px;
  border-radius: 10px;
  color: var(--text-secondary);
  background-color: #202b3b;
}