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.
<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"
/>- Type:
Array<{ name: String, class: String | Array<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. The class
value may be a single class name or an array of class names, all of which will
be toggled together.
themes: [
{ name: "Light Theme", class: "theme-light" },
{ name: "Dark Theme", class: ["theme-dark", "high-contrast"] },
],- 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.
You can see this plugin in use as part of Docsify Breeze (Live example, GitHub project).
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 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 <body> tag.
This project was created by Kevin Zolkiewicz and is licensed under an MIT License.
This project is supported by 8th Light.