一款思源笔记软件的自用主题
——的草稿。
最后一天订阅了,我的推荐码是CpyERae
以下是主要样式设计来源:
- 参考了Semi Design的设计系统,统一了颜色、线条、圆角等变量
- 参考了Windows 11的设计,修改了主色、边栏、滑条、开关、输入框
- VS Code 的顶栏
- Craft 的呼出菜单、引述块
- Rem Note 的文档树
- Logseq 的页签
- Notion 的题头图、面包屑、编辑器各类块
- 参考了Achuan-2大佬的Tsundoku Light主题中的超链接自动展示图标功能
以下内容仅与自定义主题有关,建议有兴趣的朋友在Github仓库地址浏览,而非主题集市详情页内。
该主题是自用,因此有部分对其他用户来说可能过于激进的变更,如果你希望取消以下更改,需要了解自定义步骤后进行取消更改操作:
- 设置、搜索、笔记本设置等大宽度菜单的关闭键被隐藏(点击菜单四周的空白处即可关闭)
- 超链接的锚文本编辑功能被隐藏(可直接在编辑器内编辑)
- 编辑器输入区域的宽度写死了,目前为49vw
- 在Node.js官网下载并安装
- 克隆本仓库到本地,并更换到
dev
分支(此步骤建议使用 Github Desktop) - 在该仓库的根目录路径下,打开命令行工具,运行
npm i
- 等待依赖安装完成后,运行
npm run build
- 不关闭命令行工具,查看_variables.scss文件,其中包含了所有更改样式的相关颜色和部分共用样式,请按照自己的需求自行修改
以下相关操作与激进变更按序号对应:
- 相关代码在_dialog.scss文件中,结构如下所示,注释后编译即可取消
.b3-dialog__close { display: none; }
- 相关代码在_util.scss文件中,结构如下所示,注释后编译即可取消
&[style*="width"] { ... }
- 可通过修改_variables.scss文件中的
$rc-editor-width
变量调整
以上就是本菜鸡摸索出来的流程,也许之后我会开发一个主题自定义挂件,应该就不需要这么多复杂的步骤了…不过估计使用该主题的人不多,所以应该会鸽很久