From 9a91a726625b9c610d424934b1eea960abfc5264 Mon Sep 17 00:00:00 2001 From: Pascal Abresch Date: Fri, 17 Feb 2023 21:48:10 +0100 Subject: [PATCH] Api docs: dark mode Change-Id: I46538353f38902b58937286a9e32167424fc7d0e Reviewed-on: https://review.haiku-os.org/c/haiku/+/6074 Reviewed-by: nephele Reviewed-by: waddlesplash --- docs/user/book.css | 284 ++++++++++++++++++++++++++++++--------------- 1 file changed, 189 insertions(+), 95 deletions(-) diff --git a/docs/user/book.css b/docs/user/book.css index 90156cad11..f0e633d1c7 100644 --- a/docs/user/book.css +++ b/docs/user/book.css @@ -1,5 +1,5 @@ /* - * Copyright 2008-2013, 2020 Haiku, Inc. All rights reserved. + * Copyright 2008-2013, 2020, 2023 Haiku, Inc. All rights reserved. * Distributed under the terms of the MIT License. * * Authors: @@ -9,13 +9,14 @@ * Humdinger, humdingerb@gmail.com * John Scipione, jscipione@gmail.com * Niels Sascha Reedijk, niels.reedijk@gmail.com + * Pascal R. G. Abresch */ /* color names provided by: https://chir.ag/projects/name-that-color */ /* This stylesheet is designed to override the base style sheet doxygen.css - for Doxygen 1.8.20. + for Doxygen 1.9.6. Some principles: * Normal fonts are "Noto Sans",Arial,sans-serif @@ -25,6 +26,94 @@ * A selection of specific colors for borders, links, and other visual elements */ +/* don't use @media (prefers-color-scheme: light) here, so it runs correctly in browsers that don't + understand it and thus expect a light mode as is the default for html */ +:root { + color-scheme: light dark; + + --CanvasBackground: Canvas; + --CanvasText: CanvasText; + --LinkText: #dc3c01; /* grenadier */ + --VisitedLinkText: #892601; /* peru tan */ + --TableBackground: #ff4500; /* vermilion */ + --TableHeaderBackground: #e0e0e0; + --MenuColor: #24225e; + --ActiveLinkText: #ff4500; /* vermilion */ + --HeaderText: #0c3762; /* madison */ + --ButtonBackground: #e8e8e8; + --ButtonBorder: #c7c7c7; + --InfoBackground: #e4ffde; + --WarningBackground: #fffbc6; + --StopBackground: #ffeae6; + --SecondaryCanvas: #e0e0e0; /* alto */ + --TertiaryCanvas: #f3f3f3; /* concrete */ + --TertiaryCanvasText: #c0c0c0; /* silver */ + + --Blue: blue; +} + +@media (prefers-color-scheme: dark) { + :root { + --LinkText: #f24000; + --VisitedLinkText: #bf3401; + --ActiveLinkText: #ff4500; + --HeaderText: #0b95c6; + --ButtonBorder: #666; + --InfoBackground: #0d2f3f; + --WarningBackground: #453b07; + --StopBackground: #4d0000; + --MenuColor: #5c57f2; + --TertiaryCanvasText: #c0c0c0; + --CanvasText: #DDD; + --ButtonBackground: #444; + --SecondaryCanvas: #222; + --TertiaryCanvas: #131313; + --Blue: #87cefa; + } + + @media (prefers-contrast: more) { + :root { + --CanvasText: #EFEFEF; + --ButtonBackground: #222; + --SecondaryCanvas: #111; + --TertiaryCanvas: #080808; + } + } + @media (prefers-contrast: less) { + :root { + --CanvasText: #AAA; + --ButtonBackground: #444; + } + } +} + + +@media (forced-colors: active) { + :root { + /* Userguide specific */ + /* "Normal values" */ + --HeaderText: LinkText; + --CanvasBackground: Canvas; + --CanvasText: CanvasText; + --LinkText: LinkText; + --VisitedLinkText: VisitedText; + --ActiveLinkText: ActiveText; + --ButtonBackground: ButtonFace; + --ButtonBorder: ButtonBorder; + --InputBackground: Field; + --InputText: FieldText; + --HighlightBackground: Highlight; + --HighlightText: HighlightText; + --SelectedBackground: SelectedItem; + --SelectedText: SelectedItemText; + --MarkBackground: Mark; + --MarkText: MarkText; + --DisabledText: GrayText; + } +} + + + /* Override font selections */ body, table, div, p, dl { @@ -109,12 +198,12 @@ div.toc { /* Colors and headers */ body { - color: #333333; /* mine shaft */ - background-color: white; + color: var(--CanvasText); + background-color: var(--CanvasBackground); } h1, h2, h3, h4, h5, h6 { - color: #0c3762; /* madison */ + color: var(--HeaderText); margin-top: 1em; margin-bottom: 1em; margin-right: 0; @@ -123,19 +212,19 @@ h1, h2, h3, h4, h5, h6 { h1 { font-size: 1.3em; font-weight: bold; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); } h2 { font-size: 1.3em; font-weight: normal; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); } h3 { font-size: 1.2em; font-weight: normal; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); } h4 { @@ -149,10 +238,10 @@ h5, h6 { } .title { - color: #0c3762; /* madison */ + color: var(--HeaderText); font-size: 1.3em; font-weight: bold; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); margin-top: 1em; margin-bottom: 1em; } @@ -160,8 +249,8 @@ h5, h6 { h2.groupheader, h2.memtitle { font-size: 1.3em; border: none; - border-bottom: dotted thin #c0c0c0; /* silver */ - color: #0c3762; + border-bottom: dotted thin var(--TertiaryCanvasText); + color: var(--HeaderText); margin-top: 1em; padding: 0; background: none; @@ -172,7 +261,7 @@ h2.groupheader, h2.memtitle { } th.dirtab { - background-color: #f3f3f3; /* concrete */ + background-color: var(--TertiaryCanvas); } /* Links */ @@ -180,18 +269,18 @@ th.dirtab { a:link { font-weight: bold; text-decoration: none; - color: #dc3c01; /* grenadier */ + color: var(--LinkText); } .contents a:visited { font-weight: bold; text-decoration: none; - color: #892601; /* peru tan */ + color: var(--VisitedLinkText); } a:hover, a:active { text-decoration: underline; - color: #ff4500; /* vermilion */ + color: var(--ActiveLinkText); } /* Some headers act as anchors, don't give them a hover effect */ @@ -199,7 +288,7 @@ a:hover, a:active { h1 a:hover, a:active, h2 a:hover, a:active, h3 a:hover, a:active, h4 a:hover, a:active, h5 a:hover, a:active, h6 a:hover, a:active { text-decoration: none; - color: #0c3762; /* madison */ + color: var(--HeaderText); } /* Custom Header */ @@ -209,7 +298,7 @@ h4 a:hover, a:active, h5 a:hover, a:active, h6 a:hover, a:active { top: 0; left: 0; height: 84px; - background: #eeeeee; /* gallery */ + background: var(--TertiaryCanvas); } #banner div.logo { @@ -220,11 +309,17 @@ h4 a:hover, a:active, h5 a:hover, a:active, h6 a:hover, a:active { margin: 0 auto; } +@media (prefers-color-scheme: dark) { + #banner div.logo { + background: url('/images/HaikuDark.svg') no-repeat scroll 6px 8px, url('/images/LeafDark.png') no-repeat scroll 10px 0; + } +} + #banner span.subtitle { position: relative; top: 48px; left: 272px; - color: #333333; /* mine shaft */ + color: var(--CanvasText); text-transform: uppercase; letter-spacing: 3px; font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif; @@ -266,10 +361,10 @@ div.headertitle { } div.headertitle div.title { - color: #0c3762; /* madison */ + color: var(--HeaderText); font-size: 1.3em; font-weight: bold; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); margin-top: 1em; margin-bottom: 1em; } @@ -297,7 +392,7 @@ dl.since dd { /* Navigation Tabs (overrides tabs.css) */ .sm-dox { - background: #e0e0e0; /* alto */ + background: var(--SecondaryCanvas); padding: 0; } @@ -315,20 +410,20 @@ dl.since dd { .sm-dox a, .sm-dox ul a, .sm-dox a:visited, .sm-dox ul a:visited, .sm-dox a:link, .sm-dox ul a:link { background-image: none; - color: #dc3c01; /* grenadier */ + color: var(--LinkText); text-shadow: none; } .sm-dox a:hover, .sm-dox ul a:hover { - background-color: #e0e0e0; /* alto */ + background-color: var(--SecondaryCanvas); background-image: none; - color: #ff4500; /* vermilion */ + color: var(--TableBackground); text-decoration: underline; text-shadow: none; } .sm-dox a:active, .sm-dox ul a:active { - color: #0c3762; /* madison */ + color: var(--HeaderText); text-decoration: none; text-shadow: none; } @@ -336,51 +431,51 @@ dl.since dd { .sm-dox a:focus, .sm-dox ul a:focus, .sm-dox a.highlighted, .sm-dox ul a.highlighted { background-image: none; - color: #ff4500; /* vermilion */ + color: var(--TableBackground); text-shadow: none; } @media (min-width: 768px) { .sm-dox a span.sub-arrow { - border-top-color: #dc3c01; /* grenadier */ + border-top-color: var(--LinkText); } .sm-dox ul a span.sub-arrow { - border-left-color: #dc3c01; /* grenadier */ + border-left-color: var(--LinkText); } } .sm-dox span.scroll-up-arrow { - border-bottom-color: #dc3c01; /* grenadier */ + border-bottom-color: var(--LinkText); } .sm-dox span.scroll-down-arrow { - border-top-color: #dc3c01; /* grenadier */ + border-top-color: var(--LinkText); } @media (min-width: 768px) { .sm-dox a:hover span.sub-arrow { - border-top-color: #ff4500; /* vermilion */ + border-top-color: var(--TableBackground); } .sm-dox ul a:hover span.sub-arrow { - border-left-color: #ff4500; /* vermilion */ + border-left-color: var(--TableBackground); } } .sm-dox span.scroll-up-arrow { - border-bottom-color: #ff4500; /* vermilion */ + border-bottom-color: var(--TableBackground); } .sm-dox span.scroll-down-arrow { - border-top-color: #ff4500; /* vermilion */ + border-top-color: var(--TableBackground); } div#main-nav { position: relative; left: 0; top: 0; - background: #e0e0e0; /* alto */ + background: var(--SecondaryCanvas); margin: 0; padding: 0; } @@ -451,7 +546,7 @@ div.contents em, div.contents code, div.contents .mlabel { } div.contents em { - color: #dc3c01; /* grenadier */ + color: var(--LinkText); } div.contents .mlabels-right { @@ -460,7 +555,7 @@ div.contents .mlabels-right { div.contents code, span.mlabel { - color: blue; + color: var(--Blue); font-family: "Noto Sans Mono", Consolas, "Courier New", monospace, fixed; font-weight: normal; font-style: normal; @@ -473,7 +568,7 @@ div.title span.mlabel { } div.memproto span.mlabel { - background-color: #f3f3f3; /* concrete */ + background-color: var(--TertiaryCanvas); font-size: 14.4px; } @@ -498,17 +593,17 @@ div.contents td.desc { } div.contents div.dynheader { - color: #0c3762; /* madison */ + color: var(--HeaderText); font-size: 1.3em; font-weight: normal; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); margin-top: 1em; margin-bottom: 1em; } div.contents div.dyncontent { width: 100%; - border: 1px solid #c7c7c7; /* silver */ + border: 1px solid var(--TertiaryCanvasText); overflow: auto; } @@ -526,7 +621,7 @@ div.contents span.keycap, div.contents span.keysym { -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - border-color: #c7c7c7; /* silver */ + border-color: var(--TertiaryCanvasText); border-style: solid; border-width: 1px; padding: 0px 2px 0px 2px; @@ -596,24 +691,24 @@ dl.note dd, dl.remark dd, dl.warning dd, dl.attention dd { } dl.note { - background: #deebff url('https://www.haiku-os.org/images/alert_info_32.png') 15px 15px no-repeat; + background: var(--SecondaryCanvas) url('https://www.haiku-os.org/images/alert_info_32.png') 15px 15px no-repeat; border-color: #183cce; } dl.remark { - background: #f3f3f3 url('https://www.haiku-os.org/images/alert_idea_32.png') 15px 15px no-repeat; - border-color: #c0c0c0; /* silver */ + background: var(--TertiaryCanvas) url('https://www.haiku-os.org/images/alert_idea_32.png') 15px 15px no-repeat; + border-color: var(--TertiaryCanvasText); } dl.warning { /* lemon chiffon */ - background: #fffbc6 url('https://www.haiku-os.org/images/alert_warning_32.png') 15px 15px no-repeat; + background: var(--WarningBackground) url('https://www.haiku-os.org/images/alert_warning_32.png') 15px 15px no-repeat; border-color: #eed300; /* gold */ } dl.attention { /* fair pink */ - background: #ffeae6 url('https://www.haiku-os.org/images/alert_stop_32.png') 15px 15px no-repeat; + background: var(--StopBackground) url('https://www.haiku-os.org/images/alert_stop_32.png') 15px 15px no-repeat; border-color: red; } @@ -623,7 +718,7 @@ dl.note dt, dl.remark dt, dl.warning dt, dl.attention dt { dl.note dd, dl.remark dd, dl.warning dd, dl.attention dd { margin: 10px 10px 10px 60px; - color: black; /* pseudo-bold */ + color: var(--CanvasText); /* pseudo-bold */ } /* For keyboard shortcuts and the like (also from userguide) */ @@ -633,12 +728,11 @@ div.contents span.keycap { -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - border-color: #c7c7c7; /* silver */ + border-color: var(--TertiaryCanvasText); border-style: solid; border-width: 1px; padding: 0px 2px 0px 2px; - background-color: #e8e8e8; /* mercury */ - font-family: serif; + background-color: var(--ButtonBackground); font-variant: small-caps; } @@ -647,15 +741,15 @@ div.contents span.keycap { A.code:visited { text-decoration: none; font-weight: normal; - color: blue; + color: var(--Blue); } A.codeRef:link { font-weight: normal; - color: blue; + color: var(--Blue); } A.codeRef:visited { font-weight: normal; - color: blue; + color: var(--Blue); } dl.el { margin-left: -1cm @@ -664,8 +758,8 @@ dl.el { /* Code blocks */ div.fragment { width: 99%; - background-color: #f3f3f3; /* concrete */ - border: 1px solid #c0c0c0; /* silver */ + background-color: var(--TertiaryCanvas); + border: 1px solid var(--TertiaryCanvasText); padding: 4px; color: black; font-family: "Noto Sans Mono", Consolas, "Courier New", monospace, fixed; @@ -685,8 +779,8 @@ div.ah { margin-top: 3px; } TD.indexkey { - background-color: #f3f3f3; /* concrete */ - border: 1px solid #c0c0c0; /* silver */ + background-color: var(--TertiaryCanvas); + border: 1px solid var(--TertiaryCanvasText); font-weight: bold; padding-right : 10px; padding-top : 2px; @@ -698,8 +792,8 @@ TD.indexkey { margin-bottom : 2px; } TD.indexvalue { - background-color: #f3f3f3; /* concrete */ - border: 1px solid #c0c0c0; /* silver */ + background-color: var(--TertiaryCanvas); + border: 1px solid var(--TertiaryCanvasText); font-style: italic; padding-right : 10px; padding-top : 2px; @@ -729,9 +823,9 @@ table.memberdecls td.memItemLeft { padding: 6px 0px 4px 8px; margin: 4px; vertical-align: top; - border-top: 1px solid #c0c0c0; /* silver */ - border-left: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-top: 1px solid var(--TertiaryCanvasText); + border-left: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.memItemRight { @@ -740,9 +834,9 @@ table.memberdecls td.memItemRight { padding: 6px 8px 4px 0px; margin: 4px; vertical-align: top; - border-top: 1px solid #c0c0c0; /* silver */ - border-right: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-top: 1px solid var(--TertiaryCanvasText); + border-right: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.mdescLeft { @@ -750,9 +844,9 @@ table.memberdecls td.mdescLeft { line-height: 1.3; padding: 1px 0px 4px 8px; margin: 0px; - border-bottom: 1px solid #c0c0c0; /* silver */ - border-left: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-bottom: 1px solid var(--TertiaryCanvasText); + border-left: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.mdescRight { @@ -760,9 +854,9 @@ table.memberdecls td.mdescRight { line-height: 1.3; padding: 1px 8px 4px 0px; margin: 0px; - border-bottom: 1px solid #c0c0c0; /* silver */ - border-right: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-bottom: 1px solid var(--TertiaryCanvasText); + border-right: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.mdescRight p { @@ -775,36 +869,36 @@ table.memberdecls td.memTemplItemLeft { padding: 1px 0px 0px 8px; margin: 0px; text-align: right; - border-left: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-left: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.memTemplItemRight { font-size: 13px; padding: 1px 8px 0px 0px; margin: 0px; - border-right: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-right: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td.memTemplParams { font-size: 13px; padding: 1px 0px 0px 8px; margin: 0px; - border-top: 1px solid #c0c0c0; /* silver */ - border-left: 1px solid #c0c0c0; /* silver */ - border-right: 1px solid #c0c0c0; /* silver */ - background-color: #f3f3f3; /* concrete */ + border-top: 1px solid var(--TertiaryCanvasText); + border-left: 1px solid var(--TertiaryCanvasText); + border-right: 1px solid var(--TertiaryCanvasText); + background-color: var(--TertiaryCanvas); } table.memberdecls td div.groupHeader, tr.inherit_header { /* same as h3 */ - color: #0c3762; /* madison */ + color: var(--HeaderText); margin-top: 0.5em; margin-bottom: 0.5em; font-size: 1.2em; font-weight: normal; - border-bottom: dotted thin #c0c0c0; /* silver */ + border-bottom: dotted thin var(--TertiaryCanvasText); } tr.inherit_header { cursor: pointer; @@ -822,8 +916,8 @@ div.memtemplate { } div.memnav { - background-color: #f3f3f3; /* concrete */ - border: 1px solid #c0c0c0; /* silver */ + background-color: var(--TertiaryCanvas); + border: 1px solid var(--TertiaryCanvasText); text-align: center; margin: 2px; margin-right: 15px; @@ -849,8 +943,8 @@ div.memitem dl.info, div.memitem dl.note, div.memitem dl.attention, div.memproto { padding: 4px; - background-color: #f3f3f3; /* concrete */ - border: 1px solid #c0c0c0; /* silver */ + background-color: var(--TertiaryCanvas); + border: 1px solid var(--TertiaryCanvasText); font-family: "Noto Sans Mono", Consolas, "Courier New", monospace, fixed; box-shadow: none; border-radius: 0; @@ -903,7 +997,7 @@ div.memdoc table { div.memdoc table td { vertical-align: middle; padding: 8px; - border: 1px solid #d5d5d5; /* silver */ + border: 1px solid var(--TertiaryCanvasText); } div.memdoc td:first-child { @@ -917,7 +1011,7 @@ div.memdoc dl dd table { div.memdoc dl dd table td { font-size: 14.4px; padding: 8px; - border: 1px solid #d5d5d5; /* silver */ + border: 1px solid var(--TertiaryCanvasText); } div.memdoc dl dd table td ul, table td ol { @@ -941,7 +1035,7 @@ div.memdoc dl dd table.params td.paramname { vertical-align: top; font-weight: normal; font-style: normal; - color: #dc3c01; /* grenadier */ + color: var(--LinkText); width: 157px; } @@ -949,7 +1043,7 @@ div.memdoc dl dd table.params td.paramname { div.memdoc dl dd table.retval td.paramname { vertical-align: top; - color: blue; + color: var(--Blue); width: 157px; } @@ -957,17 +1051,17 @@ div.memdoc dl dd table.retval td.paramname { /* Tree View on Directory Pages */ div.directory { - border-top: 1px solid #c0c0c0; /* silver */ - border-bottom: 1px solid #c0c0c0; /* silver */ + border-top: 1px solid var(--TertiaryCanvasText); + border-bottom: 1px solid var(--TertiaryCanvasText); } .directory .levels span { - color: #dc3c01; /* grenadier */ + color: var(--LinkText); } /* Footer: color separator */ hr.footer { height: 1px; - border-top: 1px solid #c0c0c0; + border-top: 1px solid var(--TertiaryCanvasText); }