登录 注册

思源笔记主题 Notion

参考 Notion 写的一个明亮模式的主题。

才发现明亮模式的主题好难写，暗黑模式下我写的那个主题哐哐哐两三种黑色 + 阴影就成了，剩下的都是编辑器内部样式；而明亮模式光 UI 就需要调好久，十几种白色排在一起晃得人眼晕（可能是我太菜了）。

已经发布，可直接从社区集市下载安装。具体简介见仓库。

重点 ：

preview.png

1 引用
Notion 主题 题头图（Cover） • zqhjl
抚州 位置
5 感谢
1 收藏
1 引用
13 回帖
3
824 147 22 13 22 2 1 616

相关帖子

随便看看

广告 我要投放

13 回帖
思源笔记主题 Notion

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • fangly •
    订阅者

    写得太好了，感谢！

    一点小建议：悬浮窗没有边框，颜色也和背景一样，和背景融为一体了，有点难区分出悬浮窗的边界

    1 回复
  • zqhjl •
    作者

    你是指哪个悬浮窗呢？

    1 回复
  • fangly •
    订阅者

    不好意思，是我弄错了，我不想要图片有阴影，所以注释了阴影部分的代码，导致块引用的悬浮窗阴影也没了。

    我想问一下，如果我想图片没有阴影，块引用悬浮窗有阴影或边界要怎么调整呢。谢谢！

    1 回复
  • zqhjl •
    作者

    你可以用 --b3-dialog-shadow 作为搜索条件，找到含有 span[data-type="img"] img, 的这一行代码，注释掉就可以了。我看了下也觉得图片用这个阴影有点问题，我试试换一个。

  • Yotsuba • • 1
    支持者 订阅者

    很好看！

  • fangly • • 1 评论
    订阅者

    image.png

    社区集市按钮看不见了

    刚刚改好了，你可以更新看看
    zqhjl •
  • Achuan-2 • • 4 评论
    订阅者

    支持支持！

    Light 和 Dark 主题两个一起维护真的蛮累的，真的改不动了……自己的笔记都没写多少，全花在门面上了……
    Achuan-2 •
    @Achuan-2 哈哈哈我是在写笔记的过程中看到哪个不顺眼就改掉了
    zqhjl •
    @zqhjl 我也这样啊，然而打字半小时，修改主题 4 小时，不过现在亮色主题已经是我满意的样子了（至少今天是，苦笑），也不想再花太多时间改了
    Achuan-2 •
    @Achuan-2 哈哈哈哈一样一样，我也已经基本上满意了，不想主动找 bug，所以才想着发到论坛里收集下别人找到的 bug
    zqhjl •
  • fangly •
    订阅者

    image.png

    分屏的时候看不见分界线

    顺带再问一个问题，如果我想要上方的编辑工具栏不要隐藏，无论我鼠标移不移上去都一直显示的话，代码要怎么改呢？谢谢

    1 回复
    1 操作
    fangly 在 2021-03-05 16:38:54 更新了该回帖
  • Yzg100 •
    支持者 订阅者

    感谢大佬，辛苦了。之前一直在用 Atom One Dark!

    1 回复
  • zqhjl •
    作者

    哈哈哈哈谢谢

  • zqhjl •
    作者

    分屏这个是我一直以来的设计了，因为把内定的 border 颜色改成和背景颜色相同了，如果要修改的话整体 UI 就不好看了。

    如果是想要不隐藏的话，可以以 富文本工具栏 为搜索条件找到如下代码：

    .vditor-toolbar__item {
  transition: opacity 400ms ease 0s;
  opacity: 0;
  margin: 0 2px;
  margin-bottom: 4px;
}

.vditor-toolbar:not(.vditor-toolbar--hide):hover .vditor-toolbar__item {
  opacity: 1;
}

    把其中的 transition: opacity 400ms ease 0s; 和 opacity: 0; 以及

    .vditor-toolbar:not(.vditor-toolbar--hide):hover .vditor-toolbar__item {
  opacity: 1;
}

    都注释掉就可以了

  • crowds21 •
    订阅者

    一个改进的小点,不知道能不能实现,当我的块引用锚文本设置为代码时,如下.

    ((20210403014754-acq594t "{{.text}}")), 显示出来的效果 锚文本,能够再锚文本类型为代码时,也给该锚文本加一个下划线或其他方便区分的样式,方便区分,而非只有鼠标移上去的时候,才显示下划线.

    image.png

    image.png

    1 回复
  • zqhjl •
    作者

    我去看了下，好像 {{.text}} 没有被设置特定的选择器，所以你的这个想法应该是实现不了…你可以试试发个帖子看看 D 大 V 姐会不会采纳这个建议

请输入回帖内容 ...