Api docs: dark mode

Change-Id: I46538353f38902b58937286a9e32167424fc7d0e
Reviewed-on: https://review.haiku-os.org/c/haiku/+/6074
Reviewed-by: nephele <nep@packageloss.eu>
Reviewed-by: waddlesplash <waddlesplash@gmail.com>
This commit is contained in:
Pascal Abresch 2023-02-17 21:48:10 +01:00 committed by waddlesplash
parent 98a5975248
commit 9a91a72662

View File

@ -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 <nep@packageloss.eu>
*/
/* 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);
}