@media (prefers-color-scheme: dark) {
  .utils svg {
    fill: var(--color-darkmode) !important;
  }

  .author-website svg,
  .author-location svg {
    fill: var(--color-darkmode);
  }

  .form-wrapper,
  body .site-header,
  body .mobile-menu,
  body .hero-wrapper,
  body .site-footer,
  body .site-form input {
    background-color: var(--color-darkmode-bg);
  }

  body .has-cover .form-wrapper {
    background-color: transparent;
  }

  body .site-form input {
    color: var(--color-darkmode);
  }

  body .nav-dropdown {
    background-color: var(--color-darkmode-bg-highlight);
  }

  body img:not(.author-image img) {
    filter: brightness(0.9) contrast(1.1) !important;
  }

  .share-menu svg,
  .prev-next a svg,
  .pagination svg,
  .access-tag svg {
    fill: var(--color-darkmode);
    color: var(--color-darkmode);
  }

  .more-button,
  figcaption,
  .post-footer-cta,
  .prev-next a,
  .form-members {
    color: var(--color-darkmode);
  }

  .has-cover .author-image {
    border: 4px solid var(--color-darkmode-bg);
    position: relative;
    z-index: 10;
  }

  .light-logo {
    display: inline;
  }

  .default-logo {
    display: none;
  }

  .post-content blockquote.kg-blockquote-alt::before {
    content: url("../images/quote-white.svg") !important;
  }

  .kg-bookmark-container,
  .kg-product-card-container {
    background-color: var(--color-darkmode-bg) !important;
    color: var(--color-darkmode) !important;
    border-color: var(--color-darkmode) !important;
  }

  .kg-product-card-container {
    border: 1px solid var(--color-darkmode) !important;
  }

  body {
    background-color: var(--color-darkmode-bg) !important;
    color: var(--color-darkmode);
  }

  .burger .bar {
    background-color: var(--color-darkmode);
  }

  .tags-list a {
    border: 1px solid var(--ghost-accent-color);
    color: var(--ghost-accent-color);
    background-color: transparent;
  }

  @media (min-width: 768px) {
    .tags-list a:hover,
    .navbar li:not(.nav-current) a:hover,
    .more-button:hover,
    .signin-btn:hover {
      opacity: 0.7;
      background-color: transparent;
    }
  
    .nav-current a {
      color: var(--ghost-accent-color);
      background-color: transparent;
      border: 1px solid var(--ghost-accent-color);
    }
  }
}