Simple Themeable

A docsify.js plugin to simplify the color selection for docsify-themeable.

Installation and usage instructions

[!NOTE] Sorry for not providing a demo, but I thought this is a very self explanatory setup. But I am using this activly in another projects.

How to install this plugin:

1. Make sure you have docsify-themeable installed.
2. Copy one of the stylesheet segments from below and copy it into the head section your index.html file. Make sure that is is after all other plugins and before your own modifications.
3. Copy the color-files from the example directory into your projects _css/ folder.
4. Change the colors in those files to your liking.

Production

For production, please use the numbered version to prevent breaking changes in production.

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="./_css/colors-dark.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="./_css/colors-light.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/main.min.css">

Development

If you are developing on a doc, you can use the latest. Make sure you switch it to production later, or the production one right away.

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="./_css/colors-dark.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="./_css/colors-light.css">
<link rel="stylesheet" href="https://unpkg.com/docsify-simple-themeable@latest/dist/main.min.css">

Tips

• This project is inspired by the color pallet naming scheme of daisyUI: You can use their theme generator to select colors.
• If you think something on your docs should have a different color. You are more then welcome to copy the src/main.css into your _css folder as well. Just make sure you don't forget to adjust hte link in in the head section of your index.html!
• If you already have a css files, you are free to change the folder location in the stylesheet references in index.html.
• If you need additional fixes, feel free to copy my css file from this repo.

Contributing

I'm always happy, if someone has improvements to this little plugin. If you want to help, anything goes, but preferred is what is on the roadmap below or maybe discuss it as a GitHub issue first. ^^

Roadmap

Nothing much here, but I'm planning to add the following features at some point:

• [ ] Remove requirement for docsify-themeable.

License

This repo is using the MIT license.

Credit

Thanks to the docsify.js team to make changing CSS so simple. I usually don't front end, but this was a breeze to get working.