Skip to content

Commit a984c47

Browse files
baywetbaywet
authored
Merge pull request #234 from OAI/ci/dark-theme
chore: add dark theme support
2 parents 78350e6 + 301e3ad commit a984c47

File tree

6 files changed

+346
-14
lines changed

6 files changed

+346
-14
lines changed

‎scripts/md2html/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.err
2+
input.bs

‎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
@@ -95,24 +95,12 @@ function preface(title,options) {
9595
preface += `<meta charset="UTF-8">\n<title>${md.utils.escapeHtml(title)}</title>`;
9696

9797
// ReSpec
98+
preface += '<meta name="color-scheme" content="light dark">';
9899
preface += '<script src="../js/respec-w3c.js" class="remove"></script>';
99100
preface += `<script class="remove">var respecConfig = ${JSON.stringify(respec)};</script>\n`;
100101
preface += '</head>\n<body>';
101102
preface += '<style>';
102-
preface += '#respec-ui { visibility: hidden; }';
103-
preface += '#title { color: #578000; } #subtitle { color: #578000; }';
104-
preface += '.dt-published { color: #578000; } .dt-published::before { content: "Published "; }';
105-
preface += 'h1,h2,h3,h4,h5,h6 { color: #578000; font-weight: normal; font-style: normal; }';
106-
preface += 'a[href] { color: #45512c; }';
107-
preface += 'body:not(.toc-inline) #toc h2 { color: #45512c; }';
108-
preface += 'table { display: block; width: 100%; overflow: auto; }';
109-
preface += 'table th { font-weight: 600; }';
110-
preface += 'table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }';
111-
preface += 'table tr { background-color: #fff; border-top: 1px solid #c6cbd1; }';
112-
preface += 'table tr:nth-child(2n) { background-color: #f6f8fa; }';
113-
preface += 'pre { background-color: #f6f8fa !important; }';
114-
preface += 'code { color: #c83500 } th code { color: inherit }';
115-
preface += 'a.bibref { text-decoration: underline;}';
103+
preface += fs.readFileSync(path.resolve(__dirname,'main.css'),'utf8').split(/\r?\n/).join(' ');
116104
preface += fs.readFileSync(path.resolve(__dirname,'gist.css'),'utf8').split(/\r?\n/).join(' ');
117105
preface += '</style>';
118106
preface += `<h1 id="title">${title.split('|')[0]}</h1>`;

‎scripts/md2html/style-finish.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
</style>

‎scripts/md2html/style-start.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<style>
2+
/*.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
3+
code.highlight { padding: .1em; border-radius: .3em; } */
4+
pre > code { background: hsl(24, 20%, 95%); display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
5+
h1,h2,h3 { color: #629b34; }a[href] { color: #45512c; }body:not(.toc-inline) #toc h2 { color: #45512c; }

‎scripts/md2html/syntax-github.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*
2+
3+
github.com style (c) Vasily Polovnyov <[email protected]>
4+
5+
*/
6+
7+
.hljs {
8+
display: block;
9+
overflow-x: auto;
10+
padding: 0.5em;
11+
color: #333;
12+
background: #f8f8f8;
13+
}
14+
15+
.hljs-comment,
16+
.hljs-quote {
17+
color: #998;
18+
font-style: italic;
19+
}
20+
21+
.hljs-keyword,
22+
.hljs-selector-tag,
23+
.hljs-subst {
24+
color: #333;
25+
font-weight: bold;
26+
}
27+
28+
.hljs-number,
29+
.hljs-literal,
30+
.hljs-variable,
31+
.hljs-template-variable,
32+
.hljs-tag .hljs-attr {
33+
color: #008080;
34+
}
35+
36+
.hljs-string,
37+
.hljs-doctag {
38+
color: #d14;
39+
}
40+
41+
.hljs-title,
42+
.hljs-section,
43+
.hljs-selector-id {
44+
color: #900;
45+
font-weight: bold;
46+
}
47+
48+
.hljs-subst {
49+
font-weight: normal;
50+
}
51+
52+
.hljs-type,
53+
.hljs-class .hljs-title {
54+
color: #458;
55+
font-weight: bold;
56+
}
57+
58+
.hljs-tag,
59+
.hljs-name,
60+
.hljs-attribute {
61+
color: #000080;
62+
font-weight: normal;
63+
}
64+
65+
.hljs-regexp,
66+
.hljs-link {
67+
color: #009926;
68+
}
69+
70+
.hljs-symbol,
71+
.hljs-bullet {
72+
color: #990073;
73+
}
74+
75+
.hljs-built_in,
76+
.hljs-builtin-name {
77+
color: #0086b3;
78+
}
79+
80+
.hljs-meta {
81+
color: #999;
82+
font-weight: bold;
83+
}
84+
85+
.hljs-deletion {
86+
background: #fdd;
87+
}
88+
89+
.hljs-addition {
90+
background: #dfd;
91+
}
92+
93+
.hljs-emphasis {
94+
font-style: italic;
95+
}
96+
97+
.hljs-strong {
98+
font-weight: bold;
99+
}

0 commit comments

Comments
 (0)