docsify-simple-dark-mode

English | 中文

This is a plugin to add dark mode for docsify.

This plugin adds a fixed floating icon to the top-right corner of the whole page, which will be appearing all the time, even when you scroll your screen down. Clicking on this icon will change the theme of your site between vue.css and dark.css.

In index.html, ensure you have following style sheets, and install this plugin:

<!-- stylesheets -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css" disabled>

<!-- docsify-simple-dark-mode plugin -->
<script src="https://cdn.jsdelivr.net/gh/pikapikapikaori/docsify-simple-dark-mode@latest/src/switchLightDarkMode.js"></script>

Add settings:

window.$docsify = {
    switchLightDarkMode: {
        useSwitchMode: true,
        top: 130,
        right: 26,
        svgColor: '#7d7b75',
    },
}

Github Page

It's welcomed to make pr to this repo in order to improve this plugin.

If you like this plugin, please give a star, thanks!

For more tools I developed please refer to my blog.