@mixin darkmode-syntax {
  .highlight,
  pre.highlight {
    // background: #282c34;
    color: #abb2bf;
  }
  // .highlight pre {
  //   background: #282c34;
  // }
  .highlight .ge {
    font-style: italic;
  }
  .highlight .gs {
    font-weight: 700;
  }
  .highlight .ow {
    font-weight: 700;
  }
  .highlight .n,
  .highlight .nf,
  .highlight .nn,
  .highlight .o,
  .highlight .p {
    color: #abb2bf;
  }
  .highlight .c,
  .highlight .c1,
  .highlight .cm,
  .highlight .cp,
  .highlight .cs {
    color: #5c6370;
    font-style: italic;
  }
  .highlight .sr,
  .highlight .ss {
    color: #56b6c2;
  }
  .highlight .k,
  .highlight .kc,
  .highlight .kd,
  .highlight .kn,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt {
    color: #c678dd;
  }
  .highlight .l,
  .highlight .ld,
  .highlight .s,
  .highlight .s1,
  .highlight .s2,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .se,
  .highlight .sh,
  .highlight .si,
  .highlight .sx {
    color: #98c379;
  }
  .highlight .nt,
  .highlight .nx,
  .highlight .vi {
    color: #e06c75;
  }
  .highlight .il,
  .highlight .m,
  .highlight .mf,
  .highlight .mh,
  .highlight .mi,
  .highlight .mo,
  .highlight .na {
    color: #d19a66;
  }
  .highlight .bp,
  .highlight .nb,
  .highlight .nc,
  .highlight .nd,
  .highlight .ne,
  .highlight .ni,
  .highlight .nl,
  .highlight .no,
  .highlight .nv,
  .highlight .py,
  .highlight .vc,
  .highlight .vg {
    color: #e5c07b;
  }
  // .highlight .err {
  //   color: #fff;
  //   background-color: #e05252;
  // }
  .highlight .gd {
    color: #e05252;
  }
  .highlight .gi {
    color: #43d08a;
  }
  .highlight .w {
    color: #f8f8f2;
  }
  .highlight .cpf {
    color: navy;
  }
  .highlight .gu {
    color: #75715e;
  }
  .highlight .lineno {
    color: #636d83;
    user-select: none;
  }
  .highlight .ln {
    color: #636d83;
    user-select: none;
  }
  .highlight .ln:after {
    content: " ";
  }
  .highlight .hll {
    color: #abb2bf;
    background-color: #3a3f4b;
  }
  .highlight .hl {
    color: #abb2bf;
    background-color: #3a3f4b;
  }
  .highlight .language-json .w + .s2 {
    color: #e06c75;
  }
  .highlight .language-json .kc {
    color: #56b6c2;
  }
}

@media screen {
  body.dark-mode {
    @include darkmode-syntax();
  }
}