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

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