Skip to content

Commit 031d633

Browse files
ralfhandlralfhandl
authored
Merge pull request #4268 from Bellangelo/main-dark-mode
Add dark mode support to the HTML versions of the OpenAPI specs
2 parents 9a07bd0 + 7027e0f commit 031d633

File tree

4 files changed

+241
-16
lines changed

4 files changed

+241
-16
lines changed

‎scripts/md2html/main.css

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
#respec-ui {
2+
visibility: hidden;
3+
}
4+
5+
#title {
6+
color: #578000;
7+
}
8+
9+
#subtitle {
10+
color: #578000;
11+
}
12+
13+
.dt-published {
14+
color: #578000;
15+
}
16+
17+
.dt-published::before {
18+
content: "Published ";
19+
}
20+
21+
h1, h2, h3, h4, h5, h6 {
22+
color: #578000;
23+
font-weight: normal;
24+
font-style: normal;
25+
}
26+
27+
a[href] {
28+
color: #45512c;
29+
}
30+
31+
body:not(.toc-inline) #toc h2 {
32+
color: #45512c;
33+
}
34+
35+
table {
36+
display: block;
37+
width: 100%;
38+
overflow: auto;
39+
}
40+
41+
table th {
42+
font-weight: 600;
43+
}
44+
45+
table th, table td {
46+
padding: 6px 13px;
47+
border: 1px solid #dfe2e5;
48+
}
49+
50+
table tr {
51+
background-color: #fff;
52+
border-top: 1px solid #c6cbd1;
53+
}
54+
55+
table tr:nth-child(2n) {
56+
background-color: #f6f8fa;
57+
}
58+
59+
pre {
60+
background-color: #f6f8fa !important;
61+
}
62+
63+
code {
64+
color: #c83500
65+
}
66+
67+
th code {
68+
color: inherit
69+
}
70+
71+
a.bibref {
72+
text-decoration: underline;
73+
}
74+
75+
body.darkmode {
76+
--toclink-underline: #6a9000;
77+
--toclink-visited-underline: #fff;
78+
}
79+
80+
body.darkmode a,
81+
body.darkmode .tocxref,
82+
body.darkmode .u-url {
83+
color: #6a9000;
84+
}
85+
86+
body.darkmode code {
87+
color: #e66c33;
88+
}
89+
90+
body.darkmode:not(.toc-inline) #toc h2,
91+
body.darkmode h1,
92+
body.darkmode h2,
93+
body.darkmode h3,
94+
body.darkmode h4,
95+
body.darkmode h5,
96+
body.darkmode h6,
97+
body.darkmode #title,
98+
body.darkmode #subtitle,
99+
body.darkmode .toc-inline,
100+
body.darkmode .dt-published {
101+
color: #7bb01c;
102+
}
103+
104+
body.darkmode pre,
105+
body.darkmode table tr:nth-child(2n),
106+
body.darkmode table tr {
107+
background-color: #1e1e1e !important;
108+
color: #dcdcdc;
109+
}
110+
111+
body.darkmode img {
112+
background: transparent;
113+
}
114+
115+
body.darkmode .logo img {
116+
display: none;
117+
}
118+
119+
body.darkmode .logo::before {
120+
content: "";
121+
display: inline-block;
122+
height: 48px;
123+
width: 175px;
124+
background: url("https://raw.githubusercontent.com/OAI/OpenAPI-Style-Guide/refs/heads/main/graphics/bitmap/OpenAPI_Logo_Pantone.png") no-repeat center / contain;
125+
vertical-align: middle;
126+
}
127+
128+
/** This contains the content of the https://www.w3.org/StyleSheets/TR/2021/dark.css file */
129+
body.darkmode {
130+
--text: #ddd;
131+
--bg: black;
132+
133+
/* Absolute URLs due to https://bugs.webkit.org/show_bug.cgi?id=230243 */
134+
--unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-unofficial);
135+
--draft-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-draft);
136+
137+
--logo-bg: #1a5e9a;
138+
--logo-active-bg: #c00;
139+
--logo-text: white;
140+
141+
--tocnav-normal-text: #999;
142+
--tocnav-normal-bg: var(--bg);
143+
--tocnav-hover-text: var(--tocnav-normal-text);
144+
--tocnav-hover-bg: #080808;
145+
--tocnav-active-text: #f44;
146+
--tocnav-active-bg: var(--tocnav-normal-bg);
147+
148+
--tocsidebar-text: var(--text);
149+
--tocsidebar-bg: #080808;
150+
--tocsidebar-shadow: rgba(255,255,255,.1);
151+
--tocsidebar-heading-text: hsla(203,20%,40%,.7);
152+
153+
--toclink-text: var(--text);
154+
--toclink-underline: #6af;
155+
--toclink-visited-text: var(--toclink-text);
156+
--toclink-visited-underline: #054572;
157+
158+
--heading-text: #8af;
159+
160+
--hr-text: var(--text);
161+
162+
--algo-border: #456;
163+
164+
--del-text: #f44;
165+
--del-bg: transparent;
166+
--ins-text: #4a4;
167+
--ins-bg: transparent;
168+
169+
--a-normal-text: #6af;
170+
--a-normal-underline: #555;
171+
--a-visited-text: var(--a-normal-text);
172+
--a-visited-underline: var(--a-normal-underline);
173+
--a-hover-bg: rgba(25%, 25%, 25%, .2);
174+
--a-active-text: #f44;
175+
--a-active-underline: var(--a-active-text);
176+
177+
--borderedblock-bg: rgba(255, 255, 255, .05);
178+
179+
--blockquote-border: silver;
180+
--blockquote-bg: var(--borderedblock-bg);
181+
--blockquote-text: currentcolor;
182+
183+
--issue-border: #e05252;
184+
--issue-bg: var(--borderedblock-bg);
185+
--issue-text: var(--text);
186+
--issueheading-text: hsl(0deg, 70%, 70%);
187+
188+
--example-border: hsl(50deg, 90%, 60%);
189+
--example-bg: var(--borderedblock-bg);
190+
--example-text: var(--text);
191+
--exampleheading-text: hsl(50deg, 70%, 70%);
192+
193+
--note-border: hsl(120deg, 100%, 35%);
194+
--note-bg: var(--borderedblock-bg);
195+
--note-text: var(--text);
196+
--noteheading-text: hsl(120, 70%, 70%);
197+
--notesummary-underline: silver;
198+
199+
--advisement-border: orange;
200+
--advisement-bg: #222218;
201+
--advisement-text: var(--text);
202+
--advisementheading-text: #f84;
203+
204+
--amendment-border: #330099;
205+
--amendment-bg: var(--borderedblock-bg);
206+
--amendment-text: var(--text);
207+
--amendmentheading-text: #a086ff;
208+
209+
--amendment-border: #330099;
210+
--amendment-bg: #080010;
211+
--amendment-text: var(--text);
212+
--amendmentheading-text: #cc00ff;
213+
214+
--warning-border: red;
215+
--warning-bg: hsla(40,100%,20%,0.95);
216+
--warning-text: var(--text);
217+
218+
--def-border: #8ccbf2;
219+
--def-bg: #080818;
220+
--def-text: var(--text);
221+
--defrow-border: #136;
222+
223+
--datacell-border: silver;
224+
225+
--indexinfo-text: #aaa;
226+
227+
--indextable-hover-text: var(--text);
228+
--indextable-hover-bg: #181818;
229+
230+
--outdatedspec-bg: rgba(255, 255, 255, .5);
231+
--outdatedspec-text: black;
232+
--outdated-bg: maroon;
233+
--outdated-text: white;
234+
--outdated-shadow: red;
235+
236+
--editedrec-bg: darkorange;
237+
}

‎scripts/md2html/md2html.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ function preface(title,options) {
129129
preface += '<meta name="description" content="The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs.">';
130130

131131
// ReSpec
132+
preface += '<meta name="color-scheme" content="light dark">';
132133
preface += '<script src="../js/respec-w3c.js" class="remove"></script>';
133134
preface += `<script class="remove">var respecConfig = ${JSON.stringify(respec)};</script>`;
134135
try {
@@ -137,20 +138,7 @@ function preface(title,options) {
137138
catch (ex) {}
138139
preface += '</head><body>';
139140
preface += '<style>';
140-
preface += '#respec-ui { visibility: hidden; }';
141-
preface += '#title { color: #578000; } #subtitle { color: #578000; }';
142-
preface += '.dt-published { color: #578000; } .dt-published::before { content: "Published "; }';
143-
preface += 'h1,h2,h3,h4,h5,h6 { color: #578000; font-weight: normal; font-style: normal; }';
144-
preface += 'a[href] { color: #45512c; }';
145-
preface += 'body:not(.toc-inline) #toc h2 { color: #45512c; }';
146-
preface += 'table { display: block; width: 100%; overflow: auto; }';
147-
preface += 'table th { font-weight: 600; }';
148-
preface += 'table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }';
149-
preface += 'table tr { background-color: #fff; border-top: 1px solid #c6cbd1; }';
150-
preface += 'table tr:nth-child(2n) { background-color: #f6f8fa; }';
151-
preface += 'pre { background-color: #f6f8fa !important; }';
152-
preface += 'code { color: #c83500 } th code { color: inherit }';
153-
preface += 'a.bibref { text-decoration: underline;}';
141+
preface += fs.readFileSync(path.resolve(__dirname,'main.css'),'utf8').split(/\r?\n/).join(' ');
154142
preface += fs.readFileSync(path.resolve(__dirname,'gist.css'),'utf8').split(/\r?\n/).join(' ');
155143
preface += '</style>';
156144
preface += `<h1 id="title">${title.split('|')[0]}</h1>`;

‎tests/md2html/fixtures/basic-new.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>OpenAPI Specification v30.0.1 | Introduction, Definitions, &amp; More</title><meta name="description" content="The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs."><script src="../js/respec-w3c.js" class="remove"></script><script class="remove">var respecConfig = {"specStatus":"base","latestVersion":"https://spec.openapis.org/oas/latest.html","thisVersion":"https://spec.openapis.org/oas/v30.0.1.html","canonicalURI":"https://spec.openapis.org/oas/v30.0.1.html","editors":[{"name":"John Doe "},{"name":"Jane Doe "}],"formerEditors":[{"name":"Foo Bar "}],"publishDate":"3001-04-01T00:00:00.000Z","subtitle":"Version 30.0.1","edDraftURI":"https://github.com/OAI/OpenAPI-Specification/","shortName":"OAS","historyURI":null,"lint":false,"logos":[{"src":"https://raw.githubusercontent.com/OAI/OpenAPI-Style-Guide/master/graphics/bitmap/OpenAPI_Logo_Pantone.png","alt":"OpenAPI Initiative","height":48,"url":"https://openapis.org/"}],"otherLinks":[{"key":"Participate","data":[{"value":"GitHub OAI/OpenAPI-Specification","href":"https://github.com/OAI/OpenAPI-Specification/"},{"value":"File a bug","href":"https://github.com/OAI/OpenAPI-Specification/issues"},{"value":"Commit history","href":"https://github.com/OAI/OpenAPI-Specification/commits/main/versions/30.0.1.md"},{"value":"Pull requests","href":"https://github.com/OAI/OpenAPI-Specification/pulls"}]}]};</script></head><body><style>#respec-ui { visibility: hidden; }#title { color: #578000; } #subtitle { color: #578000; }.dt-published { color: #578000; } .dt-published::before { content: "Published "; }h1,h2,h3,h4,h5,h6 { color: #578000; font-weight: normal; font-style: normal; }a[href] { color: #45512c; }body:not(.toc-inline) #toc h2 { color: #45512c; }table { display: block; width: 100%; overflow: auto; }table th { font-weight: 600; }table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }table tr { background-color: #fff; border-top: 1px solid #c6cbd1; }table tr:nth-child(2n) { background-color: #f6f8fa; }pre { background-color: #f6f8fa !important; }code { color: #c83500 } th code { color: inherit }a.bibref { text-decoration: underline;}/** * GitHub Gist Theme * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro */ .hljs { display: block; background: white; padding: 0.5em; color: #333333; overflow-x: auto; } .hljs-comment, .hljs-meta { color: #727070; } .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote { color: #c74700; } .hljs-number { color: #005e5e; } .hljs-keyword, .hljs-selector-tag, .hljs-type { color: #a71d5d; } .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute { color: #007aa2; } .hljs-section, .hljs-name { color: #4b7c46; } .hljs-tag { color: #333333; } .hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo { color: #795da3; } .hljs-addition { color: #55a532; background-color: #eaffea; } .hljs-deletion { color: #bd2c00; background-color: #ffecec; } .hljs-link { text-decoration: underline; } </style><h1 id="title">OpenAPI Specification v30.0.1 </h1><p class="copyright">Copyright © 3001 the Linux Foundation</p><section class="notoc" id="abstract"><h2>What is the OpenAPI Specification?</h2>The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs, which allows both humans and computers to discover and understand the capabilities of a service without requiring access to source code, additional documentation, or inspection of network traffic. When properly defined via OpenAPI, a consumer can understand and interact with the remote service with a minimal amount of implementation logic. Similar to what interface descriptions have done for lower-level programming, the OpenAPI Specification removes guesswork in calling a service.</section><section class="override" id="sotd" data-max-toc="0"><h2>Status of This Document</h2>The source-of-truth for this specification is the HTML file referenced above as <em>This version</em>.</section>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>OpenAPI Specification v30.0.1 | Introduction, Definitions, &amp; More</title><meta name="description" content="The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs."><meta name="color-scheme" content="light dark"><script src="../js/respec-w3c.js" class="remove"></script><script class="remove">var respecConfig = {"specStatus":"base","latestVersion":"https://spec.openapis.org/oas/latest.html","thisVersion":"https://spec.openapis.org/oas/v30.0.1.html","canonicalURI":"https://spec.openapis.org/oas/v30.0.1.html","editors":[{"name":"John Doe "},{"name":"Jane Doe "}],"formerEditors":[{"name":"Foo Bar "}],"publishDate":"3001-04-01T00:00:00.000Z","subtitle":"Version 30.0.1","edDraftURI":"https://github.com/OAI/OpenAPI-Specification/","shortName":"OAS","historyURI":null,"lint":false,"logos":[{"src":"https://raw.githubusercontent.com/OAI/OpenAPI-Style-Guide/master/graphics/bitmap/OpenAPI_Logo_Pantone.png","alt":"OpenAPI Initiative","height":48,"url":"https://openapis.org/"}],"otherLinks":[{"key":"Participate","data":[{"value":"GitHub OAI/OpenAPI-Specification","href":"https://github.com/OAI/OpenAPI-Specification/"},{"value":"File a bug","href":"https://github.com/OAI/OpenAPI-Specification/issues"},{"value":"Commit history","href":"https://github.com/OAI/OpenAPI-Specification/commits/main/versions/30.0.1.md"},{"value":"Pull requests","href":"https://github.com/OAI/OpenAPI-Specification/pulls"}]}]};</script></head><body><style>#respec-ui { visibility: hidden; } #title { color: #578000; } #subtitle { color: #578000; } .dt-published { color: #578000; } .dt-published::before { content: "Published "; } h1, h2, h3, h4, h5, h6 { color: #578000; font-weight: normal; font-style: normal; } a[href] { color: #45512c; } body:not(.toc-inline) #toc h2 { color: #45512c; } table { display: block; width: 100%; overflow: auto; } table th { font-weight: 600; } table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; } table tr { background-color: #fff; border-top: 1px solid #c6cbd1; } table tr:nth-child(2n) { background-color: #f6f8fa; } pre { background-color: #f6f8fa !important; } code { color: #c83500 } th code { color: inherit } a.bibref { text-decoration: underline; } body.darkmode { --toclink-underline: #6a9000; --toclink-visited-underline: #fff; } body.darkmode a, body.darkmode .tocxref, body.darkmode .u-url { color: #6a9000; } body.darkmode code { color: #e66c33; } body.darkmode:not(.toc-inline) #toc h2, body.darkmode h1, body.darkmode h2, body.darkmode h3, body.darkmode h4, body.darkmode h5, body.darkmode h6, body.darkmode #title, body.darkmode #subtitle, body.darkmode .toc-inline, body.darkmode .dt-published { color: #7bb01c; } body.darkmode pre, body.darkmode table tr:nth-child(2n), body.darkmode table tr { background-color: #1e1e1e !important; color: #dcdcdc; } body.darkmode img { background: transparent; } body.darkmode .logo img { display: none; } body.darkmode .logo::before { content: ""; display: inline-block; height: 48px; width: 175px; background: url("https://raw.githubusercontent.com/OAI/OpenAPI-Style-Guide/refs/heads/main/graphics/bitmap/OpenAPI_Logo_Pantone.png") no-repeat center / contain; vertical-align: middle; } /** This contains the content of the https://www.w3.org/StyleSheets/TR/2021/dark.css file */ body.darkmode { --text: #ddd; --bg: black; /* Absolute URLs due to https://bugs.webkit.org/show_bug.cgi?id=230243 */ --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-unofficial); --draft-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-draft); --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,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.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%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .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; --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --amendment-border: #330099; --amendment-bg: var(--borderedblock-bg); --amendment-text: var(--text); --amendmentheading-text: #a086ff; --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --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, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; }/** * GitHub Gist Theme * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro */ .hljs { display: block; background: white; padding: 0.5em; color: #333333; overflow-x: auto; } .hljs-comment, .hljs-meta { color: #727070; } .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote { color: #c74700; } .hljs-number { color: #005e5e; } .hljs-keyword, .hljs-selector-tag, .hljs-type { color: #a71d5d; } .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute { color: #007aa2; } .hljs-section, .hljs-name { color: #4b7c46; } .hljs-tag { color: #333333; } .hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo { color: #795da3; } .hljs-addition { color: #55a532; background-color: #eaffea; } .hljs-deletion { color: #bd2c00; background-color: #ffecec; } .hljs-link { text-decoration: underline; } </style><h1 id="title">OpenAPI Specification v30.0.1 </h1><p class="copyright">Copyright © 3001 the Linux Foundation</p><section class="notoc" id="abstract"><h2>What is the OpenAPI Specification?</h2>The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs, which allows both humans and computers to discover and understand the capabilities of a service without requiring access to source code, additional documentation, or inspection of network traffic. When properly defined via OpenAPI, a consumer can understand and interact with the remote service with a minimal amount of implementation logic. Similar to what interface descriptions have done for lower-level programming, the OpenAPI Specification removes guesswork in calling a service.</section><section class="override" id="sotd" data-max-toc="0"><h2>Status of This Document</h2>The source-of-truth for this specification is the HTML file referenced above as <em>This version</em>.</section>
22
<section><h1>Heading 1</h1>
33
<p>Text for first chapter</p>
44
<section class="override" id="conformance"><h2>Version 30.0.1</h2>

0 commit comments

Comments
 (0)