@media (prefers-color-scheme: dark) {
  html[data-theme="dark"] body {
    color: var(--global-text-color);
    background-color: var(--global-bg-color);
  }

  html[data-theme="dark"] h1,
  html[data-theme="dark"] h2,
  html[data-theme="dark"] h3,
  html[data-theme="dark"] h4,
  html[data-theme="dark"] h5,
  html[data-theme="dark"] h6 {
    color: var(--global-text-color);
  }

  html[data-theme="dark"] a {
    color: var(--global-link-color);
  }

  html[data-theme="dark"] a:hover {
    color: var(--global-link-color-hover);
  }

  html[data-theme="dark"] code,
  html[data-theme="dark"] pre {
    background-color: var(--global-code-background-color);
    color: var(--global-code-text-color);
  }

  html[data-theme="dark"] blockquote {
    border-left: 4px solid var(--global-border-color);
    background-color: var(--global-footer-bg-color);
    color: var(--global-text-color-light);
  }

  html[data-theme="dark"] th,
  html[data-theme="dark"] td {
    border-color: var(--global-border-color);
  }

  html[data-theme="dark"] th {
    background-color: var(--global-thead-color);
  }
}