From 556c932d879cc903be96889bd62bc51de5a92b71 Mon Sep 17 00:00:00 2001 From: David Robillard Date: Wed, 15 Jun 2022 13:04:55 -0400 Subject: Add dark mode style for documentation --- doc/doxy-style.css | 235 +++++++++++++++++++- doc/pygments.css | 619 +++++++++++++++++++++++++++++++++++++++++++++++------ doc/style.css | 115 ++++++++++ 3 files changed, 902 insertions(+), 67 deletions(-) (limited to 'doc') 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; + } +} -- cgit v1.2.1