web-idl-style-darkmode.css

/* style-darkmode */

@media (prefers-color-scheme: dark) {
  :root {
    --text: #ddd;
    --bg: black;

    --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E");

    --logo-bg: #1a5e9a;
    --logo-active-bg: #c00;
    --logo-text: white;

    --tocnav-normal-text: #999;
    --tocnav-normal-bg: var(--bg);
    --tocnav-hover-text: var(--tocnav-normal-text);
    --tocnav-hover-bg: #080808;
    --tocnav-active-text: #f44;
    --tocnav-active-bg: var(--tocnav-normal-bg);

    --tocsidebar-text: var(--text);
    --tocsidebar-bg: #080808;
    --tocsidebar-shadow: rgba(255, 255, 255, 0.1);
    --tocsidebar-heading-text: hsla(203, 20%, 40%, 0.7);

    --toclink-text: var(--text);
    --toclink-underline: #6af;
    --toclink-visited-text: var(--toclink-text);
    --toclink-visited-underline: #054572;

    --heading-text: #8af;

    --hr-text: var(--text);

    --algo-border: #456;

    --del-text: #f44;
    --del-bg: transparent;
    --ins-text: #4a4;
    --ins-bg: transparent;

    --a-normal-text: #6af;
    --a-normal-underline: #555;
    --a-visited-text: var(--a-normal-text);
    --a-visited-underline: var(--a-normal-underline);
    --a-hover-bg: rgba(25%, 25%, 25%, 0.2);
    --a-active-text: #f44;
    --a-active-underline: var(--a-active-text);

    --borderedblock-bg: rgba(255, 255, 255, 0.05);

    --blockquote-border: silver;
    --blockquote-bg: var(--borderedblock-bg);
    --blockquote-text: currentcolor;

    --issue-border: #e05252;
    --issue-bg: var(--borderedblock-bg);
    --issue-text: var(--text);
    --issueheading-text: hsl(0deg, 70%, 70%);

    --example-border: hsl(50deg, 90%, 60%);
    --example-bg: var(--borderedblock-bg);
    --example-text: var(--text);
    --exampleheading-text: hsl(50deg, 70%, 70%);

    --note-border: hsl(120deg, 100%, 35%);
    --note-bg: var(--borderedblock-bg);
    --note-text: var(--text);
    --noteheading-text: hsl(120, 70%, 70%);
    --notesummary-underline: silver;

    --assertion-border: #444;
    --assertion-bg: var(--borderedblock-bg);
    --assertion-text: var(--text);

    --advisement-border: orange;
    --advisement-bg: #222218;
    --advisement-text: var(--text);
    --advisementheading-text: #f84;

    --warning-border: red;
    --warning-bg: hsla(40, 100%, 20%, 0.95);
    --warning-text: var(--text);

    --amendment-border: #330099;
    --amendment-bg: #080010;
    --amendment-text: var(--text);
    --amendmentheading-text: #cc00ff;

    --def-border: #8ccbf2;
    --def-bg: #080818;
    --def-text: var(--text);
    --defrow-border: #136;

    --datacell-border: silver;

    --indexinfo-text: #aaa;

    --indextable-hover-text: var(--text);
    --indextable-hover-bg: #181818;

    --outdatedspec-bg: rgba(255, 255, 255, 0.5);
    --outdatedspec-text: black;
    --outdated-bg: maroon;
    --outdated-text: white;
    --outdated-shadow: red;

    --editedrec-bg: darkorange;
  }
  /* In case a transparent-bg image doesn't expect to be on a dark bg,
 which is quite common in practice... */
  img {
    background: white;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --selflink-text: black;
    --selflink-bg: silver;
    --selflink-hover-text: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --dfnpanel-bg: #222;
    --dfnpanel-text: var(--text);
  }
}
@media (prefers-color-scheme: dark) {
  .highlight:not(.idl) {
    background: rgba(255, 255, 255, 0.05);
  }

  c-[a] {
    color: #d33682;
  } /* Keyword.Declaration */
  c-[b] {
    color: #d33682;
  } /* Keyword.Type */
  c-[c] {
    color: #2aa198;
  } /* Comment */
  c-[d] {
    color: #2aa198;
  } /* Comment.Multiline */
  c-[e] {
    color: #268bd2;
  } /* Name.Attribute */
  c-[f] {
    color: #b58900;
  } /* Name.Tag */
  c-[g] {
    color: #cb4b16;
  } /* Name.Variable */
  c-[k] {
    color: #d33682;
  } /* Keyword */
  c-[l] {
    color: #657b83;
  } /* Literal */
  c-[m] {
    color: #657b83;
  } /* Literal.Number */
  c-[n] {
    color: #268bd2;
  } /* Name */
  c-[o] {
    color: #657b83;
  } /* Operator */
  c-[p] {
    color: #657b83;
  } /* Punctuation */
  c-[s] {
    color: #6c71c4;
  } /* Literal.String */
  c-[t] {
    color: #6c71c4;
  } /* Literal.String.Single */
  c-[u] {
    color: #6c71c4;
  } /* Literal.String.Double */
  c-[ch] {
    color: #2aa198;
  } /* Comment.Hashbang */
  c-[cp] {
    color: #2aa198;
  } /* Comment.Preproc */
  c-[cpf] {
    color: #2aa198;
  } /* Comment.PreprocFile */
  c-[c1] {
    color: #2aa198;
  } /* Comment.Single */
  c-[cs] {
    color: #2aa198;
  } /* Comment.Special */
  c-[kc] {
    color: #d33682;
  } /* Keyword.Constant */
  c-[kn] {
    color: #d33682;
  } /* Keyword.Namespace */
  c-[kp] {
    color: #d33682;
  } /* Keyword.Pseudo */
  c-[kr] {
    color: #d33682;
  } /* Keyword.Reserved */
  c-[ld] {
    color: #657b83;
  } /* Literal.Date */
  c-[nc] {
    color: #268bd2;
  } /* Name.Class */
  c-[no] {
    color: #268bd2;
  } /* Name.Constant */
  c-[nd] {
    color: #268bd2;
  } /* Name.Decorator */
  c-[ni] {
    color: #268bd2;
  } /* Name.Entity */
  c-[ne] {
    color: #268bd2;
  } /* Name.Exception */
  c-[nf] {
    color: #268bd2;
  } /* Name.Function */
  c-[nl] {
    color: #268bd2;
  } /* Name.Label */
  c-[nn] {
    color: #268bd2;
  } /* Name.Namespace */
  c-[py] {
    color: #268bd2;
  } /* Name.Property */
  c-[ow] {
    color: #657b83;
  } /* Operator.Word */
  c-[mb] {
    color: #657b83;
  } /* Literal.Number.Bin */
  c-[mf] {
    color: #657b83;
  } /* Literal.Number.Float */
  c-[mh] {
    color: #657b83;
  } /* Literal.Number.Hex */
  c-[mi] {
    color: #657b83;
  } /* Literal.Number.Integer */
  c-[mo] {
    color: #657b83;
  } /* Literal.Number.Oct */
  c-[sa] {
    color: #6c71c4;
  } /* Literal.String.Affix */
  c-[sb] {
    color: #6c71c4;
  } /* Literal.String.Backtick */
  c-[sc] {
    color: #6c71c4;
  } /* Literal.String.Char */
  c-[dl] {
    color: #6c71c4;
  } /* Literal.String.Delimiter */
  c-[sd] {
    color: #6c71c4;
  } /* Literal.String.Doc */
  c-[se] {
    color: #6c71c4;
  } /* Literal.String.Escape */
  c-[sh] {
    color: #6c71c4;
  } /* Literal.String.Heredoc */
  c-[si] {
    color: #6c71c4;
  } /* Literal.String.Interpol */
  c-[sx] {
    color: #6c71c4;
  } /* Literal.String.Other */
  c-[sr] {
    color: #6c71c4;
  } /* Literal.String.Regex */
  c-[ss] {
    color: #6c71c4;
  } /* Literal.String.Symbol */
  c-[fm] {
    color: #268bd2;
  } /* Name.Function.Magic */
  c-[vc] {
    color: #cb4b16;
  } /* Name.Variable.Class */
  c-[vg] {
    color: #cb4b16;
  } /* Name.Variable.Global */
  c-[vi] {
    color: #cb4b16;
  } /* Name.Variable.Instance */
  c-[vm] {
    color: #cb4b16;
  } /* Name.Variable.Magic */
  c-[il] {
    color: #657b83;
  } /* Literal.Number.Integer.Long */
}