当前位置：首页 > news >正文

VSCode Lite Edit 主题使用记录

news 2026/6/14 19:52:05

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

主题选择

使用主题：VSCode Lite Edit

插件下载

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

背景图分享 - 链滴

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

字体使用

阿里巴巴普惠体
笔记字体：苍耳今楷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: nonebackground-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; /* 对应紫色的背景色 */}