├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── cli.js
├── dist
├── docsify-style.min.css
├── docsify-themeable
│ ├── index.min.js
│ ├── main.min.js
│ └── style.min.css
├── index.min.js
└── style.min.css
├── docs
├── .nojekyll
├── CNAME
├── README.md
├── _coverpage.md
├── _navbar.md
├── _sidebar.md
├── changelog.md
├── configuration.md
├── css
│ ├── docsify-style.css
│ └── style.css
├── docsifyThemeable.md
├── features.md
├── images
│ └── browserSupport.png
├── index.html
├── installation.md
├── js
│ └── index.js
├── releasenotes
│ └── devdotto.md
├── showcase.md
└── themeSupport.md
├── google32bbad7f9ccc9846.html
├── icons
├── docsify-darklight-theme-logo.png
├── favicon.png
├── moon.svg
└── sun.svg
├── package-lock.json
├── package.json
├── postcss.config.js
├── rollup.config.js
├── starter
├── .nojekyll
├── README.md
├── _coverpage.md
├── _navbar.md
├── _sidebar.md
├── css
│ └── style.css
├── favicon.ico
├── index.html
└── quickstart.md
└── themeableDocs
├── .nojekyll
├── README.md
├── _coverpage.md
├── _navbar.md
├── _sidebar.md
├── css
└── index.css
├── favicon.ico
├── index.html
├── js
├── index.js
└── main.js
└── quickstart.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs
2 | node_modules
3 | postcss.config.js
4 | rollup.config.js
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-present Boopathi Kumar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 | docsify-darklight-theme
9 |
10 |
11 | Docs | Preview
12 |
13 |
14 |
15 |
16 |
18 |
19 |
21 |
22 |
24 |
25 |
27 |
28 |
30 |
31 |
33 |
34 |
35 |
36 | Dark and Light theme with switch for your docsify site
37 |
38 |
39 | view starter template installation guide
40 |
41 |
42 | # What it is
43 |
44 |
45 | **docsify-darklight-theme** is a simple and highly customizable theme for the documentation websites generated using [docsify.js](https://docsify.js.org/) ( also with [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/) ). Using this theme, documents will have a theme switcher to switch between -1?l:(l+" alternate").trim();a.setAttribute("rel",o)}}(window.$docsify||{}).themeable&&window.$docsify.themeable.util.cssVars()}t||(t=!0,document.addEventListener("DOMContentLoaded",(function(){var t=sessionStorage.getItem("activeStylesheetHref");t&&e(t)})),document.addEventListener("click",(function(t){var r=t.target.getAttribute("data-link-href"),n=t.target.getAttribute("data-link-title");(r||n)&&(e(r,n=n||t.target.textContent||"_"+Math.random().toString(36).substr(2,9)),t.preventDefault())})))}();
2 |
--------------------------------------------------------------------------------
/dist/docsify-themeable/style.min.css:
--------------------------------------------------------------------------------
1 | #docsify-darklight-theme{border:none;background-color:transparent;position:absolute;right:-13px;top:75px;width:25px;height:25px;background-repeat:no-repeat;background-image:var(--toogleImage);background-size:cover;cursor:pointer;transition:background-image .15s ease-in-out .15s}
--------------------------------------------------------------------------------
/dist/index.min.js:
--------------------------------------------------------------------------------
1 | window.$docsify.plugins=[].concat((e,t)=>{let o={siteFont:"PT Sans",defaultTheme:"dark",codeFontFamily:"Roboto Mono, Monaco, courier, monospace",bodyFontSize:"17px",dark:{accent:"#42b983",toogleBackground:"#ffffff",background:"#091a28",textColor:"#b4b4b4",codeTextColor:"#ffffff",codeBackgroundColor:"#0e2233",borderColor:"#0d2538",blockQuoteColour:"#858585",highlightColor:"#d22778",sidebarSublink:"#b4b4b4",codeTypeColor:"#ffffff",coverBackground:"linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)",toogleImage:"url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)"},light:{accent:"#42b983",toogleBackground:"#091a28",background:"#ffffff",textColor:"#34495e",codeTextColor:"#525252",codeBackgroundColor:"#f8f8f8",borderColor:"rgba(0, 0, 0, 0.07)",blockQuoteColor:"#858585",highlightColor:"#d22778",sidebarSublink:"#505d6b",codeTypeColor:"#091a28",coverBackground:"linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)",toogleImage:"url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)"}};if(t.config.hasOwnProperty("darklightTheme")){for(var[r,l]of Object.entries(t.config.darklightTheme))"light"!==r&&"dark"!==r&&"defaultTheme"!==r&&(o[r]=l);for(var[r,l]of Object.entries(o))"light"!==r&&"dark"!==r&&(o[r]=l,document.documentElement.style.setProperty("--"+r,l));if(t.config.darklightTheme.hasOwnProperty("dark"))for(var[r,l]of Object.entries(t.config.darklightTheme.dark))o.dark[r]=l;if(t.config.darklightTheme.hasOwnProperty("light"))for(var[r,l]of Object.entries(t.config.darklightTheme.light))o.light[r]=l}else for(var[r,l]of Object.entries(o))"light"!==r&&"dark"!==r&&(o[r]=l,document.documentElement.style.setProperty("--"+r,l));window.matchMedia("(prefers-color-scheme: dark)").matches?o.defaultTheme="dark":window.matchMedia("(prefers-color-scheme: light)").matches&&(o.defaultTheme="light");var d=e=>{if(localStorage.setItem("DARK_LIGHT_THEME",e),o.defaultTheme=e,"light"==e)for(var[t,r]of Object.entries(o.light))document.documentElement.style.setProperty("--"+t,r);else if("dark"==e)for(var[t,r]of Object.entries(o.dark))document.documentElement.style.setProperty("--"+t,r);document.documentElement.style.setProperty("color-scheme",e),document.getElementById("docsify-darklight-theme").setAttribute("aria-pressed","dark"===e)};e.afterEach((function(e,t){t(e='
2 |
4 | docsify-darklight-theme
5 |
6 |
7 |
8 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
26 | Dark and Light theme with switch for your docsify site
27 |
28 | # What it is
29 |
30 | **docsify-darklight-theme** is a simple and highly customizable theme for the documentation websites generated using [docsify.js](https://docsify.js.org/) ( also with [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/) ). Using this theme, documents will have a theme switcher to switch between :
27 | },
28 | light: {
29 | :
30 | }
31 |
32 | }
33 |
34 | // ...
35 |
36 | };
37 |
38 | ```
39 |
40 | ### Default themes configuration
41 |
42 | You can be overwrite directly in `window.$docsify` configuration object
43 |
44 | ```js
45 |
46 | window.$docsify = {
47 |
48 | darklightTheme: {
49 | siteFont : "PT Sans",
50 | defaultTheme : 'dark',
51 | codeFontFamily : 'Roboto Mono, Monaco, courier, monospace',
52 | bodyFontSize : '17px',
53 | dark: {
54 | accent: '#42b983',
55 | toogleBackground : '#ffffff',
56 | background: '#091a28',
57 | textColor: '#b4b4b4',
58 | codeTextColor : '#ffffff',
59 | codeBackgroundColor : '#0e2233',
60 | borderColor : '#0d2538',
61 | blockQuoteColor : '#858585',
62 | highlightColor : '#d22778',
63 | sidebarSublink : '#b4b4b4',
64 | codeTypeColor : '#ffffff',
65 | coverBackground : 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
66 | toogleImage : 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)'
67 | },
68 | light: {
69 | accent: '#42b983',
70 | toogleBackground : '#091a28',
71 | background: '#ffffff',
72 | textColor: '#34495e',
73 | codeTextColor : '#525252',
74 | codeBackgroundColor : '#f8f8f8',
75 | borderColor : 'rgba(0, 0, 0, 0.07)',
76 | blockQuoteColor : '#858585',
77 | highlightColor : '#d22778',
78 | sidebarSublink : '#b4b4b4',
79 | codeTypeColor : '#091a28',
80 | coverBackground : 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
81 | toogleImage : 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)'
82 | }
83 | }
84 | };
85 |
86 | ```
87 |
--------------------------------------------------------------------------------
/docs/css/docsify-style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
2 | * {
3 | -webkit-font-smoothing: antialiased;
4 | -webkit-overflow-scrolling: touch;
5 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
6 | -webkit-text-size-adjust: none;
7 | -webkit-touch-callout: none;
8 | box-sizing: border-box
9 | }
10 |
11 |
12 | body:not(.ready) {
13 | overflow: hidden
14 | }
15 |
16 | .search {
17 | border-bottom: 1px solid var(--borderColor) !important;
18 | }
19 |
20 | .search input {
21 | background-color: var(--background) !important;
22 | margin: 0 auto;
23 | color: var(--textColor);
24 | }
25 |
26 | body:not(.ready) .app-nav,
27 | body:not(.ready)>nav,
28 | body:not(.ready) [data-cloak] {
29 | display: none
30 | }
31 |
32 | div#app {
33 | font-size: 30px;
34 | font-weight: lighter;
35 | margin: 40vh auto;
36 | text-align: center
37 | }
38 |
39 | div#app:empty:before {
40 | content: "Loading..."
41 | }
42 |
43 | .emoji {
44 | height: 1.2rem;
45 | vertical-align: middle
46 | }
47 |
48 | .progress {
49 | background-color: var(--accent);
50 | height: 2px;
51 | left: 0;
52 | position: fixed;
53 | right: 0;
54 | top: 0;
55 | transition: width .2s, opacity .4s;
56 | width: 0;
57 | z-index: 999999
58 | }
59 |
60 | .search .search-keyword,
61 | .search a:hover {
62 | color: var(--accent)
63 | }
64 |
65 | .search .search-keyword {
66 | font-style: normal;
67 | font-weight: 700
68 | }
69 |
70 | body,
71 | html {
72 | height: 100%
73 | }
74 |
75 | body {
76 | -moz-osx-font-smoothing: grayscale;
77 | -webkit-font-smoothing: antialiased;
78 | color: var(--textColor);
79 | font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif;
80 | font-size: var(--bodyFontSize);
81 | letter-spacing: 0;
82 | margin: 0;
83 | overflow-x: hidden;
84 |
85 | }
86 |
87 | .markdown-section h2 {
88 | color: #fff;
89 | }
90 |
91 | img {
92 | max-width: 100%
93 | }
94 |
95 | a[disabled] {
96 | cursor: not-allowed;
97 | opacity: .6
98 | }
99 |
100 | kbd {
101 | border: 1px solid #ccc;
102 | border-radius: 3px;
103 | display: inline-block;
104 | font-size: 12px!important;
105 | line-height: 12px;
106 | margin-bottom: 3px;
107 | padding: 3px 5px;
108 | vertical-align: middle
109 | }
110 |
111 | li input[type=checkbox] {
112 | margin: 0 .2em .25em 0;
113 | vertical-align: middle
114 | }
115 |
116 | .app-nav {
117 | margin: 25px 60px 0 0;
118 | position: absolute;
119 | right: 0;
120 | text-align: right;
121 | z-index: 10
122 | }
123 |
124 | .app-nav.no-badge {
125 | margin-right: 25px
126 | }
127 |
128 | .app-nav p {
129 | margin: 0
130 | }
131 |
132 | .app-nav>a {
133 | margin: 0 1rem;
134 | padding: 5px 0
135 | }
136 |
137 | .app-nav li,
138 | .app-nav ul {
139 | display: inline-block;
140 | list-style: none;
141 | margin: 0
142 | }
143 |
144 | .app-nav a {
145 | color: inherit;
146 | font-size: 16px;
147 | text-decoration: none;
148 | transition: color .3s
149 | }
150 |
151 | .app-nav a.active,
152 | .app-nav a:hover {
153 | color: var(--accent)
154 | }
155 |
156 | .app-nav a.active {
157 | border-bottom: 2px solid var(--accent)
158 | }
159 |
160 | .app-nav li {
161 | display: inline-block;
162 | margin: 0 1rem;
163 | padding: 5px 0;
164 | position: relative;
165 | cursor: pointer
166 | }
167 |
168 | .app-nav li ul {
169 | background-color: #fff;
170 | border: 1px solid;
171 | border-color: #ddd #ddd #ccc;
172 | border-radius: 4px;
173 | box-sizing: border-box;
174 | display: none;
175 | max-height: calc(100vh - 61px);
176 | overflow-y: auto;
177 | padding: 10px 0;
178 | position: absolute;
179 | right: -15px;
180 | text-align: left;
181 | top: 100%;
182 | white-space: nowrap
183 | }
184 |
185 | .app-nav li ul li {
186 | display: block;
187 | font-size: 14px;
188 | line-height: 1rem;
189 | margin: 8px 14px;
190 | white-space: nowrap
191 | }
192 |
193 | .app-nav li ul a {
194 | display: block;
195 | font-size: inherit;
196 | margin: 0;
197 | padding: 0
198 | }
199 |
200 | .app-nav li ul a.active {
201 | border-bottom: 0
202 | }
203 |
204 | .app-nav li:hover ul {
205 | display: block
206 | }
207 |
208 | .github-corner {
209 | border-bottom: 0;
210 | position: fixed;
211 | right: 0;
212 | text-decoration: none;
213 | top: 0;
214 | z-index: 1
215 | }
216 |
217 | .github-corner:hover .octo-arm {
218 | -webkit-animation: octocat-wave .56s ease-in-out;
219 | animation: octocat-wave .56s ease-in-out
220 | }
221 |
222 | .github-corner svg {
223 | color: #fff;
224 | fill: var(--accent);
225 | height: 70px;
226 | width: 70px
227 | }
228 |
229 | main {
230 | display: block;
231 | position: relative;
232 | width: 100vw;
233 | height: 100%;
234 | z-index: 0
235 | }
236 |
237 | main.hidden {
238 | display: none
239 | }
240 |
241 | .anchor {
242 | display: inline-block;
243 | text-decoration: none;
244 | transition: all .3s
245 | }
246 |
247 | .anchor span {
248 | color: var(--textColor);
249 | }
250 |
251 | .anchor:hover {
252 | text-decoration: underline
253 | }
254 |
255 | .sidebar {
256 | border-right: 1px solid var(--borderColor);
257 | overflow-y: auto;
258 | padding: 40px 0 0;
259 | position: absolute;
260 | top: 0;
261 | bottom: 0;
262 | left: 0;
263 | transition: transform .25s ease-out;
264 | width: 300px;
265 | z-index: 20
266 | }
267 |
268 | .sidebar>h1 {
269 | margin: 0 auto 1rem;
270 | font-size: 1.5rem;
271 | font-weight: 300;
272 | text-align: center
273 | }
274 |
275 | .sidebar>h1 a {
276 | color: inherit;
277 | text-decoration: none
278 | }
279 |
280 | .sidebar>h1 .app-nav {
281 | display: block;
282 | position: static
283 | }
284 |
285 | .sidebar .sidebar-nav {
286 | line-height: 2em;
287 | padding-bottom: 40px
288 | }
289 |
290 | .sidebar li.collapse .app-sub-sidebar {
291 | display: none
292 | }
293 |
294 | .sidebar ul {
295 | margin: 0 0 0 15px;
296 | padding: 0
297 | }
298 |
299 | .sidebar li>p {
300 | font-weight: 700;
301 | margin: 0
302 | }
303 |
304 | .sidebar ul,
305 | .sidebar ul li {
306 | list-style: none
307 | }
308 |
309 | .sidebar ul li a {
310 | border-bottom: none;
311 | display: block
312 | }
313 |
314 | .sidebar ul li ul {
315 | padding-left: 20px
316 | }
317 |
318 | .sidebar::-webkit-scrollbar {
319 | width: 4px
320 | }
321 |
322 | .sidebar::-webkit-scrollbar-thumb {
323 | background: transparent;
324 | border-radius: 4px
325 | }
326 |
327 | .sidebar:hover::-webkit-scrollbar-thumb {
328 | background: hsla(0, 0%, 53.3%, .4)
329 | }
330 |
331 | .sidebar:hover::-webkit-scrollbar-track {
332 | background: hsla(0, 0%, 53.3%, .1)
333 | }
334 |
335 | .sidebar-toggle {
336 | background-color: transparent;
337 | border: 0;
338 | outline: none;
339 | padding: 10px;
340 | position: absolute;
341 | bottom: 0;
342 | left: 0;
343 | text-align: center;
344 | transition: opacity .3s;
345 | width: 284px;
346 | z-index: 30;
347 | cursor: pointer
348 | }
349 |
350 | .sidebar-toggle:hover .sidebar-toggle-button {
351 | opacity: .4
352 | }
353 |
354 | .sidebar-toggle span {
355 | background-color: var(--accent);
356 | display: block;
357 | margin-bottom: 4px;
358 | width: 16px;
359 | height: 2px
360 | }
361 |
362 | body.sticky .sidebar,
363 | body.sticky .sidebar-toggle {
364 | position: fixed
365 | }
366 |
367 | .content {
368 | padding-top: 60px;
369 | position: absolute;
370 | top: 0;
371 | right: 0;
372 | bottom: 0;
373 | left: 300px;
374 | transition: left .25s ease
375 | }
376 |
377 | .markdown-section {
378 | margin: 0 auto;
379 | max-width: 90%;
380 | padding: 30px 15px 40px;
381 | position: relative
382 | }
383 |
384 | .markdown-section>* {
385 | box-sizing: border-box;
386 | font-size: inherit
387 | }
388 |
389 | .markdown-section>:first-child {
390 | margin-top: 0!important
391 | }
392 |
393 | .markdown-section hr {
394 | border: none;
395 | border-bottom: 1px solid #eee;
396 | margin: 2em 0
397 | }
398 |
399 | .markdown-section iframe {
400 | border: 1px solid #eee;
401 | width: 1px;
402 | min-width: 100%
403 | }
404 |
405 | .markdown-section table {
406 | border-collapse: collapse;
407 | border-spacing: 0;
408 | display: block;
409 | margin-bottom: 1rem;
410 | overflow: auto;
411 | width: 100%
412 | }
413 |
414 | .markdown-section th {
415 | font-weight: 700
416 | }
417 |
418 | .markdown-section td,
419 | .markdown-section th {
420 | border: 1px solid #ddd;
421 | padding: 6px 13px
422 | }
423 |
424 | .markdown-section tr {
425 | border-top: 1px solid #ccc
426 | }
427 |
428 | .markdown-section p.tip,
429 | .markdown-section tr:nth-child(2n) {
430 | background-color: var(--codeBackgroundColor)
431 | }
432 |
433 | .markdown-section p.tip {
434 | border-bottom-right-radius: 2px;
435 | border-left: 4px solid #f66;
436 | border-top-right-radius: 2px;
437 | margin: 2em 0;
438 | padding: 12px 24px 12px 30px;
439 | position: relative
440 | }
441 |
442 | .markdown-section p.tip:before {
443 | background-color: #f66;
444 | border-radius: 100%;
445 | color: #fff;
446 | content: "!";
447 | font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
448 | font-size: 14px;
449 | font-weight: 700;
450 | left: -12px;
451 | line-height: 20px;
452 | position: absolute;
453 | height: 20px;
454 | width: 20px;
455 | text-align: center;
456 | top: 14px
457 | }
458 |
459 | .markdown-section p.tip code {
460 | background-color: #efefef
461 | }
462 |
463 | .markdown-section p.tip em {
464 | color: #34495e
465 | }
466 |
467 | .markdown-section p.warn {
468 | background: rgba(66, 185, 131, .1);
469 | border-radius: 2px;
470 | padding: 1rem
471 | }
472 |
473 | .markdown-section ul.task-list>li {
474 | list-style-type: none
475 | }
476 |
477 | body.close .sidebar {
478 | transform: translateX(-300px)
479 | }
480 |
481 | body.close .sidebar-toggle {
482 | width: auto
483 | }
484 |
485 | body.close .content {
486 | left: 0
487 | }
488 |
489 | @media print {
490 | .app-nav,
491 | .github-corner,
492 | .sidebar,
493 | .sidebar-toggle {
494 | display: none
495 | }
496 | }
497 |
498 | @media screen and (max-width:768px) {
499 | .github-corner,
500 | .sidebar,
501 | .sidebar-toggle {
502 | position: fixed
503 | }
504 | .app-nav {
505 | margin-top: 16px
506 | }
507 | .app-nav li ul {
508 | top: 30px
509 | }
510 | main {
511 | height: auto;
512 | overflow-x: hidden
513 | }
514 | .sidebar {
515 | left: -300px;
516 | transition: transform .25s ease-out
517 | }
518 | .content {
519 | left: 0;
520 | max-width: 100vw;
521 | position: static;
522 | padding-top: 20px;
523 | transition: transform .25s ease
524 | }
525 | .app-nav,
526 | .github-corner {
527 | transition: transform .25s ease-out
528 | }
529 | .sidebar-toggle {
530 | background-color: transparent;
531 | width: auto;
532 | padding: 30px 30px 10px 10px
533 | }
534 | body.close .sidebar {
535 | transform: translateX(300px)
536 | }
537 | body.close .sidebar-toggle {
538 | transition: background-color 1s;
539 | width: 284px;
540 | padding: 10px
541 | }
542 | body.close .content {
543 | transform: translateX(300px)
544 | }
545 | body.close .app-nav,
546 | body.close .github-corner {
547 | display: none
548 | }
549 | .github-corner:hover .octo-arm {
550 | -webkit-animation: none;
551 | animation: none
552 | }
553 | .github-corner .octo-arm {
554 | -webkit-animation: octocat-wave .56s ease-in-out;
555 | animation: octocat-wave .56s ease-in-out
556 | }
557 | }
558 |
559 | @-webkit-keyframes octocat-wave {
560 | 0%,
561 | to {
562 | transform: rotate(0)
563 | }
564 | 20%,
565 | 60% {
566 | transform: rotate(-25deg)
567 | }
568 | 40%,
569 | 80% {
570 | transform: rotate(10deg)
571 | }
572 | }
573 |
574 | @keyframes octocat-wave {
575 | 0%,
576 | to {
577 | transform: rotate(0)
578 | }
579 | 20%,
580 | 60% {
581 | transform: rotate(-25deg)
582 | }
583 | 40%,
584 | 80% {
585 | transform: rotate(10deg)
586 | }
587 | }
588 |
589 | section.cover {
590 | align-items: center;
591 | background-position: 50%;
592 | background-repeat: no-repeat;
593 | background-size: cover;
594 | height: 100vh;
595 | display: none
596 | }
597 |
598 | section.cover.show {
599 | display: flex;
600 | background: var(--coverBackground)!important;
601 | }
602 |
603 | section.cover.has-mask .mask {
604 | background-color: #fff;
605 | opacity: .8;
606 | position: absolute;
607 | top: 0;
608 | height: 100%;
609 | width: 100%
610 | }
611 |
612 | section.cover .cover-main {
613 | flex: 1;
614 | margin: -20px 16px 0;
615 | text-align: center;
616 | z-index: 1
617 | }
618 |
619 | section.cover a {
620 | color: inherit
621 | }
622 |
623 | section.cover a,
624 | section.cover a:hover {
625 | text-decoration: none
626 | }
627 |
628 | section.cover p {
629 | line-height: 1.5rem;
630 | margin: 1em 0
631 | }
632 |
633 | section.cover h1 {
634 | color: inherit;
635 | font-size: 2.5rem;
636 | font-weight: 300;
637 | margin: .625rem 0 2.5rem;
638 | position: relative;
639 | text-align: center
640 | }
641 |
642 | section.cover h1 a {
643 | display: block
644 | }
645 |
646 | section.cover h1 small {
647 | bottom: -.4375rem;
648 | font-size: 1rem;
649 | position: absolute
650 | }
651 |
652 | section.cover blockquote {
653 | font-size: 1.5rem;
654 | text-align: center
655 | }
656 |
657 | section.cover ul {
658 | line-height: 1.8;
659 | list-style-type: none;
660 | margin: 1em auto;
661 | max-width: 500px;
662 | padding: 0
663 | }
664 |
665 | section.cover .cover-main>p:last-child a {
666 | border-radius: 2rem;
667 | border: 1px solid var(--accent);
668 | box-sizing: border-box;
669 | color: var(--accent);
670 | display: inline-block;
671 | font-size: 1.05rem;
672 | letter-spacing: .1rem;
673 | margin: .5rem 1rem;
674 | padding: .75em 2rem;
675 | text-decoration: none;
676 | transition: all .15s ease
677 | }
678 |
679 | section.cover .cover-main>p:last-child a:last-child {
680 | background-color: var(--accent);
681 | color: #fff
682 | }
683 |
684 | section.cover .cover-main>p:last-child a:last-child:hover {
685 | color: inherit;
686 | opacity: .8
687 | }
688 |
689 | section.cover .cover-main>p:last-child a:hover {
690 | color: inherit
691 | }
692 |
693 | section.cover blockquote>p>a {
694 | border-bottom: 2px solid var(--accent);
695 | transition: color .3s
696 | }
697 |
698 | section.cover blockquote>p>a:hover {
699 | color: var(--accent)
700 | }
701 |
702 | .sidebar,
703 | body {
704 | background-color: var(--background);
705 | transition: background-image .15s ease-in-out .15s;
706 | }
707 |
708 | .sidebar {
709 | color: var(--textColor);
710 | }
711 |
712 | .sidebar li {
713 | margin: 6px 0
714 | }
715 |
716 | .sidebar ul li a {
717 | color: var(--sidebarSublink);
718 | font-size: 14px;
719 | font-weight: 400;
720 | overflow: hidden;
721 | text-decoration: none;
722 | text-overflow: ellipsis;
723 | white-space: nowrap
724 | }
725 |
726 | .sidebar ul li a:hover {
727 | text-decoration: underline
728 | }
729 |
730 | .sidebar ul li ul {
731 | padding: 0
732 | }
733 |
734 | .sidebar ul li.active>a {
735 | border-right: 2px solid;
736 | color: var(--accent);
737 | font-weight: 600
738 | }
739 |
740 | .app-sub-sidebar li:before {
741 | content: "-";
742 | padding-right: 4px;
743 | float: left
744 | }
745 |
746 | .markdown-section h1,
747 | .markdown-section h2,
748 | .markdown-section h3,
749 | .markdown-section h4,
750 | .markdown-section strong {
751 | color: var(--textColor);
752 | font-weight: 600
753 | }
754 |
755 | .markdown-section a {
756 | color: var(--accent);
757 | font-weight: 600;
758 | text-decoration: none;
759 | }
760 |
761 | .markdown-section h1 {
762 | font-size: 2rem;
763 | margin: 0 0 1rem
764 | }
765 |
766 | .markdown-section h2 {
767 | font-size: 1.75rem;
768 | margin: 45px 0 .8rem
769 | }
770 |
771 | .markdown-section h3 {
772 | font-size: 1.5rem;
773 | margin: 40px 0 .6rem
774 | }
775 |
776 | .markdown-section h4 {
777 | font-size: 1.25rem
778 | }
779 |
780 | .markdown-section h5 {
781 | font-size: 1rem
782 | }
783 |
784 | .markdown-section h6 {
785 | color: #777;
786 | font-size: 1rem
787 | }
788 |
789 | .markdown-section figure,
790 | .markdown-section p {
791 | margin: 1.2em 0
792 | }
793 |
794 | .markdown-section ol,
795 | .markdown-section p,
796 | .markdown-section ul {
797 | line-height: 1.6rem;
798 | word-spacing: .05rem
799 | }
800 |
801 | .markdown-section ol,
802 | .markdown-section ul {
803 | padding-left: 1.5rem
804 | }
805 |
806 | .markdown-section blockquote {
807 | border-left: 4px solid var(--accent);
808 | color: var(--blockQuoteColor);
809 | margin: 2em 0;
810 | padding-left: 20px
811 | }
812 |
813 | .markdown-section blockquote p {
814 | font-weight: 600;
815 | margin-left: 0
816 | }
817 |
818 | .markdown-section iframe {
819 | margin: 1em 0
820 | }
821 |
822 | .markdown-section em {
823 | color: #7f8c8d
824 | }
825 |
826 | .markdown-section code {
827 | border-radius: 2px;
828 | color: var(--highlightColor);
829 | font-size: .9rem;
830 | margin: 0 2px;
831 | padding: 3px 5px;
832 | white-space: pre-wrap;
833 | font-weight: bold;
834 | }
835 |
836 | .markdown-section code,
837 | .markdown-section pre {
838 | background-color: var(--codeBackgroundColor);
839 | font-family: var(--codeFontFamily);
840 | }
841 |
842 | .markdown-section pre {
843 | -moz-osx-font-smoothing: initial;
844 | -webkit-font-smoothing: initial;
845 | line-height: 1.5rem;
846 | margin: 1.2em 0;
847 | overflow: auto;
848 | padding: 0 1.4rem;
849 | position: relative;
850 | word-wrap: normal
851 | }
852 |
853 | .token.cdata,
854 | .token.comment,
855 | .token.doctype,
856 | .token.prolog {
857 | color: #8e908c
858 | }
859 |
860 | .token.namespace {
861 | opacity: .7
862 | }
863 |
864 | .token.boolean,
865 | .token.number {
866 | color: #c76b29
867 | }
868 |
869 | .token.punctuation {
870 | color: #525252
871 | }
872 |
873 | .token.property {
874 | color: #c08b30
875 | }
876 |
877 | .token.tag {
878 | color: #2973b7
879 | }
880 |
881 | .token.string {
882 | color: var(--accent)
883 | }
884 |
885 | .token.selector {
886 | color: #6679cc
887 | }
888 |
889 | .token.attr-name {
890 | color: #2973b7
891 | }
892 |
893 | .language-css .token.string,
894 | .style .token.string,
895 | .token.entity,
896 | .token.url {
897 | color: #22a2c9
898 | }
899 |
900 | .token.attr-value,
901 | .token.control,
902 | .token.directive,
903 | .token.unit {
904 | color: var(--accent)
905 | }
906 |
907 | .token.function,
908 | .token.keyword {
909 | color: #e96900
910 | }
911 |
912 | .token.atrule,
913 | .token.regex,
914 | .token.statement {
915 | color: #22a2c9
916 | }
917 |
918 | .token.placeholder,
919 | .token.variable {
920 | color: #3d8fd1
921 | }
922 |
923 | .token.deleted {
924 | text-decoration: line-through
925 | }
926 |
927 | .token.inserted {
928 | border-bottom: 1px dotted #202746;
929 | text-decoration: none
930 | }
931 |
932 | .token.italic {
933 | font-style: italic
934 | }
935 |
936 | .token.bold,
937 | .token.important {
938 | font-weight: 700
939 | }
940 |
941 | .token.important {
942 | color: #c94922
943 | }
944 |
945 | .token.entity {
946 | cursor: help
947 | }
948 |
949 | .markdown-section pre>code {
950 | -moz-osx-font-smoothing: initial;
951 | -webkit-font-smoothing: initial;
952 | background-color: var(--codeBackgroundColor);
953 | border-radius: 2px;
954 | color: var(--codeTextColor);
955 | display: block;
956 | font-family: Roboto Mono, Monaco, courier, monospace;
957 | font-size: .8rem;
958 | line-height: inherit;
959 | margin: 0 2px;
960 | max-width: inherit;
961 | overflow: inherit;
962 | padding: 2.2em 5px;
963 | white-space: inherit
964 | }
965 |
966 | .markdown-section code:after,
967 | .markdown-section code:before {
968 | letter-spacing: .05rem
969 | }
970 |
971 | code .token {
972 | -moz-osx-font-smoothing: initial;
973 | -webkit-font-smoothing: initial;
974 | min-height: 1.5rem;
975 | position: relative;
976 | left: auto
977 | }
978 |
979 | pre:after {
980 | color: var(--codeTypeColor);
981 | content: attr(data-lang);
982 | font-size: .6rem;
983 | font-weight: 600;
984 | height: 15px;
985 | line-height: 15px;
986 | padding: 5px 10px 0;
987 | position: absolute;
988 | right: 0;
989 | text-align: right;
990 | top: 0
991 | }
992 |
993 | /* toogler */
994 |
995 | #docsify-darklight-theme {
996 | border: none;
997 | background-color: transparent;
998 | position: absolute;
999 | right: 10px;
1000 | top: 15px;
1001 | width: 25px;
1002 | height: 25px;
1003 | background-repeat: no-repeat;
1004 | background-image: var(--toogleImage);
1005 | -o-background-size: cover;
1006 | -moz-background-size: cover;
1007 | -webkit-background-size:cover;
1008 | background-size: cover;
1009 | cursor: pointer;
1010 | transition: background-image .15s ease-in-out .15s
1011 | }
1012 |
--------------------------------------------------------------------------------
/docs/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=PT+Sans&Source+Sans+Pro&Roboto+Mono&display=swap");
2 | * {
3 | -webkit-font-smoothing: antialiased;
4 | -webkit-overflow-scrolling: touch;
5 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
6 | -webkit-text-size-adjust: none;
7 | -webkit-touch-callout: none;
8 | box-sizing: border-box
9 | }
10 |
11 |
12 | body:not(.ready) {
13 | overflow: hidden
14 | }
15 |
16 | .search {
17 | border-bottom: none !important;
18 | }
19 |
20 | .search .input-wrap {
21 | margin-top: 20px !important;
22 | }
23 |
24 | .search input {
25 | border: 1px solid var(--borderColor) !important;
26 | background-color: var(--background) !important;
27 | margin: 0 auto;
28 | color: var(--textColor);
29 | width: 90% !important;
30 | border-radius: 15px;
31 | text-indent: 15px;
32 | }
33 |
34 | body:not(.ready) .app-nav,
35 | body:not(.ready)>nav,
36 | body:not(.ready) [data-cloak] {
37 | display: none
38 | }
39 |
40 | div#app {
41 | font-size: 30px;
42 | font-weight: lighter;
43 | margin: 40vh auto;
44 | text-align: center
45 | }
46 |
47 | div#app:empty:before {
48 | content: "Loading..."
49 | }
50 |
51 | .emoji {
52 | height: 1.2rem;
53 | vertical-align: middle
54 | }
55 |
56 | .progress {
57 | background-color: var(--accent);
58 | height: 2px;
59 | left: 0;
60 | position: fixed;
61 | right: 0;
62 | top: 0;
63 | transition: width .2s, opacity .4s;
64 | width: 0;
65 | z-index: 999999
66 | }
67 |
68 | .search .search-keyword,
69 | .search a:hover {
70 | color: var(--accent)
71 | }
72 |
73 | .search .search-keyword {
74 | font-style: normal;
75 | font-weight: 700
76 | }
77 |
78 | body,
79 | html {
80 | height: 100%
81 | }
82 |
83 | body {
84 | -moz-osx-font-smoothing: grayscale;
85 | -webkit-font-smoothing: antialiased;
86 | color: var(--textColor);
87 | font-family: var(--siteFont), Helvetica Neue, Arial, sans-serif;
88 | font-size: var(--bodyFontSize);
89 | letter-spacing: 0;
90 | margin: 0;
91 | overflow-x: hidden;
92 |
93 | }
94 |
95 | .markdown-section h2 {
96 | color: #fff;
97 | }
98 |
99 | img {
100 | max-width: 100%
101 | }
102 |
103 | a[disabled] {
104 | cursor: not-allowed;
105 | opacity: .6
106 | }
107 |
108 | kbd {
109 | border: 1px solid #ccc;
110 | border-radius: 3px;
111 | display: inline-block;
112 | font-size: 12px!important;
113 | line-height: 12px;
114 | margin-bottom: 3px;
115 | padding: 3px 5px;
116 | vertical-align: middle
117 | }
118 |
119 | li input[type=checkbox] {
120 | margin: 0 .2em .25em 0;
121 | vertical-align: middle
122 | }
123 |
124 | .app-nav {
125 | margin: 25px 60px 0 0;
126 | position: absolute;
127 | right: 0;
128 | text-align: right;
129 | z-index: 10
130 | }
131 |
132 | .app-nav.no-badge {
133 | margin-right: 25px
134 | }
135 |
136 | .app-nav p {
137 | margin: 0
138 | }
139 |
140 | .app-nav>a {
141 | margin: 0 1rem;
142 | padding: 5px 0
143 | }
144 |
145 | .app-nav li,
146 | .app-nav ul {
147 | display: inline-block;
148 | list-style: none;
149 | margin: 0
150 | }
151 |
152 | .app-nav a {
153 | color: inherit;
154 | font-size: 16px;
155 | text-decoration: none;
156 | transition: color .3s
157 | }
158 |
159 | .app-nav a.active,
160 | .app-nav a:hover {
161 | color: var(--accent)
162 | }
163 |
164 | .app-nav a.active {
165 | border-bottom: 2px solid var(--accent)
166 | }
167 |
168 | .app-nav li {
169 | display: inline-block;
170 | margin: 0 1rem;
171 | padding: 5px 0;
172 | position: relative;
173 | cursor: pointer
174 | }
175 |
176 | .app-nav li ul {
177 | background-color: #fff;
178 | border: 1px solid;
179 | border-color: #ddd #ddd #ccc;
180 | border-radius: 4px;
181 | box-sizing: border-box;
182 | display: none;
183 | max-height: calc(100vh - 61px);
184 | overflow-y: auto;
185 | padding: 10px 0;
186 | position: absolute;
187 | right: -15px;
188 | text-align: left;
189 | top: 100%;
190 | white-space: nowrap
191 | }
192 |
193 | .app-nav li ul li {
194 | display: block;
195 | font-size: 14px;
196 | line-height: 1rem;
197 | margin: 8px 14px;
198 | white-space: nowrap
199 | }
200 |
201 | .app-nav li ul a {
202 | display: block;
203 | font-size: inherit;
204 | margin: 0;
205 | padding: 0
206 | }
207 |
208 | .app-nav li ul a.active {
209 | border-bottom: 0
210 | }
211 |
212 | .app-nav li:hover ul {
213 | display: block
214 | }
215 |
216 | .github-corner {
217 | border-bottom: 0;
218 | position: fixed;
219 | right: 0;
220 | text-decoration: none;
221 | top: 0;
222 | z-index: 1
223 | }
224 |
225 | .github-corner:hover .octo-arm {
226 | -webkit-animation: octocat-wave .56s ease-in-out;
227 | animation: octocat-wave .56s ease-in-out
228 | }
229 |
230 | .github-corner svg {
231 | color: #fff;
232 | fill: var(--accent);
233 | height: 70px;
234 | width: 70px
235 | }
236 |
237 | main {
238 | display: block;
239 | position: relative;
240 | width: 100vw;
241 | height: 100%;
242 | z-index: 0
243 | }
244 |
245 | main.hidden {
246 | display: none
247 | }
248 |
249 | .anchor {
250 | display: inline-block;
251 | text-decoration: none;
252 | transition: all .3s
253 | }
254 |
255 | .anchor span {
256 | color: var(--textColor);
257 | }
258 |
259 | .anchor:hover {
260 | text-decoration: underline
261 | }
262 |
263 | .sidebar {
264 | border-right: 1px solid var(--borderColor);
265 | overflow-y: auto;
266 | padding: 40px 0 0;
267 | position: absolute;
268 | top: 0;
269 | bottom: 0;
270 | left: 0;
271 | transition: transform .25s ease-out;
272 | width: 300px;
273 | z-index: 20
274 | }
275 |
276 | .sidebar>h1 {
277 | margin: 0 auto 1rem;
278 | font-size: 1.5rem;
279 | font-weight: 300;
280 | text-align: center
281 | }
282 |
283 | .sidebar>h1 a {
284 | color: inherit;
285 | text-decoration: none
286 | }
287 |
288 | .sidebar>h1 .app-nav {
289 | display: block;
290 | position: static
291 | }
292 |
293 | .sidebar .sidebar-nav {
294 | line-height: 2em;
295 | padding-bottom: 40px
296 | }
297 |
298 | .sidebar li.collapse .app-sub-sidebar {
299 | display: none
300 | }
301 |
302 | .sidebar ul {
303 | margin: 0 0 0 15px;
304 | padding: 0
305 | }
306 |
307 | .sidebar li>p {
308 | font-weight: 700;
309 | margin: 0
310 | }
311 |
312 | .sidebar ul,
313 | .sidebar ul li {
314 | list-style: none
315 | }
316 |
317 | .sidebar ul li a {
318 | border-bottom: none;
319 | display: block
320 | }
321 |
322 | .sidebar ul li ul {
323 | padding-left: 20px
324 | }
325 |
326 | .sidebar::-webkit-scrollbar {
327 | width: 4px
328 | }
329 |
330 | .sidebar::-webkit-scrollbar-thumb {
331 | background: transparent;
332 | border-radius: 4px
333 | }
334 |
335 | .sidebar:hover::-webkit-scrollbar-thumb {
336 | background: hsla(0, 0%, 53.3%, .4)
337 | }
338 |
339 | .sidebar:hover::-webkit-scrollbar-track {
340 | background: hsla(0, 0%, 53.3%, .1)
341 | }
342 |
343 | .sidebar-toggle {
344 | background-color: transparent;
345 | border: 0;
346 | outline: none;
347 | padding: 10px;
348 | position: absolute;
349 | bottom: 0;
350 | left: 0;
351 | text-align: center;
352 | transition: opacity .3s;
353 | width: 284px;
354 | z-index: 30;
355 | cursor: pointer
356 | }
357 |
358 | .sidebar-toggle:hover .sidebar-toggle-button {
359 | opacity: .4
360 | }
361 |
362 | .sidebar-toggle span {
363 | background-color: var(--accent);
364 | display: block;
365 | margin-bottom: 4px;
366 | width: 16px;
367 | height: 2px
368 | }
369 |
370 | body.sticky .sidebar,
371 | body.sticky .sidebar-toggle {
372 | position: fixed
373 | }
374 |
375 | .content {
376 | padding-top: 60px;
377 | position: absolute;
378 | top: 0;
379 | right: 0;
380 | bottom: 0;
381 | left: 300px;
382 | transition: left .25s ease
383 | }
384 |
385 | .markdown-section {
386 | margin: 0 auto;
387 | max-width: 90%;
388 | padding: 30px 15px 40px;
389 | position: relative
390 | }
391 |
392 | .markdown-section>* {
393 | box-sizing: border-box;
394 | font-size: inherit
395 | }
396 |
397 | .markdown-section>:first-child {
398 | margin-top: 0!important
399 | }
400 |
401 | .markdown-section hr {
402 | border: none;
403 | border-bottom: 1px solid #eee;
404 | margin: 2em 0
405 | }
406 |
407 | .markdown-section iframe {
408 | border: 1px solid #eee;
409 | width: 1px;
410 | min-width: 100%
411 | }
412 |
413 | .markdown-section table {
414 | border-collapse: collapse;
415 | border-spacing: 0;
416 | display: block;
417 | margin-bottom: 1rem;
418 | overflow: auto;
419 | width: 100%
420 | }
421 |
422 | .markdown-section th {
423 | font-weight: 700
424 | }
425 |
426 | .markdown-section td,
427 | .markdown-section th {
428 | border: 1px solid #ddd;
429 | padding: 6px 13px
430 | }
431 |
432 | .markdown-section tr {
433 | border-top: 1px solid #ccc
434 | }
435 |
436 | .markdown-section p.tip,
437 | .markdown-section tr:nth-child(2n) {
438 | background-color: var(--codeBackgroundColor)
439 | }
440 |
441 | .markdown-section p.tip {
442 | border-bottom-right-radius: 2px;
443 | border-left: 4px solid #f66;
444 | border-top-right-radius: 2px;
445 | margin: 2em 0;
446 | padding: 12px 24px 12px 30px;
447 | position: relative
448 | }
449 |
450 | .markdown-section p.tip:before {
451 | background-color: #f66;
452 | border-radius: 100%;
453 | color: #fff;
454 | content: "!";
455 | font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
456 | font-size: 14px;
457 | font-weight: 700;
458 | left: -12px;
459 | line-height: 20px;
460 | position: absolute;
461 | height: 20px;
462 | width: 20px;
463 | text-align: center;
464 | top: 14px
465 | }
466 |
467 | .markdown-section p.tip code {
468 | background-color: #efefef
469 | }
470 |
471 | .markdown-section p.tip em {
472 | color: #34495e
473 | }
474 |
475 | .markdown-section p.warn {
476 | background: rgba(66, 185, 131, .1);
477 | border-radius: 2px;
478 | padding: 1rem
479 | }
480 |
481 | .markdown-section ul.task-list>li {
482 | list-style-type: none
483 | }
484 |
485 | body.close .sidebar {
486 | transform: translateX(-300px)
487 | }
488 |
489 | body.close .sidebar-toggle {
490 | width: auto
491 | }
492 |
493 | body.close .content {
494 | left: 0
495 | }
496 |
497 | @media print {
498 | .app-nav,
499 | .github-corner,
500 | .sidebar,
501 | .sidebar-toggle {
502 | display: none
503 | }
504 | }
505 |
506 | @media screen and (max-width:768px) {
507 | .github-corner,
508 | .sidebar,
509 | .sidebar-toggle {
510 | position: fixed
511 | }
512 | .app-nav {
513 | margin-top: 16px
514 | }
515 | .app-nav li ul {
516 | top: 30px
517 | }
518 | main {
519 | height: auto;
520 | overflow-x: hidden
521 | }
522 | .sidebar {
523 | left: -300px;
524 | transition: transform .25s ease-out
525 | }
526 | .content {
527 | left: 0;
528 | max-width: 100vw;
529 | position: static;
530 | padding-top: 20px;
531 | transition: transform .25s ease
532 | }
533 | .app-nav,
534 | .github-corner {
535 | transition: transform .25s ease-out
536 | }
537 | .sidebar-toggle {
538 | background-color: transparent;
539 | width: auto;
540 | padding: 30px 30px 10px 10px
541 | }
542 | body.close .sidebar {
543 | transform: translateX(300px)
544 | }
545 | body.close .sidebar-toggle {
546 | transition: background-color 1s;
547 | width: 284px;
548 | padding: 10px
549 | }
550 | body.close .content {
551 | transform: translateX(300px)
552 | }
553 | body.close .app-nav,
554 | body.close .github-corner {
555 | display: none
556 | }
557 | .github-corner:hover .octo-arm {
558 | -webkit-animation: none;
559 | animation: none
560 | }
561 | .github-corner .octo-arm {
562 | -webkit-animation: octocat-wave .56s ease-in-out;
563 | animation: octocat-wave .56s ease-in-out
564 | }
565 | }
566 |
567 | @-webkit-keyframes octocat-wave {
568 | 0%,
569 | to {
570 | transform: rotate(0)
571 | }
572 | 20%,
573 | 60% {
574 | transform: rotate(-25deg)
575 | }
576 | 40%,
577 | 80% {
578 | transform: rotate(10deg)
579 | }
580 | }
581 |
582 | @keyframes octocat-wave {
583 | 0%,
584 | to {
585 | transform: rotate(0)
586 | }
587 | 20%,
588 | 60% {
589 | transform: rotate(-25deg)
590 | }
591 | 40%,
592 | 80% {
593 | transform: rotate(10deg)
594 | }
595 | }
596 |
597 | section.cover {
598 | align-items: center;
599 | background-position: 50%;
600 | background-repeat: no-repeat;
601 | background-size: cover;
602 | height: 100vh;
603 | display: none
604 | }
605 |
606 | section.cover.show {
607 | display: flex;
608 | background: var(--coverBackground)!important;
609 | }
610 |
611 | section.cover.has-mask .mask {
612 | background-color: #fff;
613 | opacity: .8;
614 | position: absolute;
615 | top: 0;
616 | height: 100%;
617 | width: 100%
618 | }
619 |
620 | section.cover .cover-main {
621 | flex: 1;
622 | margin: -20px 16px 0;
623 | text-align: center;
624 | z-index: 1
625 | }
626 |
627 | section.cover a {
628 | color: inherit
629 | }
630 |
631 | section.cover a,
632 | section.cover a:hover {
633 | text-decoration: none
634 | }
635 |
636 | section.cover p {
637 | line-height: 1.5rem;
638 | margin: 1em 0
639 | }
640 |
641 | section.cover h1 {
642 | color: inherit;
643 | font-size: 2.5rem;
644 | font-weight: 300;
645 | margin: .625rem 0 2.5rem;
646 | position: relative;
647 | text-align: center
648 | }
649 |
650 | section.cover h1 a {
651 | display: block
652 | }
653 |
654 | section.cover h1 small {
655 | bottom: -.4375rem;
656 | font-size: 1rem;
657 | position: absolute
658 | }
659 |
660 | section.cover blockquote {
661 | font-size: 1.5rem;
662 | text-align: center
663 | }
664 |
665 | section.cover ul {
666 | line-height: 1.8;
667 | list-style-type: none;
668 | margin: 1em auto;
669 | max-width: 500px;
670 | padding: 0
671 | }
672 |
673 | section.cover .cover-main>p:last-child a {
674 | border-radius: 2rem;
675 | border: 1px solid var(--accent);
676 | box-sizing: border-box;
677 | color: var(--accent);
678 | display: inline-block;
679 | font-size: 1.05rem;
680 | letter-spacing: .1rem;
681 | margin: .5rem 1rem;
682 | padding: .75em 2rem;
683 | text-decoration: none;
684 | transition: all .15s ease
685 | }
686 |
687 | section.cover .cover-main>p:last-child a:last-child {
688 | background-color: var(--accent);
689 | color: #fff
690 | }
691 |
692 | section.cover .cover-main>p:last-child a:last-child:hover {
693 | color: inherit;
694 | opacity: .8
695 | }
696 |
697 | section.cover .cover-main>p:last-child a:hover {
698 | color: inherit
699 | }
700 |
701 | section.cover blockquote>p>a {
702 | border-bottom: 2px solid var(--accent);
703 | transition: color .3s
704 | }
705 |
706 | section.cover blockquote>p>a:hover {
707 | color: var(--accent)
708 | }
709 |
710 | .sidebar,
711 | body {
712 | background-color: var(--background);
713 | transition: background-image .15s ease-in-out .15s;
714 | }
715 |
716 | .sidebar {
717 | color: var(--textColor);
718 | }
719 |
720 | .sidebar li {
721 | margin: 6px 0
722 | }
723 |
724 | .sidebar ul li a {
725 | color: var(--sidebarSublink);
726 | font-size: 14px;
727 | font-weight: 400;
728 | overflow: hidden;
729 | text-decoration: none;
730 | text-overflow: ellipsis;
731 | white-space: nowrap
732 | }
733 |
734 | .sidebar ul li a:hover {
735 | text-decoration: underline
736 | }
737 |
738 | .sidebar ul li ul {
739 | padding: 0
740 | }
741 |
742 | .sidebar ul li.active>a {
743 | border-right: 2px solid;
744 | color: var(--accent);
745 | font-weight: 600
746 | }
747 |
748 | .app-sub-sidebar li:before {
749 | content: "-";
750 | padding-right: 4px;
751 | float: left
752 | }
753 |
754 | .markdown-section h1,
755 | .markdown-section h2,
756 | .markdown-section h3,
757 | .markdown-section h4,
758 | .markdown-section strong {
759 | color: var(--textColor);
760 | font-weight: 600
761 | }
762 |
763 | .markdown-section a {
764 | color: var(--accent);
765 | font-weight: 600;
766 | text-decoration: none;
767 | }
768 |
769 | .markdown-section h1 {
770 | font-size: 2rem;
771 | margin: 0 0 1rem
772 | }
773 |
774 | .markdown-section h2 {
775 | font-size: 1.75rem;
776 | margin: 45px 0 .8rem
777 | }
778 |
779 | .markdown-section h3 {
780 | font-size: 1.5rem;
781 | margin: 40px 0 .6rem
782 | }
783 |
784 | .markdown-section h4 {
785 | font-size: 1.25rem
786 | }
787 |
788 | .markdown-section h5 {
789 | font-size: 1rem
790 | }
791 |
792 | .markdown-section h6 {
793 | color: #777;
794 | font-size: 1rem
795 | }
796 |
797 | .markdown-section figure,
798 | .markdown-section p {
799 | margin: 1.2em 0
800 | }
801 |
802 | .markdown-section ol,
803 | .markdown-section p,
804 | .markdown-section ul {
805 | line-height: 1.6rem;
806 | word-spacing: .05rem
807 | }
808 |
809 | .markdown-section ol,
810 | .markdown-section ul {
811 | padding-left: 1.5rem
812 | }
813 |
814 | .markdown-section blockquote {
815 | border-left: 4px solid var(--accent);
816 | color: var(--blockQuoteColor);
817 | margin: 2em 0;
818 | padding-left: 20px
819 | }
820 |
821 | .markdown-section blockquote p {
822 | font-weight: 600;
823 | margin-left: 0
824 | }
825 |
826 | .markdown-section iframe {
827 | margin: 1em 0
828 | }
829 |
830 | .markdown-section em {
831 | color: #7f8c8d
832 | }
833 |
834 | .markdown-section code {
835 | border-radius: 2px;
836 | color: var(--highlightColor);
837 | font-size: .9rem;
838 | margin: 0 2px;
839 | padding: 3px 5px;
840 | white-space: pre-wrap;
841 | font-weight: bold;
842 | }
843 |
844 | .markdown-section code,
845 | .markdown-section pre {
846 | background-color: var(--codeBackgroundColor);
847 | font-family: var(--codeFontFamily);
848 | }
849 |
850 | .markdown-section pre {
851 | -moz-osx-font-smoothing: initial;
852 | -webkit-font-smoothing: initial;
853 | line-height: 1.5rem;
854 | margin: 1.2em 0;
855 | overflow: auto;
856 | padding: 0 1.4rem;
857 | position: relative;
858 | word-wrap: normal
859 | }
860 |
861 | .token.cdata,
862 | .token.comment,
863 | .token.doctype,
864 | .token.prolog {
865 | color: #8e908c
866 | }
867 |
868 | .token.namespace {
869 | opacity: .7
870 | }
871 |
872 | .token.boolean,
873 | .token.number {
874 | color: #c76b29
875 | }
876 |
877 | .token.punctuation {
878 | color: #525252
879 | }
880 |
881 | .token.property {
882 | color: #c08b30
883 | }
884 |
885 | .token.tag {
886 | color: #2973b7
887 | }
888 |
889 | .token.string {
890 | color: var(--accent)
891 | }
892 |
893 | .token.selector {
894 | color: #6679cc
895 | }
896 |
897 | .token.attr-name {
898 | color: #2973b7
899 | }
900 |
901 | .language-css .token.string,
902 | .style .token.string,
903 | .token.entity,
904 | .token.url {
905 | color: #22a2c9
906 | }
907 |
908 | .token.attr-value,
909 | .token.control,
910 | .token.directive,
911 | .token.unit {
912 | color: var(--accent)
913 | }
914 |
915 | .token.function,
916 | .token.keyword {
917 | color: #e96900
918 | }
919 |
920 | .token.atrule,
921 | .token.regex,
922 | .token.statement {
923 | color: #22a2c9
924 | }
925 |
926 | .token.placeholder,
927 | .token.variable {
928 | color: #3d8fd1
929 | }
930 |
931 | .token.deleted {
932 | text-decoration: line-through
933 | }
934 |
935 | .token.inserted {
936 | border-bottom: 1px dotted #202746;
937 | text-decoration: none
938 | }
939 |
940 | .token.italic {
941 | font-style: italic
942 | }
943 |
944 | .token.bold,
945 | .token.important {
946 | font-weight: 700
947 | }
948 |
949 | .token.important {
950 | color: #c94922
951 | }
952 |
953 | .token.entity {
954 | cursor: help
955 | }
956 |
957 | .markdown-section pre>code {
958 | -moz-osx-font-smoothing: initial;
959 | -webkit-font-smoothing: initial;
960 | background-color: var(--codeBackgroundColor);
961 | border-radius: 2px;
962 | color: var(--codeTextColor);
963 | display: block;
964 | font-family: Roboto Mono, Monaco, courier, monospace;
965 | font-size: .8rem;
966 | line-height: inherit;
967 | margin: 0 2px;
968 | max-width: inherit;
969 | overflow: inherit;
970 | padding: 2.2em 5px;
971 | white-space: inherit
972 | }
973 |
974 | .markdown-section code:after,
975 | .markdown-section code:before {
976 | letter-spacing: .05rem
977 | }
978 |
979 | code .token {
980 | -moz-osx-font-smoothing: initial;
981 | -webkit-font-smoothing: initial;
982 | min-height: 1.5rem;
983 | position: relative;
984 | left: auto
985 | }
986 |
987 | pre:after {
988 | color: var(--codeTypeColor);
989 | content: attr(data-lang);
990 | font-size: .6rem;
991 | font-weight: 600;
992 | height: 15px;
993 | line-height: 15px;
994 | padding: 5px 10px 0;
995 | position: absolute;
996 | right: 0;
997 | text-align: right;
998 | top: 0
999 | }
1000 |
1001 | /* toogler */
1002 |
1003 | #docsify-darklight-theme {
1004 | border: none;
1005 | background-color: transparent;
1006 | position: absolute;
1007 | right: 10px;
1008 | top: 15px;
1009 | width: 25px;
1010 | height: 25px;
1011 | background-repeat: no-repeat;
1012 | background-image: var(--toogleImage);
1013 | -o-background-size: cover;
1014 | -moz-background-size: cover;
1015 | -webkit-background-size:cover;
1016 | background-size: cover;
1017 | cursor: pointer;
1018 | user-select: none;
1019 | transition: background-image .15s ease-in-out .15s
1020 | }
1021 |
1022 | /* .tooltip {
1023 | position: relative;
1024 | }
1025 |
1026 | .tooltip .tooltiptext {
1027 | visibility: hidden;
1028 | opacity: 0;
1029 | transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
1030 | -webkit-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
1031 | -o-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
1032 | -moz-transition: visibility 0.3s linear 1s, opacity 0.3s linear 1s;
1033 | visibility: hidden;
1034 | background-color: black;
1035 | color: #fff;
1036 | text-align: center;
1037 | border-radius: 6px;
1038 | padding: 5px 5px;
1039 | position: absolute;
1040 | z-index: 21;
1041 | bottom: 100%;
1042 | left: 50%;
1043 | margin-left: -105px;
1044 | }
1045 |
1046 | .tooltip:hover .tooltiptext {
1047 | visibility: visible;
1048 | opacity: 1;
1049 | }
1050 |
1051 | .tooltip .tooltiptext:hover {
1052 | visibility: hidden;
1053 | } */
1054 |
--------------------------------------------------------------------------------
/docs/docsifyThemeable.md:
--------------------------------------------------------------------------------
1 | # Docsify-Themeable
2 |
3 | You can add [docsify-darklight-theme](https://docsify-darklight-theme.boopathikumar.me) switcher with [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable) to switch between `Dark` and `Light` theme.
4 |
5 | > Note : Remove all default `stylesheets` provided by **docsify** and **docsify-themeable** that included on `index.html` if you have any conflicts.
6 |
7 | ### Setup
8 |
9 | If you don't want to do any customization and use default styling add below `stylesheet` on top of the `index.html` file
10 |
11 | ```html
12 |
13 | docsify-darklight-theme
7 | We are building somthing special for you ...
28 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
1 | # Installation
2 |
3 | You can use `docsify-darklight-theme` [by starter template](installation.md#by-starter-template) or [by adding to your existing project](installation.md#by-adding-to-existing-project)
4 |
5 | > Note : Remove all default `stylesheets` provided by **docsify** that included on top of `index.html` if you have any conflict with below CSS file
6 |
7 | ## By starter template
8 |
9 | Follow the below steps:
10 |
11 | In empty folder run the below commands
12 |
13 | ```bash
14 | npx docsify-darklight-theme
15 | ```
16 |
17 | Now you can see `documentation` folder was created inside your project folder with below structure
18 |
19 | ```text
20 | your project folder
21 | └── documentation
22 | ├── index.html (the entry file)
23 | ├── quickstart.md ( sidebar subpage)
24 | ├── README.md ( home page)
25 | ├── _navbar.md ( navigation bar)
26 | ├── _sidebar.md ( sidebar)
27 | ├── _coverpage.md ( coverpage)
28 | └── style.css ( you can add your own style or update here then update stylesheet path in `index.html` )
29 | ```
30 |
31 | and run the below command to start your project
32 |
33 | ```bash
34 | docsify serve ./documentation
35 | ```
36 |
37 | you will see below output on terminal
38 |
39 | ```bash
40 |
41 | Serving C:\Users\your_folder\documentation now.
42 | Listening at http://localhost:3000
43 |
44 | ```
45 |
46 | now you can access your site at `http://localhost:3000`
47 |
48 |
49 | ## By adding to existing project
50 |
51 | You can add `docsify-darklight-theme` to your existing project in two ways :
52 |
53 | - Using **npm** ( For create custom style by your own )
54 | - Using **jsdelivr CDN** ( For readymade minified styles served through CDN)
55 |
56 | ### Using npm
57 |
58 | Follow the below steps:
59 |
60 | 1. Move inside your docsify site folder and initialize npm with below command
61 |
62 | ```bash
63 | npm init
64 | npm install docsify-darklight-theme
65 | ```
66 |
67 | Now you can see `documentation` folder was created inside your project folder with below structure. If You want to move `style.css` file wherever you want and include in your `index.html` by matching the path.
68 |
69 | ```text
70 | your project folder
71 | └── documentation
72 | ├── index.html
73 | ├── quickstart.md
74 | ├── README.md
75 | ├── _coverpage.md
76 | ├── style.css ( you can add your own style or update here then update stylesheet path in `index.html` )
77 | ├── _navbar.md
78 | └── _sidebar.md
79 | ```
80 |
81 | if you want it in same path add the `stylesheet` on top of `index.html` as shown below
82 |
83 | ```html
84 | ,
67 | docsify_slack_chat_color : ,
68 |
69 | // ...
70 |
71 | },
72 | light: {
73 |
74 | // ...
75 |
76 | docsify_slack_chat_background : ,
77 | docsify_slack_chat_color :
78 |
79 | // ...
80 |
81 | }
82 |
83 | }
84 |
85 | // ...
86 |
87 | };
88 | ```
89 |
90 | **#Default themes configuration**
91 |
92 | The is the default styleproperties and respective values, you can overwrite directly in `window.$docsify` configuration object as shown above
93 |
94 | ```js
95 |
96 | docsify_slack_chat_background = #4CAF50
97 | docsify_slack_chat_color = white
98 |
99 | ```
100 |
--------------------------------------------------------------------------------
/google32bbad7f9ccc9846.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google32bbad7f9ccc9846.html
--------------------------------------------------------------------------------
/icons/docsify-darklight-theme-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boopathikumar018/docsify-darklight-theme/4ddd252cd5663af38360f96b9d8c5e406b2304fe/icons/docsify-darklight-theme-logo.png
--------------------------------------------------------------------------------
/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boopathikumar018/docsify-darklight-theme/4ddd252cd5663af38360f96b9d8c5e406b2304fe/icons/favicon.png
--------------------------------------------------------------------------------
/icons/moon.svg:
--------------------------------------------------------------------------------
1 | Document
6 | We are building something special for you ...
21 |
50 |
51 |
52 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/starter/quickstart.md:
--------------------------------------------------------------------------------
1 | # Quick start
2 |
3 | > An awesome project's another page.
4 |
--------------------------------------------------------------------------------
/themeableDocs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boopathikumar018/docsify-darklight-theme/4ddd252cd5663af38360f96b9d8c5e406b2304fe/themeableDocs/.nojekyll
--------------------------------------------------------------------------------
/themeableDocs/README.md:
--------------------------------------------------------------------------------
1 | # Headline
2 |
3 | > An `awesome` project.
4 |
5 | Lorem ipsum dolor sit amet, gravida semper suspendisse ipsum, nam maecenas curabitur. Volutpat orci maecenas dui elementum. Massa at sollicitudin nec erat, sit libero dolor suspendisse amet, adipiscing dolor sed massa. Fermentum lectus. Est dignissim ac tempor, accusantium hac elit massa dictumst soluta
6 |
7 | ## Libero dictumst mauris
8 |
9 | Tempus etiam, justo nullam vel eros et. Conubia integer. Amet elit nulla, eu tortor fugit pede arcu wisi, elit maecenas commodo integer et vitae nonummy.
10 |
11 |
12 | ```bash
13 | Lorem Ipsum
14 | ```
15 |
16 | Curabitur amet sed voluptas convallis, urna sodales vivamus dui id minim eget, dapibus nostra dignissim, vestibulum mauris a tortor morbi lobortis eu, felis odio. Eu ligula taciti cras, faucibus ac vel quis donec sodales. Lacinia euismod sed semper donec. Magna aliquam sed non, vestibulum cursus sed ut vivamus felis porttitor, vestibulum nibh augue a pede, vehicula integer ut nunc proin.
17 |
18 | Et diam integer euismod semper pede sapien, massa orci vel, lorem porttitor quam in orci amet, hymenaeos ultrices in. Urna ipsum pellentesque pretium quis, interdum ante commodo nullam eu tristique, aliquam nec velit nisl in, integer elementum ac recusandae nibh sit eu. Id libero lobortis sed quis. Luctus dapibus malesuada erat duis dolor pede, orci ut justo, diam enim id proin mi.
--------------------------------------------------------------------------------
/themeableDocs/_coverpage.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # docsify-darklight-theme-starter
4 |
5 | > A magical documentation site generator with dark and light mode switch.
6 |
7 | - Themes are customizable based on your color preferences.
8 | - Themes are remembered and retrieved from local storage.
9 | - Redesigned search box.
10 |
11 | [Preview](https://boopathikumar018.github.io/docsify-darklight-theme)
12 | [Getting Started](#headline)
13 |
--------------------------------------------------------------------------------
/themeableDocs/_navbar.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/themeableDocs/_sidebar.md:
--------------------------------------------------------------------------------
1 | - Getting started
2 |
3 | - [Quick Start](quickstart.md)
--------------------------------------------------------------------------------
/themeableDocs/css/index.css:
--------------------------------------------------------------------------------
1 | /* toogler */
2 |
3 | #docsify-darklight-theme {
4 | border: none;
5 | background-color: transparent;
6 | position: absolute;
7 | right: -13px;
8 | top: 75px;
9 | width: 25px;
10 | height: 25px;
11 | background-repeat: no-repeat;
12 | background-image: var(--toogleImage);
13 | -o-background-size: cover;
14 | -moz-background-size: cover;
15 | -webkit-background-size:cover;
16 | background-size: cover;
17 | cursor: pointer;
18 | transition: background-image .15s ease-in-out .15s
19 | }
20 |
--------------------------------------------------------------------------------
/themeableDocs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boopathikumar018/docsify-darklight-theme/4ddd252cd5663af38360f96b9d8c5e406b2304fe/themeableDocs/favicon.ico
--------------------------------------------------------------------------------
/themeableDocs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
6 | We are building somthing special for you ...
22 |
52 |
56 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/themeableDocs/js/index.js:
--------------------------------------------------------------------------------
1 | const plugin = (hook, vm) => {
2 |
3 | var defaultConfig = {
4 | siteFont : "PT Sans",
5 | defaultTheme : 'dark',
6 | codeFontFamily : 'Roboto Mono, Monaco, courier, monospace',
7 | bodyFontSize : '17px',
8 | dark: {
9 | accent: '#42b983',
10 | toogleBackground : '#ffffff',
11 | background: '#091a28',
12 | toogleImage : 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)'
13 | },
14 | light: {
15 | accent: '#42b983',
16 | toogleBackground : '#091a28',
17 | background: '#ffffff',
18 | toogleImage : 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)'
19 | }
20 | }
21 |
22 | let themeConfig = defaultConfig;
23 |
24 | if(vm.config.hasOwnProperty("darklightTheme")) {
25 | for (var [key, value] of Object.entries(vm.config.darklightTheme)) {
26 | if(key !== 'light' && key !== 'dark' && key !== 'defaultTheme') {
27 | themeConfig[key] = value;
28 | }
29 | }
30 |
31 | for (var [key, value] of Object.entries(themeConfig)) {
32 | if(key !== 'light' && key !== 'dark') {
33 | themeConfig[key] = value;
34 | document.documentElement.style.setProperty('--'+key , value);
35 | }
36 | }
37 |
38 | if(vm.config.darklightTheme.hasOwnProperty("dark")) {
39 | for (var [key, value] of Object.entries(vm.config.darklightTheme.dark)) {
40 | themeConfig.dark[key] = value
41 | }
42 | }
43 |
44 | if(vm.config.darklightTheme.hasOwnProperty("light")) {
45 | for (var [key, value] of Object.entries(vm.config.darklightTheme.light))
46 | themeConfig.light[key] = value
47 | }
48 |
49 | } else {
50 | for (var [key, value] of Object.entries(themeConfig)) {
51 | if(key !== 'light' && key !== 'dark') {
52 | themeConfig[key] = value;
53 | document.documentElement.style.setProperty('--'+key , value);
54 | }
55 | }
56 | }
57 |
58 | if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
59 | themeConfig.defaultTheme = 'dark';
60 | } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
61 | themeConfig.defaultTheme = 'light';
62 | }
63 |
64 | var setTheme = (theme) => {
65 |
66 | document.getElementById("docsify-darklight-theme").setAttribute("data-link-title", theme);
67 | document.getElementById("docsify-darklight-theme").click()
68 | localStorage.setItem('DARK_LIGHT_THEME', theme);
69 | themeConfig.defaultTheme = theme;
70 |
71 | if(theme == "light") {
72 | for (var [key, value] of Object.entries(themeConfig.light))
73 | document.documentElement.style.setProperty('--'+key , value)
74 | } else if ( theme == "dark") {
75 | for (var [key, value] of Object.entries(themeConfig.dark))
76 | document.documentElement.style.setProperty('--'+key , value)
77 | }
78 |
79 |
80 | document.getElementById('docsify-darklight-theme')
81 | .setAttribute('aria-pressed', theme === 'dark');
82 |
83 | }
84 |
85 | hook.afterEach(function(html, next) {
86 | var darkEl = ` 
5 |
6 | 
20 |
21 |
22 | 
26 |
27 |
28 | 
29 |
30 |
31 | 
32 |
33 |