Add dark mode style for documentation

3 files changed, 902 insertions, 67 deletions

diff --git a/doc/doxy-style.css b/doc/doxy-style.css
index 219da02..b44675e 100644
--- a/doc/doxy-style.css
+++ b/doc/doxy-style.css
@@ -1,6 +1,9 @@
-body {
+html {
   background: #FFF;
   color: #222;
+}
+
+body {
   font-style: normal;
   line-height: 1.6em;
   margin-left: auto;
@@ -186,10 +189,6 @@ div.navtab {
   margin-right: 15px;
 }
 
-.contents a:visited {
-  color: #344E00;
-}
-
 a.qindexHL {
   background-color: #9CAFD4;
   color: #FFF;
@@ -526,7 +525,6 @@ td.mlabels-right {
   margin-top: 0;
   padding-top: 0.25em;
   font-weight: normal;
-  color: #444;
   font-size: 0.9em;
 }
 
@@ -862,3 +860,228 @@ th {
 span.icon {
   display: none;
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  html {
+    background: #222;
+    color: #DDD;
+  }
+
+  a {
+    color: #B4C342;
+  }
+
+  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    color: #DDD;
+  }
+
+  h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
+    color: #DDD;
+  }
+
+  h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
+    color: #DDD;
+  }
+
+  #header {
+    border-bottom-color: #333;
+  }
+
+  #title {
+    color: #CCC;
+  }
+
+  #shortdesc {
+    color: #BBB;
+  }
+
+  code {
+    color: #DDD;
+  }
+
+  pre.fragment {
+    border: 1px solid #444;
+    background-color: #333;
+  }
+
+  div.ah {
+    background-color: #000;
+    color: #FFF;
+    border-color: #333;
+  }
+
+  .groupheader + p {
+    color: #BBB;
+  }
+
+  td.indexkey {
+    background-color: #EBEFF6;
+    border: 1px solid #C4CFE5;
+  }
+
+  td.indexvalue {
+    background-color: #EBEFF6;
+    border: 1px solid #C4CFE5;
+  }
+
+  tr.memlist {
+    background-color: #EEF1F7;
+  }
+
+  span.keyword {
+    color: #586E75;
+  }
+
+  span.keywordtype {
+    color: #546E00;
+  }
+
+  span.keywordflow {
+    color: #586E75;
+  }
+
+  span.comment {
+    color: #6C71C4;
+  }
+
+  span.preprocessor {
+    color: #D33682;
+  }
+
+  span.stringliteral {
+    color: #CB4B16;
+  }
+
+  span.charliteral {
+    color: #CB4B16;
+  }
+
+  .dirtab {
+    border: 1px solid #A3B4D7;
+  }
+
+  th.dirtab {
+    background: #EBEFF6;
+  }
+
+  hr {
+    border-top: 1px solid #DDD;
+  }
+
+  #footer {
+    color: #888;
+  }
+
+  .mdescLeft,.mdescRight {
+    color: #555;
+  }
+
+  .memTemplParams {
+    color: #464646;
+  }
+
+  td.mlabels-right {
+    color: #B4C342;
+  }
+
+  .memtitle {
+    border-bottom: 1px solid #666;
+  }
+
+  .memtemplate {
+    color: #888;
+  }
+
+  .memnav {
+    background-color: #666;
+    border: 1px solid #B4C342;
+  }
+
+  .memproto {
+    border-bottom: 1px solid #666;
+    border-left: 1px solid #666;
+    color: #BBB;
+  }
+
+  .memdoc > p:first-child, .memdoc .textblock > p:first-child {
+    color: #BBB;
+  }
+
+  .memdoc > p:first-child, .memdoc .textblock > h3:first-child {
+    color: #BBB;
+  }
+
+  .paramtype {
+    color: #BBB;
+  }
+
+  .params .paramname {
+    color: #E8E8E8;
+  }
+
+  .fieldname {
+    color: #FFF;
+  }
+
+  .fieldtable tbody tr td {
+    border-top-color: #555;
+    border-bottom-color: #555;
+  }
+
+  td.fieldtype {
+    color: #BBB;
+  }
+
+  .arrow {
+    color: #666;
+  }
+
+  address {
+    color: #444;
+  }
+
+  table.doxtable td,table.doxtable th {
+    border-color: #DDD;
+  }
+
+  table.doxtable th {
+    background-color: #F3F3F3;
+    color: #000;
+  }
+
+  div.navpath {
+    color: #444;
+  }
+
+  #metabox {
+    color: #666;
+  }
+
+  .glow {
+    background-color: #00736F;
+    box-shadow: 0 0 10px #00736F;
+  }
+
+  span.lineno {
+    border-right: 2px solid #B4C342;
+    background-color: #383838;
+  }
+
+  span.lineno a {
+    background-color: #404040;
+  }
+
+  span.lineno a:hover {
+    background-color: #484848;
+  }
+
+}
+
+/* Hard black for dark mode on mobile (since it's likely to be an OLED screen) */
+@media only screen and (hover: none) and (pointer: coarse) and (prefers-color-scheme: dark) {
+  html {
+    background: #000;
+    color: #CCC;
+  }
+}
diff --git a/doc/pygments.css b/doc/pygments.css
index 4fb3387..2472b1a 100644
--- a/doc/pygments.css
+++ b/doc/pygments.css
@@ -1,61 +1,558 @@
-.c { color: #6C71C4; font-style: italic } /* Comment */
-.err { border: 1px solid #DC322F } /* Error */
-.k { color: #888888 } /* Keyword */
-.o { color: #839496 } /* Operator */
-.cm { color: #6C71C4; font-style: italic } /* Comment.Multiline */
-.cp { color: #D33682 } /* Comment.Preproc */
-.c1 { color: #6C71C4; font-style: italic } /* Comment.Single */
-.cs { color: #6C71C4; font-style: italic } /* Comment.Special */
-.gd { color: #A00000 } /* Generic.Deleted */
-.ge { font-style: italic } /* Generic.Emph */
-.gr { color: #DC322F } /* Generic.Error */
-.gh { color: #6C71C4; font-weight: bold } /* Generic.Heading */
-.gi { color: #859900 } /* Generic.Inserted */
-.go { color: #808080 } /* Generic.Output */
-.gp { color: #268BD2; font-weight: bold } /* Generic.Prompt */
-.gs { font-weight: bold } /* Generic.Strong */
-.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.gt { color: #0040D0 } /* Generic.Traceback */
-.kc { color: #586E75; font-weight: bold } /* Keyword.Constant */
-.kd { color: #586E75; font-weight: bold } /* Keyword.Declaration */
-.kn { color: #586E75; font-weight: bold } /* Keyword.Namespace */
-.kp { color: #586E75 } /* Keyword.Pseudo */
-.kr { color: #586E75; font-weight: bold } /* Keyword.Reserved */
-.kt { color: #546E00 } /* Keyword.Type */
-.m { color: #666666 } /* Literal.Number */
-.s { color: #CB4B16 } /* Literal.String */
-.na { color: #7D9029 } /* Name.Attribute */
-.nb { color: #008000 } /* Name.Builtin */
-.nc { color: #000000; } /* Name.Class */
-.no { color: #880000 } /* Name.Constant */
-.nd { color: #AA22FF } /* Name.Decorator */
-.ni { color: #999999; font-weight: bold } /* Name.Entity */
-.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
-.nf { color: #000000; } /* Name.Function */
-.nl { color: #A0A000 } /* Name.Label */
-.nn { color: #555555 } /* Name.Namespace */
-.nt { color: #223322; } /* Name.Tag */
-.nv { color: #222222 } /* Name.Variable */
-.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #000000 } /* Literal.Number.Float */
-.mh { color: #000000 } /* Literal.Number.Hex */
-.mi { color: #000000 } /* Literal.Number.Integer */
-.mo { color: #000000 } /* Literal.Number.Oct */
-.sb { color: #CB4B16 } /* Literal.String.Backtick */
-.sc { color: #CB4B16 } /* Literal.String.Char */
-.sd { color: #CB4B16; font-style: italic } /* Literal.String.Doc */
-.s2 { color: #CB4B16 } /* Literal.String.Double */
-.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.sh { color: #CB4B16 } /* Literal.String.Heredoc */
-.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.sx { color: #008000 } /* Literal.String.Other */
-.sr { color: #BB6688 } /* Literal.String.Regex */
-.s1 { color: #CB4B16 } /* Literal.String.Single */
-.ss { color: #00629D } /* Literal.String.Symbol */
-.bp { color: #008000 } /* Name.Builtin.Pseudo */
-.vc { color: #00629D } /* Name.Variable.Class */
-.vg { color: #00629D } /* Name.Variable.Global */
-.vi { color: #00629D } /* Name.Variable.Instance */
-.il { color: #666666 } /* Literal.Number.Integer.Long */
-.p { color: #888888 } /* Punctuation */
+/* Light (default) theme */
+
+.n {
+  color: #222;
+}
+
+.c {
+  color: #3F4D91;
+  font-style: italic;
+}
+
+.err {
+  border: 1px solid #DC322F;
+}
+
+.k {
+  color: #586E75;
+}
+
+.o {
+  color: #586E75;
+}
+
+.cm {
+  color: #3F4D91;
+  font-style: italic;
+}
+
+.cp {
+  color: #586E75;
+}
+
+.cpf {
+  color: #93115C;
+}
+
+.c1 {
+  color: #3F4D91;
+  font-style: italic;
+}
+
+.cs {
+  color: #3F4D91;
+  font-style: italic;
+}
+
+.gd {
+  color: #990A1B;
+}
+
+.ge {
+  font-style: italic;
+}
+
+.gr {
+  color: #DC322F;
+}
+
+.gh {
+  color: #3F4D91;
+  font-weight: bold;
+}
+
+.gi {
+  color: #859900;
+}
+
+.go {
+  color: #666;
+}
+
+.gp {
+  color: #666;
+  font-weight: bold;
+}
+
+.gs {
+  font-weight: bold;
+}
+
+.gu {
+  color: #444;
+  font-weight: bold;
+}
+
+.gt {
+  color: #268BD2;
+}
+
+.kc {
+  color: #586E75;
+  font-weight: bold;
+}
+
+.kd {
+  color: #586E75;
+  font-weight: bold;
+}
+
+.kn {
+  color: #586E75;
+  font-weight: bold;
+}
+
+.kp {
+  color: #586E75;
+}
+
+.kr {
+  color: #586E75;
+  font-weight: bold;
+}
+
+.kt {
+  color: #586E75;
+}
+
+.m {
+  color: #666;
+}
+
+.s {
+  color: #93115C;
+}
+
+.na {
+  color: #444;
+}
+
+.nb {
+  color: #3F4D91;
+}
+
+.nc {
+  color: #000;
+}
+
+.no {
+  color: #880;
+}
+
+.nd {
+  color: #A2F;
+}
+
+.ni {
+  color: #666;
+  font-weight: bold;
+}
+
+.ne {
+  color: #D2413A;
+  font-weight: bold;
+}
+
+.nf {
+  color: #000;
+}
+
+.nl {
+  color: #546E00;
+}
+
+.nn {
+  color: #444;
+}
+
+.nt {
+  color: #444;
+}
+
+.nv {
+  color: #222;
+}
+
+.ow {
+  color: #3F4D91;
+}
+
+.w {
+  color: #BBB;
+}
+
+.mb {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.mf {
+  color: #93115C;
+}
+
+.mh {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.mi {
+  color: #93115C;
+}
+
+.mo {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.sb {
+  color: #93115C;
+}
+
+.sc {
+  color: #93115C;
+}
+
+.sd {
+  color: #3F4D91;
+  font-style: italic;
+}
+
+.s2 {
+  color: #93115C;
+}
+
+.se {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.sh {
+  color: #93115C;
+}
+
+.si {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.sx {
+  color: #93115C;
+}
+
+.sr {
+  color: #93115C;
+  font-weight: bold;
+}
+
+.s1 {
+  color: #93115C;
+}
+
+.ss {
+  color: #444;
+  font-weight: bold;
+}
+
+.bp {
+  color: #859900;
+}
+
+.vc {
+  color: #00629D;
+}
+
+.vg {
+  color: #00629D;
+}
+
+.vi {
+  color: #00629D;
+}
+
+.il {
+  color: #000;
+}
+
+.p {
+  color: #444;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  .n {
+    color: #BBB;
+  }
+
+  .c {
+    color: #6C71C4;
+    font-style: italic;
+  }
+
+  .err {
+    border: 1px solid #FF6E64;
+  }
+
+  .k {
+    color: #93A1A1;
+  }
+
+  .o {
+    color: #93A1A1;
+  }
+
+  .cm {
+    color: #6C71C4;
+    font-style: italic;
+  }
+
+  .cp {
+    color: #93A1A1;
+  }
+
+  .cpf {
+    color: #D33682;
+  }
+
+  .c1 {
+    color: #6C71C4;
+    font-style: italic;
+  }
+
+  .cs {
+    color: #6C71C4;
+    font-style: italic;
+  }
+
+  .gd {
+    color: #DC322F;
+  }
+
+  .ge {
+    font-style: italic;
+  }
+
+  .gr {
+    color: #FF6E64;
+  }
+
+  .gh {
+    color: #6C71C4;
+    font-weight: bold;
+  }
+
+  .gi {
+    color: #859900;
+  }
+
+  .go {
+    color: #666;
+  }
+
+  .gp {
+    color: #666;
+    font-weight: bold;
+  }
+
+  .gs {
+    font-weight: bold;
+  }
+
+  .gu {
+    color: #BBB;
+    font-weight: bold;
+  }
+
+  .gt {
+    color: #69B7F0;
+  }
+
+  .kc {
+    color: #93A1A1;
+    font-weight: bold;
+  }
+
+  .kd {
+    color: #93A1A1;
+    font-weight: bold;
+  }
+
+  .kn {
+    color: #93A1A1;
+    font-weight: bold;
+  }
+
+  .kp {
+    color: #93A1A1;
+  }
+
+  .kr {
+    color: #93A1A1;
+    font-weight: bold;
+  }
+
+  .kt {
+    color: #93A1A1;
+  }
+
+  .m {
+    color: #999;
+  }
+
+  .s {
+    color: #D33682;
+  }
+
+  .na {
+    color: #BBB;
+  }
+
+  .nb {
+    color: #6C71C4;
+  }
+
+  .nc {
+    color: #FFF;
+  }
+
+  .no {
+    color: #880;
+  }
+
+  .nd {
+    color: #A2F;
+  }
+
+  .ni {
+    color: #999;
+    font-weight: bold;
+  }
+
+  .ne {
+    color: #D2413A;
+    font-weight: bold;
+  }
+
+  .nf {
+    color: #FFF;
+  }
+
+  .nl {
+    color: #546E00;
+  }
+
+  .nn {
+    color: #BBB;
+  }
+
+  .nt {
+    color: #BBB;
+  }
+
+  .nv {
+    color: #DDD;
+  }
+
+  .ow {
+    color: #6C71C4;
+  }
+
+  .w {
+    color: #BBB;
+  }
+
+  .mb {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .mf {
+    color: #D33682;
+  }
+
+  .mh {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .mi {
+    color: #D33682;
+  }
+
+  .mo {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .sb {
+    color: #D33682;
+  }
+
+  .sc {
+    color: #D33682;
+  }
+
+  .sd {
+    color: #6C71C4;
+    font-style: italic;
+  }
+
+  .s2 {
+    color: #D33682;
+  }
+
+  .se {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .sh {
+    color: #D33682;
+  }
+
+  .si {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .sx {
+    color: #D33682;
+  }
+
+  .sr {
+    color: #D33682;
+    font-weight: bold;
+  }
+
+  .s1 {
+    color: #D33682;
+  }
+
+  .ss {
+    color: #BBB;
+    font-weight: bold;
+  }
+
+  .bp {
+    color: #859900;
+  }
+
+  .vc {
+    color: #268BD2;
+  }
+
+  .vg {
+    color: #268BD2;
+  }
+
+  .vi {
+    color: #268BD2;
+  }
+
+  .il {
+    color: #FFF;
+  }
+
+  .p {
+    color: #BBB;
+  }
+}
diff --git a/doc/style.css b/doc/style.css
index cd9ee0e..fca399e 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -688,3 +688,118 @@ div.head table {
 .highlight, .codehilite {
   margin-left: 2em;
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  /* Dark generic page style */
+
+  html {
+    background: #222;
+    color: #DDD;
+  }
+
+  a {
+    color: #B4C342;
+  }
+
+  a:link {
+    color: #B4C342;
+  }
+
+  a:visited {
+    color: #B4C342;
+  }
+
+  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    color: #DDD;
+  }
+
+  h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
+    color: #DDD;
+  }
+
+  h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
+    color: #DDD;
+  }
+
+  blockquote {
+    border-left: 1px solid #444;
+  }
+
+  pre, code, kbd, samp {
+    color: #DDD;
+  }
+
+  hr {
+    background-color: #333;
+    border: 0;
+    color: #666;
+  }
+
+  th {
+    border: 1px solid #444;
+  }
+
+  td {
+    border: 1px solid #444;
+  }
+
+  footer {
+    color: #BBB;
+  }
+
+  /* Dark specgen style */
+
+  #metabox {
+    color: #999;
+  }
+
+  #shortdesc {
+    color: #999;
+  }
+
+  #titlesep {
+    color: #444;
+  }
+
+  .terminfo, .restriction {
+    color: #999;
+  }
+
+  table.terminfo {
+    border-bottom: 1px solid #444;
+    border-left: 1px solid #444;
+  }
+
+  .spectermbody {
+    border-top: 1px solid #444;
+  }
+
+  .spectermbody .description .comment > p:first-child {
+    color: #BBB;
+  }
+
+  .error {
+    color: #DC322F;
+  }
+
+  .warning {
+    color: #B58900;
+  }
+
+  .success {
+    color: #859900;
+  }
+
+  #topbar {
+    border-bottom: 1px solid #444;
+  }
+}
+
+/* Hard black for dark mode on mobile (since it's likely to be an OLED screen) */
+@media only screen and (hover: none) and (pointer: coarse) and (prefers-color-scheme: dark) {
+  html {
+    background: #000;
+    color: #CCC;
+  }
+}