把 VSCode Lite Edit 主题变成自己喜欢的样子

挺喜欢这个主题的 ，为这个主题作者点赞 👍👍👍

在这里再贴上自己喜欢的图标 ，我感觉这个图标和这款主题挺适配的

主菜单颜色

:root[data-theme-mode=dark] {
	--mk-toolbar-item--active: #3c3c3c !important;
    --mk-toolbar-item-barWorkspace--hover: #3c3c3c !important;
}
​

标题颜色

[data-node-id].h1, .protyle-preview h1 {
    color: rgb(243, 153, 147) !important;
}

[data-node-id].h2, .protyle-preview h2 {
    color: #82b2dc !important;
}

[data-node-id].h3, .protyle-preview h3 {
    color: #BF9000 !important;
}

[data-node-id].h4, .protyle-preview h4 {
    color: #70AD47 !important;
}

[data-node-id].h5, .protyle-preview h5 {
    color: #E84C22 !important;
}

[data-node-id].h6, .protyle-preview h6 {
    color: #9f8ab9 !important;
}

/*大纲颜色*/
.sy__outline ul.b3-list.b3-list--background [data-subtype=h1], ul.b3-list.b3-list--background [data-subtype=h1] .b3-list-item__text {
    color: rgb(243, 153, 147) !important;
}

.sy__outline ul.b3-list.b3-list--background [data-subtype=h2], ul.b3-list.b3-list--background [data-subtype=h2] .b3-list-item__text {
    color: #82b2dc !important;
}

.sy__outline ul.b3-list.b3-list--background [data-subtype=h3], ul.b3-list.b3-list--background [data-subtype=h3] .b3-list-item__text {
    color: #BF9000 !important;
}

.sy__outline ul.b3-list.b3-list--background [data-subtype=h4], ul.b3-list.b3-list--background [data-subtype=h4] .b3-list-item__text {
    color: #70AD47 !important;
}

.sy__outline ul.b3-list.b3-list--background [data-subtype=h5], ul.b3-list.b3-list--background [data-subtype=h5] .b3-list-item__text {
    color: #E84C22 !important;
}

.sy__outline ul.b3-list.b3-list--background [data-subtype=h6], ul.b3-list.b3-list--background [data-subtype=h6] .b3-list-item__text {
    color: #9f8ab9 !important;
}
​

文字配色

/* 暗黑模式元数据定义 */
:root[data-theme-mode=dark] {
    /* 自定义文字颜色 */
    --b3-font-color1: #F08080;
    --b3-font-color2: #F9D2E4;
    --b3-font-color3: #7BADFF;
    --b3-font-color4: #66cdaa;
    --b3-font-color5: #FAED498F;
    --b3-font-color6: #7FFFD4;
    --b3-font-color7: #FF6347;
    --b3-font-color8: #FCD487;
    --b3-font-color9: #f3bcbc;
    --b3-font-color10: #48d1ccfc;
    --b3-font-color11: #87cefa;
    --b3-font-color12: #ffa500;
    --b3-font-color13: #c09effdb;

    --b3-font-background2: #423a3a !important;
    --b3-font-background13: #3c3c3cd9 !important;

    --b3-theme-on-surface: #DADADA !important;
}

​

底部颜色

.status {
    background-color: #3C3C3C;
}

.status * {
    color: #Dadada;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Cascadia Mono', 'Cascadia Code', 'Microsoft YaHei UI';
}
​

引述块

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    border-left: 0.25em solid #0b960e !important;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}

.b3-typography blockquote::before, .b3-typography .bq::before, .protyle-wysiwyg blockquote::before, .protyle-wysiwyg .bq::before {
    content: none;
    background-color: var(--b3-theme-surface-lighter);
    width: .25em;
    border-radius: var(--b3-border-radius);
    position: absolute;
    left: 2px;
    top: 6px;
    bottom: 6px;
}

.b3-typography blockquote, .protyle-wysiwyg [data-node-id].bq:not([style*='background-color']) {
    /* border: 1px solid var(--custom-blockquote-border-color);     border-left: 0.3em solid #a4b1ba;    */
    padding: 2px 4px;
    background-color: #73a8c70f;
    border: 0px solid transparent;
    border-left: 0.3em solid #a4b1ba;
    border-radius: 7px !important;
    color: #6a6969;
}

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    color: #DADADA !important;
    border-left: 0.25em solid #0b960e !important;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}
​

滚动条

.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;
}
​