@media (prefers-color-scheme: light) {
  .gh-search-icon.has-light-text,
  .has-light-text .menu a,
  .has-light-text .brand-title {
    color: #ffffff !important;
  }

  .has-light-text .nav-dropdown a {
    color: var(--color-base) !important;
  }

  .has-light-text .utils svg {
    fill: #ffffff !important;
  }

  .more-button.has-light-text {
    color: #ffffff !important;
  }

  .has-light-text .burger .bar {
    background-color: #ffffff;
  }

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

  .has-light-text .light-mode-logo {
    display: none;
  }

  .has-light-text .hero-post {
    color: #ffffff !important;
  }
}

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

  .author-website svg,
  .author-location svg {
    height: var(--font-tiny);
    width: var(--font-tiny);
    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;
  }

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

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

  .dark-mode-logo {
    display: inline;
  }

  .light-mode-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);
  }
}