docsify-dark-mode

docsify-dark-mode

This is docsify plugin which enables dark mode for your docsify site

Installation

Add the following stylesheet along with your other stylesheets

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/docsify-dark-mode@latest/dist/style.css"
/>

And add the following script

<script src="https://cdn.jsdelivr.net/npm/docsify-dark-mode@latest/dist/index.js"></script>

Configure

In your docsify config object add the following

window.$docsify = {
...
darkMode : {
  dark: {
    background: '',
    toggleBtnBg: '',
    textColor: ''
  },
  light: {
    background: '',
    toggleBtnBg: '',
    textColor: ''
  }
}
...
}

Default options

dark: {
  background: '#1c2022',
  toggleBtnBg: '#34495e',
  textColor: '#b4b4b4'
},
light: {
  background: 'white',
  toggleBtnBg: 'var(--theme-color)',
  textColor: 'var(--theme-color)'
}

Thanks it, Now enjoy :tada: your dark mode in your docsifysite

Keeping the state of mode

As of v0.2.0, this plugin will keep the state of current mode being used. That means even if the browser is closed and then opened again, this plugin will remember the mode being used last times. It is achieved using localStorage

Screen Shot

Button (in light mode)

Button (in dark mode)

docsify page (ligth mode)

docsify page (dark mode)

Contribution Guide

• Clone the repo
• start editing on src/index.js and src/style.css
• The build step using
  • Optimize the generated style using cssnano and postcss
  • Build the javascript using rollup
  • optimize it using rollup-plugin-terser
  • styling rule using standard