@media (prefers-color-scheme: light) {
  .has-light-text .default-logo,
  .has-dark-text .light-logo {
    display: none;
  }
}

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

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

  .form-wrapper {
    background-color: var(--color-darkmode-bg);
  }

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

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

  .has-light-text .nav-dropdown a,
  .has-dark-text .nav-dropdown a {
    color: #ffffff !important;
  }

  body img {
    filter: brightness(0.9) contrast(1.1) !important;
  }

  .more-button,
  figcaption {
    color: var(--color-darkmode);
  }

  .light-logo,
  .has-dark-text .light-logo {
    display: inline;
  }

  .default-logo,
  .has-light-text .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);
    transition: all 0.2s ease;
  }

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