1 | # docsify-dark-switch
|
2 |
|
3 | [![NPM](https://img.shields.io/npm/v/docsify-dark-switch.svg?style=flat-square)](https://www.npmjs.com/package/docsify-dark-switch)
|
4 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/markz-demo/docsify-dark-switch/blob/main/LICENSE)
|
5 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/docsify-dark-switch/badge)](https://www.jsdelivr.com/package/npm/docsify-dark-switch)
|
6 |
|
7 | > A [docsify](https://docsify.js.org) plugin which can add light and dark themes switching functionality to your docsify site.
|
8 |
|
9 | - [Documentation](https://markz-demo.github.io/docsify-dark-switch) - Demo, installation, options, and theme previews
|
10 | - [中文文档](https://markz-demo.github.io/docsify-dark-switch/#/zh/)
|
11 |
|
12 | ## Screenshots
|
13 |
|
14 | ![](docs/images/image.png)
|
15 |
|
16 | ## Installation
|
17 |
|
18 | ```html
|
19 | <!-- head -->
|
20 | <!-- set theme stylesheet the corresponding title, you can set multiple -->
|
21 | <link rel="stylesheet" title="light" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
|
22 | <link rel="stylesheet" title="dark" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
|
23 |
|
24 | <!-- link docsify-dark-switch.css -->
|
25 | <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-dark-switch/dist/docsify-dark-switch.css">
|
26 |
|
27 | <!-- Also insert you custom css -->
|
28 |
|
29 | <!-- body -->
|
30 | <!-- script docsify-dark-switch.js or docsify-dark-switch.min.js -->
|
31 | <script src="//cdn.jsdelivr.net/npm/docsify-dark-switch/dist/docsify-dark-switch.min.js"></script>
|
32 | ```
|
33 |
|
34 | This example uses the `docsify` official theme. You can also reference the theme css file you want, and you need to set the corresponding `title`. When switching the theme, the plugin will automatically switch the theme css file based on the `title`.
|
35 |
|
36 | More `docsify` official themes: https://docsify.js.org/#/themes
|
37 |
|
38 | ### CDN
|
39 |
|
40 | If the cdn reference cannot be referenced, you can choose another cdn below, or download it to a local reference.
|
41 |
|
42 | - jsdelivr cdn: https://cdn.jsdelivr.net/npm/docsify-dark-switch/
|
43 | - unpkg cdn: https://unpkg.com/browse/docsify-dark-switch/
|
44 |
|
45 | ## Configure
|
46 |
|
47 | ```html
|
48 | <script>
|
49 | window.$docsify = {
|
50 | // ...
|
51 | darkSwitch: {
|
52 | fixed: false,
|
53 | debug: false,
|
54 | },
|
55 | // ...
|
56 | }
|
57 | </script>
|
58 | ```
|
59 |
|
60 | | Argument | Description | Type | Default |
|
61 | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------------- |
|
62 | | `fixed` | Whether the switch button is fixed, that is, it is fixed in the upper right corner and does not scroll with the scroll bar. The default is not fixed. | `boolean` | `false` |
|
63 | | `debug` | Whether to enable debug mode, it is turned off by default. | `boolean` | `false` |
|
64 | | `style` | Set button style, which can be used to set button position and style. | `object` | `{ top: '25px', right: '60px' }` |
|
65 |
|
66 | ## Remembering the themes switching
|
67 |
|
68 | This plugin will remember the theme switching set. That means that when the browser is closed and then reopened, the theme switching will still be set. This is achieved via `localStorage`. |
\ | No newline at end of file |