主题

YDoc 提供了简单易用强大的自定义主题功能。

安装

1.假设要安装 demo 主题,请执行以下命令:

npm install --save-dev ydoc-theme-demo

或者

ydoc theme ydoc-theme-demo

2.然后在 ydoc.json 配置:

{
  "theme": "demo"
}

自定义主题

新建主题

1.在根目录下创建 theme 文件夹,然后创建对应的 theme 文件夹,比如 ydoc-theme-demo, 在文件夹下写对应的主题

2.然后在 ydoc.json 配置:

{
  "theme": "demo"
}

基于已有主题定制

1.在项目根目录下执行以下命令:

ydoc theme ydoc-theme-demo -c

或者

ydoc theme ydoc-theme-demo --copy

命令执行完成后,项目根目录下会生成一个theme文件夹,文件夹中有一个ydoc-theme-demo的文件,ydoc-theme-demo文件中是主题的内容,修改该文件即可定制主题

2.然后在 ydoc.json 配置:

{
  "theme": "demo"
}

定制主题的技巧

1. 使用 sass 编译主题的 css

官方提供的主题使用了 sass 预处理器,官方主题的根目录下的 build.js 文件用于构建 css,例:

ydoc theme ydoc-theme-dark --copy
node theme/ydoc-theme-dark/build.js

即可编译 dark 主题的 css

2. 快速修改主题色

主题列表