docsify-theme-switcher
v1.0.3
Published
A Docsify plugin for switching themes.
Downloads
9
Readme
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 <body> 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
<script>
window.$docsify = {
// ... (your existing Docsify config)
themeSelector: {
themes: [
{ name: "Light Theme", class: "theme-light" },
{ name: "Dark Theme", class: "theme-dark" },
{ name: "Retro Theme", class: "theme-retro" },
],
},
};
</script>
<script src="//cdn.jsdelivr.net/npm/docsify-theme-switcher@1/dist/theme-switcher.min.js"></script>Default styles, which you can override or replace with your own:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify-theme-switcher@1/dist/theme-switcher.min.css"
/>Options
themeSelector.themes
- Type:
Array<{ name: String, class: String }> - 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 <body> tag upon activation.
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, GitHub project).
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.gitThen install dependencies (you'll need
Node installed and the
docsify command available):
npm install -g docsify-cli
npm installFinally, boot the local dev server:
npm startBy 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 <body> tag.
License
This project was created by Kevin Zolkiewicz and is licensed under an MIT License.