目前提供了一些主题,包括官方和社区制作的。模仿 Vue 和 buble 官网订制的主题样式,还有 @liril-net 贡献的黑色风格的主题等。
<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">
!> CSS 的压缩文件位于 /lib/themes/
<!-- compressed -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
<link rel="stylesheet" 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">
如果你有其他想法或者想开发别的主题,欢迎提 PR。
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>
var preview = Docsify.dom.find('.demo-theme-preview');
var themes = Docsify.dom.findAll('[rel="stylesheet"]');
preview.onclick = function (e) {
var title = e.target.getAttribute('data-theme')
themes.forEach(function (theme) {
theme.disabled = theme.title !== title
});
};
</script>
- docsify-themeable 一个用于docsify的,简单到令人愉悦的主题系统.