[](https://opensource.org/licenses/MIT)
# docsify-theme-switcher
A Docsify plugin that adds a dropdown menu for switching between multiple themes.
This plugin will add a specified class name to your Docsify site's `` tag,
which you can then use to make styling changes. The selected theme will be
stored in `localStorage`, so it will persist between page loads.
## Usage
```html
```
Default styles, which you can override or replace with your own:
```html
```
## Options
### themeSelector.themes
- Type: `Array<{ name: String, class: String | Array }>`
- Default: `undefined`
**Required.** An array of themes with a `name` for the select menu and a `class`
which will be added to the document's `` tag upon activation. The `class`
value may be a single class name or an array of class names, all of which will
be toggled together.
```js
themes: [
{ name: "Light Theme", class: "theme-light" },
{ name: "Dark Theme", class: ["theme-dark", "high-contrast"] },
],
```
### themeSelector.pathRegex
- Type: `RegExp`
- Default: `undefined`
An optional regex for displaying the theme selector only on certain pages. For
example, a value of `/components\/(.+)/` will only show the selector on pages
that contain `/components/` in the path.
## Live Example
You can see this plugin in use as part of **Docsify Breeze** ([Live example](https://docsify-breeze.vercel.app/components/button), [GitHub project](https://github.com/zolk/docsify-breeze)).
## Local Demo
You can test this project locally in a demo Docsify installation.
First, clone this repo:
```
git clone https://github.com/zolk/docsify-theme-switcher.git
```
Then install dependencies (you'll need
[Node](https://nodejs.org/en/download/package-manager/) installed and the
`docsify` command available):
```
npm install -g docsify-cli
npm install
```
Finally, boot the local dev server:
```
npm start
```
By default, the server will boot at http://localhost:3000.
Note that you won't see any visual changes in this demo when changing the theme,
but the associated theme class name will be added to the `` tag.
## License
This project was created by [Kevin Zolkiewicz](http://zolk.com) and is licensed
under an [MIT License](./LICENSE).
