Skip to content

Commit

Permalink
Merge pull request OAI#4268 from Bellangelo/main-dark-mode
Browse files Browse the repository at this point in the history 
Add dark mode support to the HTML versions of the OpenAPI specs
  • Loading branch information
@ralfhandl
ralfhandl authored Feb 6, 2025
2 parents 9a07bd0 + 7027e0f commit 031d633
Show file tree
Hide file tree
Showing 4 changed files with 241 additions and 16 deletions.
237 changes: 237 additions & 0 deletions scripts/md2html/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
#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;
}
16 changes: 2 additions & 14 deletions scripts/md2html/md2html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ function preface(title,options) {
preface += '<meta name="description" content="The OpenAPI Specification (OAS) defines a standard, programming language-agnostic interface description for HTTP APIs.">';

// ReSpec
preface += '<meta name="color-scheme" content="light dark">';
preface += '<script src="../js/respec-w3c.js" class="remove"></script>';
preface += `<script class="remove">var respecConfig = ${JSON.stringify(respec)};</script>`;
try {
Expand All @@ -137,20 +138,7 @@ function preface(title,options) {
catch (ex) {}
preface += '</head><body>';
preface += '<style>';
preface += '#respec-ui { visibility: hidden; }';
preface += '#title { color: #578000; } #subtitle { color: #578000; }';
preface += '.dt-published { color: #578000; } .dt-published::before { content: "Published "; }';
preface += 'h1,h2,h3,h4,h5,h6 { color: #578000; font-weight: normal; font-style: normal; }';
preface += 'a[href] { color: #45512c; }';
preface += 'body:not(.toc-inline) #toc h2 { color: #45512c; }';
preface += 'table { display: block; width: 100%; overflow: auto; }';
preface += 'table th { font-weight: 600; }';
preface += 'table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }';
preface += 'table tr { background-color: #fff; border-top: 1px solid #c6cbd1; }';
preface += 'table tr:nth-child(2n) { background-color: #f6f8fa; }';
preface += 'pre { background-color: #f6f8fa !important; }';
preface += 'code { color: #c83500 } th code { color: inherit }';
preface += 'a.bibref { text-decoration: underline;}';
preface += fs.readFileSync(path.resolve(__dirname,'main.css'),'utf8').split(/\r?\n/).join(' ');
preface += fs.readFileSync(path.resolve(__dirname,'gist.css'),'utf8').split(/\r?\n/).join(' ');
preface += '</style>';
preface += `<h1 id="title">${title.split('|')[0]}</h1>`;
Expand Down
2 changes: 1 addition & 1 deletion tests/md2html/fixtures/basic-new.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!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>
<!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>
<section><h1>Heading 1</h1>
<p>Text for first chapter</p>
<section class="override" id="conformance"><h2>Version 30.0.1</h2>
Expand Down
Loading

0 comments on commit 031d633

Please sign in to comment.