思源笔记主题 Notion

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

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

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

重点

preview.png

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 姐会不会采纳这个建议

请输入回帖内容 ...