@media (prefers-color-scheme: light) {
  :root {
    --code-font-color: #ca0e66; /*--body-font-color*/
    --code-backgroud-color: #f2f5f7; /*--gray-150*/
  }
  .chroma {
    color: var(--code-font-color);
  }
  .chroma .cl {
    color: var(--code-font-color);
  }
  .chroma .err {
    color: #d20f39;
  }
  .chroma .x {
    color: var(--code-font-color);
  }
  .chroma .lntd {
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: top;
  }
  .chroma .lntable {
    width: auto;
    border: 0;
    margin: 0;
    display: block;
    padding: 0;
    overflow: auto;
    border-spacing: 0;
  }
  .chroma .hl {
    width: 100%;
    display: block;
    background-color: #bcc0cc;
  }
  .chroma .lnt {
    color: #8c8fa1;
    padding: 0 0.4em 0 0.4em;
    font-size: 0.875rem;
    margin-right: 0.4em;
  }
  .chroma .ln {
    color: #8c8fa1;
    padding: 0 0.4em 0 0.4em;
    margin-right: 0.4em;
  }
  .chroma .k {
    color: #8839ef;
  }
  .chroma .kr {
    color: #8839ef;
  }
  .chroma .kp {
    color: #8839ef;
  }
  .chroma .kc {
    color: #fe640b;
  }
  .chroma .kd {
    color: #d20f39;
  }
  .chroma .kn {
    color: #179299;
  }
  .chroma .kt {
    color: #d20f39;
  }
  .chroma .n {
    color: var(--code-font-color);
  }
  .chroma .nc {
    color: #df8e1d;
  }
  .chroma .no {
    color: #df8e1d;
  }
  .chroma .nd {
    color: #1e66f5;
    font-weight: bold;
  }
  .chroma .ni {
    color: #179299;
  }
  .chroma .ne {
    color: #fe640b;
  }
  .chroma .nf {
    color: #1e66f5;
  }
  .chroma .fm {
    color: #1e66f5;
  }
  .chroma .nl {
    color: #04a5e5;
  }
  .chroma .nn {
    color: #fe640b;
  }
  .chroma .py {
    color: #fe640b;
  }
  .chroma .nt {
    color: #8839ef;
  }
  .chroma .nv {
    color: #dc8a78;
  }
  .chroma .vc {
    color: #dc8a78;
  }
  .chroma .vg {
    color: #dc8a78;
  }
  .chroma .vi {
    color: #dc8a78;
  }
  .chroma .vm {
    color: #dc8a78;
  }
  .chroma .na {
    color: #1e66f5;
  }
  .chroma .nb {
    color: #04a5e5;
  }
  .chroma .bp {
    color: #04a5e5;
  }
  .chroma .nx {
    color: var(--code-font-color);
  }
  .chroma .l {
    color: var(--code-font-color);
  }
  .chroma .ld {
    color: var(--code-font-color);
  }
  .chroma .s {
    color: #40a02b;
  }
  .chroma .sc {
    color: #40a02b;
  }
  .chroma .s1 {
    color: #40a02b;
  }
  .chroma .s2 {
    color: #40a02b;
  }
  .chroma .sb {
    color: #40a02b;
  }
  .chroma .sx {
    color: #40a02b;
  }
  .chroma .ss {
    color: #40a02b;
  }
  .chroma .si {
    color: #40a02b;
  }
  .chroma .sa {
    color: #d20f39;
  }
  .chroma .dl {
    color: #1e66f5;
  }
  .chroma .se {
    color: #1e66f5;
  }
  .chroma .sr {
    color: #179299;
  }
  .chroma .sd {
    color: #9ca0b0;
  }
  .chroma .sh {
    color: #9ca0b0;
  }
  .chroma .m {
    color: #fe640b;
  }
  .chroma .mb {
    color: #fe640b;
  }
  .chroma .mh {
    color: #fe640b;
  }
  .chroma .mi {
    color: #fe640b;
  }
  .chroma .mf {
    color: #fe640b;
  }
  .chroma .il {
    color: #fe640b;
  }
  .chroma .mo {
    color: #fe640b;
  }
  .chroma .o {
    color: #04a5e5;
    font-weight: bold;
  }
  .chroma .ow {
    color: #04a5e5;
    font-weight: bold;
  }
  .chroma .c {
    color: #9ca0b0;
    font-style: italic;
  }
  .chroma .c1 {
    color: #9ca0b0;
    font-style: italic;
  }
  .chroma .cm {
    color: #9ca0b0;
    font-style: italic;
  }
  .chroma .cs {
    color: #9ca0b0;
    font-style: italic;
  }
  .chroma .ch {
    color: #acb0be;
    font-style: italic;
  }
  .chroma .cp {
    color: #9ca0b0;
    font-style: italic;
  }
  .chroma .cpf {
    color: #9ca0b0;
    font-weight: bold;
  }
  .chroma .g {
    color: var(--code-font-color);
  }
  .chroma .gi {
    color: #40a02b;
    background-color: #ccd0da;
  }
  .chroma .gd {
    color: #d20f39;
    background-color: #ccd0da;
  }
  .chroma .ge {
    color: var(--code-font-color);
    font-style: italic;
  }
  .chroma .gs {
    color: var(--code-font-color);
    font-weight: bold;
  }
  .chroma .gl {
    color: var(--code-font-color);
    text-decoration: underline;
  }
  .chroma .gh {
    color: #fe640b;
    font-weight: bold;
  }
  .chroma .gu {
    color: #fe640b;
    font-weight: bold;
  }
  .chroma .go {
    color: var(--code-font-color);
  }
  .chroma .gp {
    color: var(--code-font-color);
  }
  .chroma .gr {
    color: #d20f39;
  }
  .chroma .gt {
    color: #d20f39;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-font-color: #f7bbd4; /*--body-font-color*/
    --code-backgroud-color: rgba(255, 255, 255, 0.1); /*--gray-150*/
  }
  .chroma {
    color: var(--code-font-color);
  }
  .chroma .cl {
    color: var(--code-font-color);
  }
  .chroma .err {
    color: #ed8796;
  }
  .chroma .x {
    color: var(--code-font-color);
  }
  .chroma .lntd {
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: top;
  }
  .chroma .lntable {
    width: auto;
    border: 0;
    margin: 0;
    display: block;
    padding: 0;
    overflow: auto;
    border-spacing: 0;
  }
  .chroma .hl {
    width: 100%;
    display: block;
    background-color: #494d64;
  }
  .chroma .lnt {
    color: #8087a2;
    padding: 0 0.4em 0 0.4em;
    font-size: 0.875rem;
    margin-right: 0.4em;
  }
  .chroma .ln {
    color: #8087a2;
    padding: 0 0.4em 0 0.4em;
    margin-right: 0.4em;
  }
  .chroma .k {
    color: #c6a0f6;
  }
  .chroma .kr {
    color: #c6a0f6;
  }
  .chroma .kp {
    color: #c6a0f6;
  }
  .chroma .kc {
    color: #f5a97f;
  }
  .chroma .kd {
    color: #ed8796;
  }
  .chroma .kn {
    color: #8bd5ca;
  }
  .chroma .kt {
    color: #ed8796;
  }
  .chroma .n {
    color: var(--code-font-color);
  }
  .chroma .nc {
    color: #eed49f;
  }
  .chroma .no {
    color: #eed49f;
  }
  .chroma .nd {
    color: #8aadf4;
    font-weight: bold;
  }
  .chroma .ni {
    color: #8bd5ca;
  }
  .chroma .ne {
    color: #f5a97f;
  }
  .chroma .nf {
    color: #8aadf4;
  }
  .chroma .fm {
    color: #8aadf4;
  }
  .chroma .nl {
    color: #91d7e3;
  }
  .chroma .nn {
    color: #f5a97f;
  }
  .chroma .py {
    color: #f5a97f;
  }
  .chroma .nt {
    color: #c6a0f6;
  }
  .chroma .nv {
    color: #f4dbd6;
  }
  .chroma .vc {
    color: #f4dbd6;
  }
  .chroma .vg {
    color: #f4dbd6;
  }
  .chroma .vi {
    color: #f4dbd6;
  }
  .chroma .vm {
    color: #f4dbd6;
  }
  .chroma .na {
    color: #8aadf4;
  }
  .chroma .nb {
    color: #91d7e3;
  }
  .chroma .bp {
    color: #91d7e3;
  }
  .chroma .nx {
    color: var(--code-font-color);
  }
  .chroma .l {
    color: var(--code-font-color);
  }
  .chroma .ld {
    color: var(--code-font-color);
  }
  .chroma .s {
    color: #a6da95;
  }
  .chroma .sc {
    color: #a6da95;
  }
  .chroma .s1 {
    color: #a6da95;
  }
  .chroma .s2 {
    color: #a6da95;
  }
  .chroma .sb {
    color: #a6da95;
  }
  .chroma .sx {
    color: #a6da95;
  }
  .chroma .ss {
    color: #a6da95;
  }
  .chroma .si {
    color: #a6da95;
  }
  .chroma .sa {
    color: #ed8796;
  }
  .chroma .dl {
    color: #8aadf4;
  }
  .chroma .se {
    color: #8aadf4;
  }
  .chroma .sr {
    color: #8bd5ca;
  }
  .chroma .sd {
    color: #acb5d8;
  }
  .chroma .sh {
    color: #acb5d8;
  }
  .chroma .m {
    color: #f5a97f;
  }
  .chroma .mb {
    color: #f5a97f;
  }
  .chroma .mh {
    color: #f5a97f;
  }
  .chroma .mi {
    color: #f5a97f;
  }
  .chroma .mf {
    color: #f5a97f;
  }
  .chroma .il {
    color: #f5a97f;
  }
  .chroma .mo {
    color: #f5a97f;
  }
  .chroma .o {
    color: #91d7e3;
    font-weight: bold;
  }
  .chroma .ow {
    color: #91d7e3;
    font-weight: bold;
  }
  .chroma .c {
    color: #acb5d8;
    font-style: italic;
  }
  .chroma .c1 {
    color: #acb5d8;
    font-style: italic;
  }
  .chroma .cm {
    color: #acb5d8;
    font-style: italic;
  }
  .chroma .cs {
    color: #acb5d8;
    font-style: italic;
  }
  .chroma .ch {
    color: #5b6078;
    font-style: italic;
  }
  .chroma .cp {
    color: #acb5d8;
    font-style: italic;
  }
  .chroma .cpf {
    color: #acb5d8;
    font-weight: bold;
  }
  .chroma .g {
    color: var(--code-font-color);
  }
  .chroma .gi {
    color: #a6da95;
    background-color: #363a4f;
  }
  .chroma .gd {
    color: #ed8796;
    background-color: #363a4f;
  }
  .chroma .ge {
    color: var(--code-font-color);
    font-style: italic;
  }
  .chroma .gs {
    color: var(--code-font-color);
    font-weight: bold;
  }
  .chroma .gl {
    color: var(--code-font-color);
    text-decoration: underline;
  }
  .chroma .gh {
    color: #f5a97f;
    font-weight: bold;
  }
  .chroma .gu {
    color: #f5a97f;
    font-weight: bold;
  }
  .chroma .go {
    color: var(--code-font-color);
  }
  .chroma .gp {
    color: var(--code-font-color);
  }
  .chroma .gr {
    color: #ed8796;
  }
  .chroma .gt {
    color: #ed8796;
  }
}