Hay varios temas disponibles, tanto oficiales como creados por la comunidad. Copia el tema personalizado de sitios web como Vue y buble, y la contribución de @liril-net al tema de estilo oscuro.
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href "//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css" />!> Los archivos comprimidos están disponibles en /lib/themes/.
<!-- comprimido -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
<link relstylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dolphin.css" />Si tienes ideas o deseas desarrollar un nuevo tema, puedes enviar una solicitud de extracción (pull request).
vue.css
buble.css
dark.css
pure.css
dolphin.css
<style>
.demo-theme-preview a {
padding-right: 10px;
}
.demo-theme-preview a:hover {
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
const preview = Docsify.dom.find('.demo-theme-preview');
const themes = Docsify.dom.findAll('[rel="stylesheet"]');
preview.onclick = function (e) {
const title = e.target.getAttribute('data-theme');
themes.forEach(theme => {
theme.disabled = theme.title !== title;
});
};
</script>
- docsify-themeable Un sistema de temas maravillosamente simple para docsify.