Enabled dark and light mode with switch for docs using docsify-darklight-theme

[boopathikumar018]

Hi @jhildenbiddle,

I add dark and light mode with switch for docs using docsify-darklight-theme. As of now I used the default stylesheets provided by docsify-themeable and switch between them.

Light Mode

Dark Mode

[boopathikumar018]

Hi @jhildenbiddle,

Let me know if any changes need to be done to merge.

[jhildenbiddle]

Hi @boopathikumar018 --

Thank you for taking the time to file a PR. Much appreciated.

As I've explained in docsifyjs/docsify#1182 (comment), there are a number of issues which prevent me from being able to accept this PR. Many of the issues raised in that comment are applicable to docsify-themeable as well, so I won't repeat them here.

Also mentioned in that comment are the following suggestions which you may find useful:

If a better dark/light theme switcher is what we're after (and that is how this PR was pitched), I suggest the following:

1. I'd love to see @boopathikumar018 offer a more focused plugin (not a theme) that provides dark/light theme functionality with two core features: the ability to specify separate dark and light URLs (so dark/light themes are configurable) and the ability to enable a dark/light URL by default based on the operating systems current dark/light mode settings (see here for details). The only CSS that should accompany this plugin are the styles necessary for the toggle itself.
2. An interesting stretch goal for the plugin would be to allow more than two theme URLs to be specified (not just dark/light). When two URLs are specified, the icon element acts as a toggle. When three-or-more URLs are specified, a drop-down list of themes appears under the icon on hover/tap. I mention this because both the docsify and docsify-themeable sites could use this functionality to provide theme previews.
3. Ensure the JS errors have been addressed in IE11. I didn't spend too much time debugging, but it looks like an arrow function is used which IE (obviously) doesn't like.
4. Provide the current docsify-darklight-theme "dark" theme as a separate theme (no JS, just the theme). This will allow users to select it as their theme without the plugin, or use it with the plugin along with docsify's own "vue.css" theme to recreate docsify-darklight-theme's current look and functionality.

The advantage of the steps above comes down to flexibility: both docsify and docsify-themeable could use the plugin to swap between their own "official" dark/light themes (vue.css/dark.css for docsify, "simple" and "simple-dark" for docsify-themeable). More importantly, users would be able to select their own dark/light themes, perhaps mixing themes from different authors.