SiYuan-Darcula

本贴最后更新于 1332 天前,其中的信息可能已经水流花落

简介

Tips

  1. 从当前版本开始不会再提供背景图片,需要手动添加背景图默认名称 darcula_bg.jpg

  2. 别名/命名 的显示需要在思源设置中手动开启

  3. change_siyuan_bg.sh 最好是配合 bingwallpaper 使用,执行脚本前需要修改脚本中的路径变量

    1. 每次更换背景会将旧背景存在 themes\siyan_bg 文件夹下
    2. 该脚本在 Windows 需要 gitbash

本人半吊子 CSS ,不会频繁更新,若发现 bug 欢迎各位贡献代码.

Glass - 开启毛玻璃的效果

相关主题的帖子

  • 颜色部分 , 将 --b3-theme-background 更改为 #31333500;
/*------------------------Glass 相关颜色配置-------------------------*/
  /*文件树背景色*/
    /*该层在 --b3-theme-background 的下层*/
  --AOD-theme-surface:#2b2b2bAA;
  /*编辑器主体背景色*/
    /*主要是侧边栏和最上方菜单栏*/
  --AOD-theme-background: #3b3b3bAA;
  --AOD-text-emphasize-color: #2b2b2b;
  
  /*背景图片,图片就放在Darcula主题目录下即可*/
  --b3-theme-bg:url(darcula_bg.jpg);
  /*图片上层背景色的透明度*/
    /*即编辑区背景色*/
  --b3-theme-background : #313335FF;
  /*Glass #31333500*/
/*-----------------------------------------------------------------*/
  • 界面设置部分 , 去掉注释
    • 该部分代码 参考 VIWZ frosted glass
    • 我自己折腾了好几天,也没弄明白怎么让背景图片充满整个编辑器 🤣
/*--------------------------Darcula-Galss-------------------------*/
/*----------------------- 整个界面包含背景图片--------------------*/
/*背景设定*/

/*
body.body--win32 {
    -webkit-font-smoothing: auto;
    border: 1px solid var(--b3-border-color);
    background-image: url(darcula_bg.jpg);
    background-position:center;
	  background-size:cover;
	  background-repeat:no-repeat;
    z-index: -1;
    background-size: cover;
    position: static;
    zoom: 1;
}
body {
    text-rendering: optimizeLegibility;
    margin: 0;
    font-family: var(--b3-font-family);
    background-color: rgba(43,43,43,0.92)!important;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    transition: var(--b3-transition);
    box-sizing: border-box;
    max-height: 100%;
    overflow: hidden;
    position: relative !important;
    backdrop-filter: blur(5px);
}
.layout__empty {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    background-color: #00000000;
    align-items: center;
}
*/

/*-------------------------------------------------------------------*/

效果

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22007 引用 • 87736 回帖 • 2 关注
1 操作
crowds21 在 2021-03-14 00:02:02 更新了该帖

相关帖子

6 回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 怎么让背景图片充满整个编辑器

    同问

    3 回复
  • crowds21

    就是我贴出来的那两段代码.第一个颜色部分,#31333500 的最后两位 00 表示完全透明, ff 表示完全不透明.

    界面设置的部分.把 /* body{ .....}*/ 的注释去掉 ,即变成 body{ .....},就能显示了.

    还有就是,图片尽量找大一些的,填充起来效果好.

    你具体可以到 github 仓库上看我这一版本的 CSS 文件. 现在 D 大,还没把我这版并入仓库.等明天估计就可以下了

    1 回复
  • crowds21

    CSS 不是特别熟练,你如果没有 CSS 基础,那我也不知道咋说的更明白了 👀

  • 谢谢,我没看完帖子就直接评论了 😂,明天抽空试试

    1 操作
    deerain 在 2021-03-14 00:16:23 更新了该回帖
  • VIWZ 1 赞同

    这个实际上是我抱着试一试的心态写的,没想到就写成功了(我也是半吊子 css),在 body.body--win32 这里设置图片链接,然后在 body 这里添加模糊度。如果要图片完全覆盖的话,就在 body.body--win32 这里进一步添加 background-size:cover;

    1 回复
  • crowds21

    我当时看了半天也没搞清楚各个图层是怎么相互覆盖的 🤦‍♂️,看了你的才明白点了.

请输入回帖内容 ...