typedoc-github-theme 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -1
- package/dist/GitHubTheme.js +9 -0
- package/dist/index.js +6 -0
- package/package.json +9 -9
- package/src/assets/typedoc-github-style.css +101 -70
package/README.md
CHANGED
|
@@ -27,9 +27,13 @@ yarn add typedoc-github-theme
|
|
|
27
27
|
**Use the theme when generating your documentation:**
|
|
28
28
|
|
|
29
29
|
```text
|
|
30
|
-
typedoc src
|
|
30
|
+
npx typedoc src --plugin typedoc-github-theme
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
> [!NOTE]
|
|
34
|
+
> This plugin fills the following options if they have not been defined by the user:
|
|
35
|
+
> [`theme`](https://typedoc.org/options/output/#theme), [`lightHighlightTheme`](https://typedoc.org/options/output/#lighthighlighttheme), [`darkHighlightTheme`](https://typedoc.org/options/output/#darkhighlighttheme)
|
|
36
|
+
|
|
33
37
|
---
|
|
34
38
|
|
|
35
39
|
## Author
|
package/dist/GitHubTheme.js
CHANGED
|
@@ -17,6 +17,15 @@ class GitHubTheme extends typedoc_1.DefaultTheme {
|
|
|
17
17
|
// link the css file
|
|
18
18
|
this.application.renderer.hooks.on('head.end', (event) => (typedoc_1.JSX.createElement(typedoc_1.JSX.Fragment, null,
|
|
19
19
|
typedoc_1.JSX.createElement("link", { rel: "stylesheet", href: event.relativeURL('assets/typedoc-github-style.css') }))));
|
|
20
|
+
// set the Shiki theme
|
|
21
|
+
this.application.on('bootstrapEnd', () => {
|
|
22
|
+
if (!this.application.options.isSet('lightHighlightTheme')) {
|
|
23
|
+
this.application.options.setValue('lightHighlightTheme', 'github-light-default');
|
|
24
|
+
}
|
|
25
|
+
if (!this.application.options.isSet('darkHighlightTheme')) {
|
|
26
|
+
this.application.options.setValue('darkHighlightTheme', 'github-dark-default');
|
|
27
|
+
}
|
|
28
|
+
});
|
|
20
29
|
}
|
|
21
30
|
getRenderContext(pageEvent) {
|
|
22
31
|
return new GitHubThemeContext_1.GitHubThemeContext(this, pageEvent, this.application.options);
|
package/dist/index.js
CHANGED
|
@@ -7,4 +7,10 @@ const GitHubTheme_1 = require("./GitHubTheme");
|
|
|
7
7
|
*/
|
|
8
8
|
function load(app) {
|
|
9
9
|
app.renderer.defineTheme('typedoc-github-theme', GitHubTheme_1.GitHubTheme);
|
|
10
|
+
app.on('bootstrapEnd', () => {
|
|
11
|
+
if (app.options.isSet('theme') && app.options.getValue('theme') !== 'typedoc-github-theme') {
|
|
12
|
+
return app.logger.warn(`The theme'typedoc-github-theme' is not used because another theme (${app.options.getValue('theme')}) was specified!`);
|
|
13
|
+
}
|
|
14
|
+
app.options.setValue('theme', 'typedoc-github-theme');
|
|
15
|
+
});
|
|
10
16
|
}
|
package/package.json
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typedoc-github-theme",
|
|
3
3
|
"description": "Elegant and seamless look and feel for your TypeScript documentation on GitHub Pages",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
7
|
"repository": "https://github.com/KillerJulian/typedoc-github-theme",
|
|
8
8
|
"homepage": "https://killerjulian.github.io/typedoc-github-theme/",
|
|
9
9
|
"author": "KillerJulian <info@killerjulian.de>",
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"packageManager": "pnpm@9.
|
|
11
|
+
"packageManager": "pnpm@9.6.0",
|
|
12
12
|
"dependencies": {},
|
|
13
13
|
"peerDependencies": {
|
|
14
|
-
"typedoc": "^0.26.
|
|
14
|
+
"typedoc": "^0.26.0"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"@types/node": "^18.19.
|
|
18
|
-
"eslint": "9.
|
|
17
|
+
"@types/node": "^18.19.43",
|
|
18
|
+
"eslint": "9.8.0",
|
|
19
19
|
"eslint-config-prettier": "9.1.0",
|
|
20
20
|
"prettier": "3.3.3",
|
|
21
|
-
"typedoc": "~0.26.
|
|
22
|
-
"typescript": "5.5.
|
|
23
|
-
"typescript-eslint": "8.0.0
|
|
21
|
+
"typedoc": "~0.26.5",
|
|
22
|
+
"typescript": "5.5.4",
|
|
23
|
+
"typescript-eslint": "8.0.0"
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
26
|
"build": "pnpm build:lib && pnpm build:docs",
|
|
27
27
|
"build:lib": "tsc",
|
|
28
|
-
"build:docs": "typedoc src --plugin ./dist/index.js
|
|
28
|
+
"build:docs": "typedoc src --plugin ./dist/index.js",
|
|
29
29
|
"lint": "pnpm lint:format && pnpm lint:code",
|
|
30
30
|
"lint:code": "eslint .",
|
|
31
31
|
"lint:format": "prettier --check ."
|
|
@@ -1,58 +1,78 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* Define
|
|
2
|
+
* Define colors
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--
|
|
9
|
-
|
|
6
|
+
/* GitHub "Light default" */
|
|
7
|
+
--light-color-background: #ffffff;
|
|
8
|
+
--light-color-background-secondary: #f6f8fa;
|
|
9
|
+
--light-color-background-navbar: #f6f8fa;
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
* Define colors
|
|
13
|
-
*/
|
|
11
|
+
--light-color-accent: #d0d7de;
|
|
14
12
|
|
|
15
|
-
:
|
|
16
|
-
:
|
|
17
|
-
|
|
18
|
-
--color-
|
|
19
|
-
|
|
20
|
-
--color-
|
|
21
|
-
--color-
|
|
22
|
-
--color-header: #000000;
|
|
23
|
-
--color-code-background: #161b22;
|
|
13
|
+
--light-color-text: #1f2328;
|
|
14
|
+
--light-color-text-aside: #636c76;
|
|
15
|
+
|
|
16
|
+
--light-color-link: #0969da;
|
|
17
|
+
|
|
18
|
+
--light-color-warning-border: #f7ebba;
|
|
19
|
+
--light-color-background-warning: #fff8c5;
|
|
24
20
|
|
|
21
|
+
/* GitHub "Dark default" */
|
|
22
|
+
--dark-color-background: #0d1117;
|
|
23
|
+
--dark-color-background-secondary: #161b22;
|
|
24
|
+
--dark-color-background-navbar: #000000;
|
|
25
|
+
|
|
26
|
+
--dark-color-accent: #30363d;
|
|
27
|
+
|
|
28
|
+
--dark-color-text: #e6edf3;
|
|
29
|
+
--dark-color-text-aside: #8d96a0;
|
|
30
|
+
|
|
31
|
+
--dark-color-link: #4493f8;
|
|
32
|
+
|
|
33
|
+
--dark-color-warning-border: #3a2d12;
|
|
34
|
+
--dark-color-background-warning: #282215;
|
|
35
|
+
|
|
36
|
+
/* Link colors */
|
|
37
|
+
--color-warning-text: var(--color-text);
|
|
25
38
|
--color-icon-background: var(--color-background);
|
|
26
|
-
--
|
|
27
|
-
--hl-1: var(--color-text);
|
|
39
|
+
--color-focus-outline: var(--color-accent);
|
|
28
40
|
}
|
|
29
41
|
|
|
30
|
-
:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--color-header: #f6f8fa;
|
|
37
|
-
--color-code-background: #f6f8fa;
|
|
42
|
+
@media (prefers-color-scheme: light) {
|
|
43
|
+
:root {
|
|
44
|
+
--color-background-navbar: var(--light-color-background-navbar);
|
|
45
|
+
--color-warning-border: var(--light-color-warning-border);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
49
|
+
@media (prefers-color-scheme: dark) {
|
|
50
|
+
:root {
|
|
51
|
+
--color-background-navbar: var(--dark-color-background-navbar);
|
|
52
|
+
--color-warning-border: var(--dark-color-warning-border);
|
|
53
|
+
}
|
|
42
54
|
}
|
|
43
55
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
:root[data-theme='light'] {
|
|
57
|
+
--color-background-navbar: var(--light-color-background-navbar);
|
|
58
|
+
--color-warning-border: var(--light-color-warning-border);
|
|
59
|
+
}
|
|
47
60
|
|
|
48
|
-
|
|
49
|
-
|
|
61
|
+
:root[data-theme='dark'] {
|
|
62
|
+
--color-background-navbar: var(--dark-color-background-navbar);
|
|
63
|
+
--color-warning-border: var(--dark-color-warning-border);
|
|
50
64
|
}
|
|
51
65
|
|
|
52
66
|
/*
|
|
53
|
-
*
|
|
67
|
+
* Define fonts
|
|
54
68
|
*/
|
|
55
69
|
|
|
70
|
+
:root {
|
|
71
|
+
--font-family-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
|
72
|
+
'Segoe UI Emoji';
|
|
73
|
+
--font-family-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
74
|
+
}
|
|
75
|
+
|
|
56
76
|
body {
|
|
57
77
|
font-family: var(--font-family-text);
|
|
58
78
|
}
|
|
@@ -67,7 +87,6 @@ h3,
|
|
|
67
87
|
h4,
|
|
68
88
|
h5,
|
|
69
89
|
h6 {
|
|
70
|
-
color: var(--color-text);
|
|
71
90
|
margin-top: 1em;
|
|
72
91
|
margin-bottom: 0.5em;
|
|
73
92
|
}
|
|
@@ -78,7 +97,7 @@ h6 {
|
|
|
78
97
|
|
|
79
98
|
a,
|
|
80
99
|
.tsd-kind-class {
|
|
81
|
-
color: var(--color-
|
|
100
|
+
color: var(--color-link);
|
|
82
101
|
text-decoration: underline;
|
|
83
102
|
}
|
|
84
103
|
|
|
@@ -90,8 +109,8 @@ a,
|
|
|
90
109
|
text-decoration: underline;
|
|
91
110
|
}
|
|
92
111
|
|
|
93
|
-
.tsd-
|
|
94
|
-
color: var(--color-
|
|
112
|
+
.tsd-sources a {
|
|
113
|
+
color: var(--color-link);
|
|
95
114
|
}
|
|
96
115
|
|
|
97
116
|
/*
|
|
@@ -105,18 +124,17 @@ ol {
|
|
|
105
124
|
}
|
|
106
125
|
|
|
107
126
|
li::marker {
|
|
108
|
-
color: var(--color-
|
|
127
|
+
color: var(--color-accent);
|
|
109
128
|
}
|
|
110
129
|
|
|
111
130
|
/*
|
|
112
|
-
* Input
|
|
131
|
+
* Input fields
|
|
113
132
|
*/
|
|
114
133
|
|
|
115
|
-
input
|
|
116
|
-
|
|
117
|
-
background-color: var(--color-header);
|
|
134
|
+
input {
|
|
135
|
+
background-color: var(--color-background-secondary);
|
|
118
136
|
color: var(--color-text);
|
|
119
|
-
border: 1px solid var(--color-
|
|
137
|
+
border: 1px solid var(--color-accent);
|
|
120
138
|
border-radius: 6px;
|
|
121
139
|
padding: 8px;
|
|
122
140
|
width: 100%;
|
|
@@ -132,7 +150,6 @@ table {
|
|
|
132
150
|
|
|
133
151
|
.tsd-typography th,
|
|
134
152
|
.tsd-typography td {
|
|
135
|
-
border: 1px solid var(--color-border);
|
|
136
153
|
padding: 8px;
|
|
137
154
|
text-align: left;
|
|
138
155
|
}
|
|
@@ -143,7 +160,7 @@ table {
|
|
|
143
160
|
}
|
|
144
161
|
|
|
145
162
|
.tsd-typography tr:nth-child(2n) {
|
|
146
|
-
background-color: var(--color-code
|
|
163
|
+
background-color: var(--color-background-code);
|
|
147
164
|
}
|
|
148
165
|
|
|
149
166
|
/*
|
|
@@ -151,7 +168,7 @@ table {
|
|
|
151
168
|
*/
|
|
152
169
|
|
|
153
170
|
.tsd-typography hr {
|
|
154
|
-
color: var(--color-
|
|
171
|
+
color: var(--color-accent);
|
|
155
172
|
}
|
|
156
173
|
|
|
157
174
|
/*
|
|
@@ -159,9 +176,9 @@ table {
|
|
|
159
176
|
*/
|
|
160
177
|
|
|
161
178
|
button {
|
|
162
|
-
background-color: var(--color-
|
|
179
|
+
background-color: var(--color-background-navbar);
|
|
163
180
|
color: var(--color-text);
|
|
164
|
-
border: 1px solid var(--color-
|
|
181
|
+
border: 1px solid var(--color-accent);
|
|
165
182
|
border-radius: 6px;
|
|
166
183
|
padding: 8px 16px;
|
|
167
184
|
cursor: pointer;
|
|
@@ -169,7 +186,7 @@ button {
|
|
|
169
186
|
}
|
|
170
187
|
|
|
171
188
|
button:hover {
|
|
172
|
-
background-color: var(--color-
|
|
189
|
+
background-color: var(--color-accent);
|
|
173
190
|
}
|
|
174
191
|
|
|
175
192
|
pre > button {
|
|
@@ -197,12 +214,12 @@ pre > button {
|
|
|
197
214
|
|
|
198
215
|
.tsd-checkbox-background {
|
|
199
216
|
fill: var(--color-background);
|
|
200
|
-
stroke: var(--color-
|
|
217
|
+
stroke: var(--color-accent);
|
|
201
218
|
stroke-width: 6px;
|
|
202
219
|
}
|
|
203
220
|
|
|
204
221
|
input[type='checkbox']:checked ~ svg .tsd-checkbox-background {
|
|
205
|
-
fill: var(--color-
|
|
222
|
+
fill: var(--color-accent);
|
|
206
223
|
}
|
|
207
224
|
|
|
208
225
|
.tsd-checkbox-checkmark {
|
|
@@ -215,8 +232,7 @@ input[type='checkbox']:checked ~ svg .tsd-checkbox-background {
|
|
|
215
232
|
|
|
216
233
|
select {
|
|
217
234
|
background-color: var(--color-background);
|
|
218
|
-
|
|
219
|
-
border: 1px solid var(--color-border);
|
|
235
|
+
border: 1px solid var(--color-accent);
|
|
220
236
|
border-radius: 6px;
|
|
221
237
|
padding: 8px;
|
|
222
238
|
font-family: inherit;
|
|
@@ -226,28 +242,39 @@ select {
|
|
|
226
242
|
* Code blocks
|
|
227
243
|
*/
|
|
228
244
|
|
|
229
|
-
|
|
230
|
-
|
|
245
|
+
code,
|
|
246
|
+
pre {
|
|
231
247
|
border: none;
|
|
232
248
|
border-radius: 6px;
|
|
233
249
|
margin: 1em 0;
|
|
234
|
-
background-color: var(--color-
|
|
250
|
+
background-color: var(--color-background-secondary);
|
|
235
251
|
color: var(--color-text);
|
|
236
252
|
font-family: var(--font-family-code);
|
|
237
253
|
}
|
|
238
254
|
|
|
239
255
|
code.tsd-tag {
|
|
240
|
-
background-color: var(--color-
|
|
256
|
+
background-color: var(--color-accent);
|
|
241
257
|
border: unset;
|
|
242
258
|
}
|
|
243
259
|
|
|
260
|
+
/*
|
|
261
|
+
* Warnings
|
|
262
|
+
*/
|
|
263
|
+
|
|
264
|
+
.warning {
|
|
265
|
+
border-style: solid;
|
|
266
|
+
border-width: 1px;
|
|
267
|
+
border-color: var(--color-warning-border);
|
|
268
|
+
border-radius: 6px;
|
|
269
|
+
}
|
|
270
|
+
|
|
244
271
|
/*
|
|
245
272
|
* Topbar
|
|
246
273
|
*/
|
|
247
274
|
|
|
248
275
|
.tsd-page-toolbar {
|
|
249
|
-
background-color: var(--color-
|
|
250
|
-
border-bottom-color: var(--color-
|
|
276
|
+
background-color: var(--color-background-navbar);
|
|
277
|
+
border-bottom-color: var(--color-accent);
|
|
251
278
|
}
|
|
252
279
|
|
|
253
280
|
.tsd-page-toolbar a.title:hover {
|
|
@@ -255,13 +282,13 @@ code.tsd-tag {
|
|
|
255
282
|
}
|
|
256
283
|
|
|
257
284
|
#tsd-search.has-focus {
|
|
258
|
-
background-color: var(--color-
|
|
285
|
+
background-color: var(--color-background-navbar);
|
|
259
286
|
}
|
|
260
287
|
|
|
261
288
|
#tsd-search .results,
|
|
262
289
|
#tsd-search .results li,
|
|
263
290
|
#tsd-search .results li:nth-child(2n) {
|
|
264
|
-
background-color: var(--color-
|
|
291
|
+
background-color: var(--color-background-navbar);
|
|
265
292
|
}
|
|
266
293
|
|
|
267
294
|
#tsd-search .results li {
|
|
@@ -269,13 +296,13 @@ code.tsd-tag {
|
|
|
269
296
|
}
|
|
270
297
|
|
|
271
298
|
#tsd-search .results li:hover:not(.no-results) {
|
|
272
|
-
background-color: var(--color-
|
|
299
|
+
background-color: var(--color-accent);
|
|
273
300
|
}
|
|
274
301
|
|
|
275
302
|
#tsd-search .results {
|
|
276
303
|
border-style: solid;
|
|
277
304
|
border-width: 1px;
|
|
278
|
-
border-color: var(--color-
|
|
305
|
+
border-color: var(--color-accent);
|
|
279
306
|
border-radius: 0px 0px 6px 6px;
|
|
280
307
|
overflow: hidden;
|
|
281
308
|
}
|
|
@@ -289,7 +316,7 @@ code.tsd-tag {
|
|
|
289
316
|
*/
|
|
290
317
|
|
|
291
318
|
footer {
|
|
292
|
-
border-top-color: var(--color-
|
|
319
|
+
border-top-color: var(--color-accent);
|
|
293
320
|
}
|
|
294
321
|
|
|
295
322
|
/*
|
|
@@ -327,7 +354,7 @@ footer {
|
|
|
327
354
|
.tsd-member-group {
|
|
328
355
|
background-color: var(--color-background);
|
|
329
356
|
padding: 16px;
|
|
330
|
-
border: 1px var(--color-
|
|
357
|
+
border: 1px var(--color-accent) solid;
|
|
331
358
|
border-radius: 6px;
|
|
332
359
|
}
|
|
333
360
|
|
|
@@ -346,12 +373,12 @@ footer {
|
|
|
346
373
|
}
|
|
347
374
|
|
|
348
375
|
.tsd-signature {
|
|
349
|
-
border: 1px solid var(--color-
|
|
376
|
+
border: 1px solid var(--color-accent);
|
|
350
377
|
border-radius: 6px;
|
|
351
378
|
}
|
|
352
379
|
|
|
353
380
|
.tsd-signatures .tsd-signature {
|
|
354
|
-
border-color: var(--color-
|
|
381
|
+
border-color: var(--color-accent);
|
|
355
382
|
border-radius: 0px;
|
|
356
383
|
}
|
|
357
384
|
|
|
@@ -359,6 +386,10 @@ footer {
|
|
|
359
386
|
border-radius: 6px;
|
|
360
387
|
}
|
|
361
388
|
|
|
389
|
+
.tsd-full-hierarchy:not(:last-child) {
|
|
390
|
+
border-bottom: var(--color-accent);
|
|
391
|
+
}
|
|
392
|
+
|
|
362
393
|
/*
|
|
363
394
|
* Footer
|
|
364
395
|
*/
|