docsify-simple-dark-mode

docsify-simple-dark-mode

English | 中文

This is a plugin to add dark mode for docsify.

After Using This Plugin

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.

To Use

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',
    },
}

Attribute	Type	Description
useSwitchMode	Boolean	Whether to use this plugin
top	Integer	Top margin of the first icon, unit of measurement: px
right	Integer	Right margin of the icons, unit of measurement: px
svgColor	String	Color of the icons

Demo

Github Page

Others

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.