docsify-dark-switch v1.0.2

docsify-dark-switch

A docsify plugin which can add light and dark themes switching functionality to your docsify site.

• Documentation - Demo, installation, options, and theme previews
• 中文文档

Screenshots

Installation

<!-- head -->
<!-- set theme stylesheet the corresponding title, you can set multiple  -->
<link rel="stylesheet" title="light" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" title="dark" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">

<!-- link docsify-dark-switch.css  -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-dark-switch/dist/docsify-dark-switch.css">

<!-- Also insert you custom css -->

<!-- body -->
<!-- script docsify-dark-switch.js or docsify-dark-switch.min.js  -->
<script src="//cdn.jsdelivr.net/npm/docsify-dark-switch/dist/docsify-dark-switch.min.js"></script>

This example uses the docsify official theme. You can also reference the theme css file you want, and you need to set the corresponding title. When switching the theme, the plugin will automatically switch the theme css file based on the title.

More docsify official themes: https://docsify.js.org/#/themes

CDN

If the cdn reference cannot be referenced, you can choose another cdn below, or download it to a local reference.

• jsdelivr cdn: https://cdn.jsdelivr.net/npm/docsify-dark-switch/
• unpkg cdn: https://unpkg.com/browse/docsify-dark-switch/

Configure

<script>
window.$docsify = {
    // ...
    darkSwitch: {
        fixed: false,
        debug: false,
    },
    // ...
}
</script>

Remembering the themes switching

This plugin will remember the theme switching set. That means that when the browser is closed and then reopened, the theme switching will still be set. This is achieved via localStorage.