Dark and light theme with switch for docsify sites (also supports docsify-themeable)
Tags: docsify, darkmode, plugin, javascript
Published: 2020-04-27 20:02:05

# About me

Hi [imboopathikumar](https://boopathikumar.me) working as Full stack JavaScript developer also in AWS. I personally using docsify for generating documentation websites and I am big fan of dark mode. So I desided to create a plugin `docsify-darklight-theme` for docsify generated sites to switch between `dark-mode` and `light mode`. This is my first open source project and [npm package](https://www.npmjs.com/package/docsify-darklight-theme)

# What is docsify

[docsify.js](https://docsify.js.org) is static website generator using Markdown. It parses your Markdown files and displays them as a website less than a minute instead of generating static html files. Using various plugin support, You can create better looking website with docsify.


# docsify-darklight-theme *plugin*

[docsify-darklight-theme](https://docsify-darklight-theme.boopathikumar.me) which is a simple and highly customizable theme plugin for the documentation websites generated using [docsify.js](https://docsify.js.org/). Using this theme, documents will have a theme switcher to switch between <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffffff" stroke="#34495e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> `dark-mode` and <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffffff" stroke="#34495e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg> `light-mode` also comes with starter kit. Now available through [npm & CDN](https://docsify-darklight-theme.boopathikumar.me/#/installation). Try now for your docsify websites. It also supports with [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/)

**[docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/)** is a simple theme system for [docsify.js](https://docsify.js.org/). It have Legacy browser support (IE10+).

## #Features

- Default [theme mode detection](https://docsify-darklight-theme.boopathikumar.me/#/configuration?id=default-browser-theme-detection) in supported browser versions.
- Theme Switcher.
- Switcher support for [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/). View [setup guide](https://docsify-darklight-theme.boopathikumar.me/#/docsifyThemeable) here.
- Tooltip view for long sidebar items.
- Themes are customizable based on your color preferences.
- Option for other plugins to support (Dark/Light) mode. View [setup guide](https://docsify-darklight-theme.boopathikumar.me/#/themeSupport) here.
- Preferences can be modified directly in `window.$docsify` [configuration object](https://docsify-darklight-theme.boopathikumar.me/#/configuration).
- Using [configuration object](https://docsify-darklight-theme.boopathikumar.me/#/configuration)toogle icons can be configured based on your preference.
- Default theme(Dark/Light) can be configured based on your needs.
- Themes are remembered and retrieved from local storage.
- Redesigned search box.


## #Installation

You can use `docsify-darklight-theme` in three ways

 - [By starter template](https://docsify-darklight-theme.boopathikumar.me/#/installation?id=by-starter-template)
 - [Using NPM](https://docsify-darklight-theme.boopathikumar.me/#/installation?id=using-npm) adding to your existing project
 - [Using jsdelivr CDN](https://docsify-darklight-theme.boopathikumar.me/#/installation?id=using-jsdelivr-cdn) adding to your existing project

 Also it provides [theme support for other plugins](https://docsify-darklight-theme.boopathikumar.me/#/themeSupport) which are developed for **docsify.js**

### #Finally

Try [docsify-darklight-theme](https://docsify-darklight-theme.boopathikumar.me) for your docsify generated websites and share your thoughts.

Thank you everyone for the support

Follow me on twitter [@imboopathikumar](https://twitter.com/imboopathikumar) and [@docsify-darklight-theme](https://twitter.com/docsifyDrkLtThm)