:root {
  --grey-50: #f8f9fa;
  --grey-100: #f1f3f4;
  --grey-200: #e8eaed;
  --grey-500: #9aa0a6;
  --grey-700: #5f6368;
  --grey-800: #3c4043;
  --grey-900: #202124;

  --dark-mode-white: white;
  --dark-mode-black: black;
  --dark-mode-lightgray: lightgray;
  --dark-mode-darkgray: darkgray;
  --dark-mode-icon-color: var(--grey-700);

  --body-background-color: var(--dark-mode-white);
  --body-color: var(--dark-mode-black);
  --border-color: #e1e3e4;
  --sidebar-color: var(--dark-mode-white);
  --sidebar-border-color: var(--dark-mode-lightgray);
  --mark-color: #71d88c;
  --app-bar-title-color: var(--dark-mode-black);
  --app-bar-icon-color: var(--dark-mode-icon-color);
  --nav-bar-color: var(--grey-50);
  --nav-bar-bread-crumb-divider-color: #ccc;
  --search-box-color: var(--grey-100);
  --search-box-icon-color: var(--dark-mode-icon-color);
  --clickable-icon-focused-color: #70d78d;
  --search-box-input-placeholder-color: #00000080;
  --container-color: var(--dark-mode-white);
  --aside-color: var(--dark-mode-white);
  --footer-background-color: #282c34;
  --footer-color: var(--dark-mode-white);
  --no-results-found-color: darkgrey;
  --indexItem-hovering-color: var(--dark-mode-white);
  --indexItem-selected-color: #d2e3fc;
  --caret-color: var(--dark-mode-darkgray);
  --caret-expandable-color: #282c34;
  --leaf-color: #282c34;
  --grid-container-color: #2196f3;
  --grid-item-color: whitesmoke;
  --gav-pom-value-color: #322e38;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-mode-white: var(--grey-900);
    --dark-mode-black: var(--grey-200);
    --dark-mode-lightgray: darkgray;
    --dark-mode-darkgray: lightgray;
    --dark-mode-icon-color: var(--grey-500);

    --border-color: #0a0a0a;
    --search-box-color: var(--grey-700);
    --footer-background-color: whitesmoke;
    --nav-bar-color: var(--grey-800);
    --search-box-input-placeholder-color: #e8eaed80;
    --indexItem-selected-color: #8ab4f824;
    --caret-expandable-color: white;
    --gav-pom-value-color: var(--grey-100);
    --search-box-icon-color: var(--grey-200);
  }

  a {
    color: #669df6;
  }
}