UNPKG

docsify-darklight-theme

Version:

Enables dark and light mode for docsify sites with switch

80 lines (60 loc) 5.25 kB
<p align="center"> <a href="https://docsify-darklight-theme.boopathikumar.me"> <img src="https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/docsify-darklight-theme-logo.png" style="width: 160px;height: 100px;" alt="jsdeliver"> </a> </p> <p align="center"> <b>docsify-darklight-theme</b> </p> <p align="center" > <a target="_blank" href="https://docsify-darklight-theme.boopathikumar.me/"> Docs | Preview</a> </p> <p align="center"> <a href="https://www.jsdelivr.com/package/npm/docsify-darklight-theme"> <img src="https://data.jsdelivr.com/v1/package/npm/docsify-darklight-theme/badge?style=rounded" alt="jsdeliver"> </a> <a href="https://badge.fury.io/js/docsify-darklight-theme"> <img src="https://badge.fury.io/js/docsify-darklight-theme.svg" alt="npm-version"> </a> <a href="https://badge.fury.io/js/docsify-darklight-theme"> <img src="https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/2020-01-01:2050-01-01/docsify-darklight-theme&label=npm%20downloads&query=$.downloads&color=informational" alt="npm-downloads"> </a> <a href="https://badge.fury.io/gh/boopathikumar018%2Fdocsify-darklight-theme"> <img src="https://badge.fury.io/gh/boopathikumar018%2Fdocsify-darklight-theme.svg" alt="GitHub version" height="20"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="licenses" height="20"> </a> </p> <p align="center"> Dark and Light theme with switch for your docsify site</p> <p align="center"> <a href="https://github.com/boopathikumar018/docsify-darklight-theme"> Give us a ⭐️ on Github to support our plugin!</a> </p> <p align="center" > <a target="_blank" href="https://docsify-darklight-theme.boopathikumar.me/#/installation"> view starter template installation guide</a> </p> # What it is **docsify-darklight-theme** is a simple and highly customizable theme for the documentation websites generated using [docsify.js](https://docsify.js.org/) ( also with [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/#/) ). 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` . See the [Quick start](https://docsify-darklight-theme.boopathikumar.me/#/installation) guide for more details. # 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. - 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. # Maintainers [@boopathikumar](//boopathikumar.me) [@eswarijayakumar](https://github.com/eswarijayakumar) [@kumaravel](//kumaravel.me) # Release notes View the [Change log](https://docsify-darklight-theme.boopathikumar.me/#/changelog) to know the details of each versions. # Support - Create a [GitHub issue](https://github.com/boopathikumar018/docsify-darklight-theme/issues) for bug reports, feature requests, or questions - Follow [@docsify-darklight-theme](https://twitter.com/docsifyDrkLtThm) for announcements and release updates. - Add a ⭐️ [star on GitHub](https://github.com/boopathikumar018/docsify-darklight-theme) to support the plugin! # License This project is licensed under the terms of the [MIT](https://github.com/boopathikumar018/docsify-darklight-theme/blob/master/LICENSE) license. © [Boopathi Kumar](https://boopathikumar.me)