@media (prefers-color-scheme: dark), (prefers-dark-interface) { /* the latter is required for Safari/Webkit? https://stackoverflow.com/a/58163051/2533433 */

  :root {
    --iod-light-background: rgb(51, 55, 58);
    --iod-medium-background: rgb(38, 42, 43);
    --iod-dark-background: #0D1117;
    --iod-content-background: #161B22;
    --scrollbar-bg:#161B22; --scrollbar-thumb:rgb(80, 86, 91);
  }

  ::-webkit-scrollbar{width:8px;height:8px;background-color:var(--scrollbar-bg)}
  ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:5px}
  *{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-bg);scrollbar-width:thin}

  body { background-color: var(--iod-dark-background); color:rgb(194, 228, 255); }
  #topbar h1 { color: blanchedalmond; }
  #content { background-color: var(--iod-content-background); }

  #content h1, #content h2, #content h3, #content h4, #content h5 { color: #00a5ff; }
  #topdock { background-color: var(--iod-light-background); }
  #leftbar .navtabs li.active { background-color: var(--iod-content-background); }
  #leftbar .navtabs li.active:hover, #leftbar .navtabs li.inactive:hover { background-color: var(--iod-medium-background); }

  img { opacity: .75; transition: opacity .5s ease-in-out; }
  img:hover { opacity: 1; }

  span.appname, a { color: rgb(26, 174, 255) !important; }
  span.appname:hover, #content a:hover { text-decoration-color: currentcolor; background-color: rgb(34, 36, 38); }

  code, .code, pre { background-color:var(--iod-light-background); }
  div.imgdesc .caption, div.imgleft .caption, div.imgright .caption { color:lightgray !important; background-color: var(--iod-medium-background); }

  /* articles */
  #content span.tag { background-color: var(--iod-light-background); }
  #content td span.tag { background-color: var(--iod-medium-background); }
  #content span.tag a { color:snow !important; }
  #content blockquote { background-color: var(--iod-medium-background); }

  /* lists */
  #content div.group_lastupdate { background-color: var(--iod-light-background); }
  #content #catintro, #content #catextro { background-color: var(--iod-dark-background); }
  #content #catintro p:first-child, #content #catextro p:first-child { margin-top:.2em; }
  #content #catintro p:last-child, #content #catextro p:last-child { margin-bottom:.2em; }
  span.hasperms, span.hasmoreperms { color:black; background-color:rgba(255,238,102,.7); }
  span.hastrackers { background:#5c5c5c; }
  span.noperms { color:black; background-color:rgba(153,255,0,.8); }

  /* search page */
  #searchform #lcell, #searchform #permlist { background-color: var(--iod-medium-background); }

  /* ads */
  .badge img { box-shadow: 0 0 20px gray; }
  .amablock td { background-color: var(--iod-medium-background); box-shadow: 4px 4px 2px var(--iod-light-background); }
  .amablock td.premium { background-color: var(--iod-light-background); }
  .amablock .priceinfo { color: blanchedalmond; }
  .amablock a .priceinfo:hover { background-color: inherit; }


  /* tables (e.g. in article list and articles) */
  table, #content table { border-color: rgb(77, 83, 86); background-color: var(--iod-medium-background); }
  th, #content th { background-color:var(--iod-medium-background); }
  td, #content td, #content .itemlist td { background-color:var(--iod-light-background); }

  /* appdetails overlay */
  #appinfo { color: rgb(232, 230, 227); background-color: rgba(72, 78, 81, 0.95); box-shadow: rgb(55, 60, 62) 0px 0px 20px 5px; }
  #content #apphead, #apphead tr, #content #lhead, #content #rhead { background-color: rgb(24, 26, 27); }
  #ldesc, #rdesc { border-color: rgb(84, 91, 94); background-color: rgb(24, 26, 27); }
  .protda, .protda a { color: rgb(255, 97, 97) !important; }
  .protsi, .protsy, .protdv, .protsi a, .protsy a, .protdv a { color: rgb(168, 160, 149) !important; }


  /* fdlist */
  input, textarea, select, button { border-color: #736b5e; color: #e8e6e3; background-color: #181a1b; }
  #intro { background-color:var(--iod-medium-background); box-shadow: 10px 10px 5px var(--iod-light-background); }
  #intro, .uncoloredlink { color:snow; }
  .appdetailinner, .appiconbig { background-color:#161822; }
  .appdetailinner .appdetailrow:first-child { background-color:var(--iod-medium-background); }
  #content .minor-details { color:snow; }
  .pagercell img { opacity: .9; filter:brightness(150%) }

  /* fddetails */
  #appdetails { background-color:var(--iod-medium-background); }
  #appdetails .screenshots, #footer a, #keydata, .package { background-color:var(--iod-light-background); }
  .keydatatable td { color:snow; }
  #appdetails .whatsnew { background-color:var(--iod-light-background); } /* not yet here */
  .antifeatures { background-color:rgba(240,82,45,.25); }

  /* help pages */
  #popup { background-color: var(--iod-medium-background); }
  #popup h1, #popup h2, #popup h3, #popup h4, #popup h5 { color: #00a5ff; }
  #popup blockquote { background-color: var(--iod-light-background); }

  /* Misc */
  input[readonly] { background-color: slategray; }
  .itemlist td .last_update { color: lightgrey; }
}