VSCode Lite Edit 主题使用记录

前言：电脑重装了一次 ，刚好自己又忘记备份了 ，还好没有什么重要的文件！ ， 刚好最近下回了思源笔记 ，就做个使用记录吧 ，代码片段找的都是之前的收藏的 ，还好可以继续使用

主题选择

使用主题：VSCode Lite Edit

插件下载

1. 代码片段管理器
2. 替换背景图片

背景图分享 - 链滴

我其实下载了很多的插件 ，不过这里以快速使用和装饰主题为主

字体使用

1. 阿里巴巴普惠体
2. 笔记字体：苍耳今楷 01

VS 主题常用代码片段

这里我把一些常用的给做了一个汇总 ，切换亮色主题的话是不影响的

/* 暗色模式下 */
:root[data-theme-mode=dark] {

  /* 文档树图标隐藏 */
  .block__logoicon {
    margin-right: 4px;
    height: 16px;
    width: 16px;
    padding: 4px;
    flex-shrink: 0;
    display: none;
}

  /* 顶栏文字隐藏 */
  .toolbar #drag { opacity: 0; }

  /* 代码块字体样式 */
  .b3-typography .hljs, .protyle-wysiwyg .hljs {
    font-family: Consolas !important;
}

.hljs-comment {
    font-size: 13px;
}

/*下划线*/
.b3-typography u, .b3-typography span[data-type~=u], .protyle-wysiwyg u, .protyle-wysiwyg span[data-type~=u] {
    background-color: transparent;
    border-bottom: 2px dashed var(--b3-theme-primary) !important;
}

  /* 修改图片亮度 */
  :root[data-theme-mode=dark] {
.b3-typography .img, .protyle-wysiwyg .img {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0 auto;
    max-width: 100%;
    user-select: none;
    word-break: keep-all;
    white-space: nowrap;
    filter: brightness(0.75);
}
}

  /* 去除图片后的多余空行 CSS片段 */
.b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {
   display:inline-block;
}
    /* 底部颜色 */
    .status {
        background-color: #3C3C3C;
    }
    .status * {
        color: #Dadada;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Cascadia Mono', 'Cascadia Code', 'Microsoft YaHei UI';
    }

  /* 左上方状态栏颜色 */
  --mk-toolbar-item--active: #3c3c3c !important;
    --mk-toolbar-item-barWorkspace--hover: #3c3c3c !important;

  /* 虚线备注 CSS片段 https://github.com/TCOTC/siyuan-css-dashed-line-memo */
.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {
    background-color: transparent;
    border-bottom: 2px dashed var(--b3-theme-primary) !important;
}

  /* 大纲字体 */
  .fn__flex-column.layout__dockr .file-tree {
  font-size: 13px !important;
}

  /* 滚动条 */
  .protyle-content:hover::-webkit-scrollbar-thumb {
    opacity: unset;
    background: unset;
}

.protyle-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.protyle-content::-webkit-scrollbar-track {
    border: unset;
}

.protyle-content::-webkit-scrollbar-thumb {
    opacity: unset;
    background: unset;
    -webkit-transition: unset;
    box-sizing: content-box;
    border: 4px solid rgba(0,0,0,0);
    border-radius: var(--b3-border-radius);
    box-shadow: inset 0 0 5px 5px var(--b3-scroll-color);
}

.protyle-content::-webkit-scrollbar-thumb:hover {
    background: unset;
    border-width: 1px
}

.protyle-content::-webkit-scrollbar-thumb:active {
    background: unset;
}

  /* 去除绿色横线 */
  .layout-tab-bar .item.item--pin {
    border-top: 0px solid var(--b3-theme-success);
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
}

  /* 下划线样式 */
  .b3-typography u, .b3-typography span[data-type~=u], .protyle-wysiwyg u, .protyle-wysiwyg span[data-type~=u] {
    background-image: none
    background-size: 200% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    transition: 0.3s cubic-bezier(0.8, 0, 0.9, 1);
    border-bottom: 2px dashed #3575f0 !important;
}

    /* 自定义文字颜色 */
    --b3-font-color1: #F08080 !important;   /* 深珊瑚红 */
    --b3-font-color2: #E8A8D0 !important;   /* 柔和粉 */
    --b3-font-color3: #7BADFF !important;   /* 加深蓝 */
    --b3-font-color4: #55B594 !important;   /* 加深翠绿 */
    --b3-font-color5: #E8D538 !important;   /* 明亮黄 */
    --b3-font-color6: #6ED3B8 !important;   /* 青绿色 */
    --b3-font-color7: #FF4B36 !important;   /* 番茄红 */
    --b3-font-color8: #F2B866 !important;   /* 稳重橙 */
    --b3-font-color9: #E0A8A8 !important;   /* 红灰 */
    --b3-font-color10: #3FC9B9 !important;  /* 青蓝 */
    --b3-font-color11: #6EA7F0 !important;  /* 天空蓝 */
    --b3-font-color12: #E09000 !important;  /* 橙色 */
    --b3-font-color13: #c09effdb !important;  /* 紫色 */


    /* 自定义背景颜色 */
    --b3-font-background1: #3A1F1F !important;  /* 对应深珊瑚红的背景色 */
    --b3-font-background2: #42343A !important;  /* 对应柔和粉的背景色 */
    --b3-font-background3: #1C3144 !important;  /* 对应加深蓝的背景色 */
    --b3-font-background4: #263D34 !important;  /* 对应加深翠绿的背景色 */
    --b3-font-background5: #443D12 !important;  /* 对应明亮黄的背景色 */
    --b3-font-background6: #2A423C !important;  /* 对应青绿色的背景色 */
    --b3-font-background7: #4F1C1C !important;  /* 对应番茄红的背景色 */
    --b3-font-background8: #453311 !important;  /* 对应稳重橙的背景色 */
    --b3-font-background9: #3E2E2E !important;  /* 对应红灰的背景色 */
    --b3-font-background10: #1F3F3A !important; /* 对应青蓝的背景色 */
    --b3-font-background11: #22304A !important; /* 对应天空蓝的背景色 */
    --b3-font-background12: #4C3000 !important; /* 对应橙色的背景色 */
    --b3-font-background13: #32204A !important; /* 对应紫色的背景色 */
  
}

图标推荐

我觉得这个挺搭配的