diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 68285aa9c..2731ae26a 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -9,6 +9,7 @@
     --b3-theme-background-light: #dfe0e1;
     --b3-theme-surface: #f3f3f3;
     --b3-theme-surface-light: rgba(243, 243, 243, .86);
+    --b3-theme-surface-lighter: rgba(0, 0, 0, .06);
     --b3-theme-error: #d23f31;
 
     /* 文字颜色 */
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index 7c7580d02..8976b651a 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -9,6 +9,7 @@
     --b3-theme-background-light: #353637;
     --b3-theme-surface: #292a2d;
     --b3-theme-surface-light: rgba(41, 42, 45, .86);
+    --b3-theme-surface-lighter: rgba(230, 230, 230, .06);
     --b3-theme-error: #d23f31;
 
     /* 文字颜色 */
diff --git a/app/src/assets/scss/_block.scss b/app/src/assets/scss/_block.scss
index b52cb356a..17456d45f 100644
--- a/app/src/assets/scss/_block.scss
+++ b/app/src/assets/scss/_block.scss
@@ -77,7 +77,7 @@
   &__edit {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid var(--b3-border-color);
+    border-bottom: 1px solid var(--b3-theme-surface-lighter);
 
     .protyle-wysiwyg {
       transition: none;
diff --git a/app/src/assets/scss/_card.scss b/app/src/assets/scss/_card.scss
index fa170f8b1..a369974df 100644
--- a/app/src/assets/scss/_card.scss
+++ b/app/src/assets/scss/_card.scss
@@ -10,7 +10,7 @@
   cursor: pointer;
 
   &:hover {
-    background-color: var(--b3-border-color);
+    background-color: var(--b3-theme-surface-lighter);
     transform: translate(0px, -4px);
     box-shadow: var(--b3-dialog-shadow);
   }
diff --git a/app/src/assets/scss/_color.scss b/app/src/assets/scss/_color.scss
index cf5f01192..b583a596d 100644
--- a/app/src/assets/scss/_color.scss
+++ b/app/src/assets/scss/_color.scss
@@ -5,7 +5,7 @@
     width: 16px;
     border: 0;
     transition: var(--b3-transition);
-    box-shadow: 0 0 0 2px var(--b3-border-color) inset;
+    box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
     display: flex;
     align-items: center;
     flex-direction: column;
diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss
index 50b33e98e..19aeb6706 100644
--- a/app/src/assets/scss/_dialog.scss
+++ b/app/src/assets/scss/_dialog.scss
@@ -53,7 +53,7 @@
     line-height: 24px;
     font-size: 16px;
     font-weight: 500;
-    border-bottom: 1px solid var(--b3-border-color);
+    border-bottom: 1px solid var(--b3-theme-surface-lighter);
   }
 
   &__content {
@@ -63,7 +63,7 @@
 
   &__action {
     padding: 8px 24px;
-    border-top: 1px solid var(--b3-border-color);
+    border-top: 1px solid var(--b3-theme-surface-lighter);
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
@@ -87,7 +87,7 @@
     max-width: 520px;
 
     .b3-list:last-child {
-      border-left: 1px solid var(--b3-border-color);
+      border-left: 1px solid var(--b3-theme-surface-lighter);
       overflow: auto;
       max-width: 360px;
       min-width: 200px;
@@ -95,7 +95,7 @@
 
     .dialog__path {
       padding: 4px 8px;
-      border-top: 1px solid var(--b3-border-color);
+      border-top: 1px solid var(--b3-theme-surface-lighter);
       color: var(--b3-theme-on-surface);
       font-size: 12px;
       white-space: nowrap;
diff --git a/app/src/assets/scss/_form.scss b/app/src/assets/scss/_form.scss
index 5038a635d..b94ab2541 100644
--- a/app/src/assets/scss/_form.scss
+++ b/app/src/assets/scss/_form.scss
@@ -87,7 +87,7 @@
 }
 
 .b3-label {
-  border-bottom: 1px solid var(--b3-border-color);
+  border-bottom: 1px solid var(--b3-theme-surface-lighter);
   padding: 16px 24px;
   line-height: 20px;
 
diff --git a/app/src/assets/scss/_graph.scss b/app/src/assets/scss/_graph.scss
index 75ac0bf34..40d552150 100644
--- a/app/src/assets/scss/_graph.scss
+++ b/app/src/assets/scss/_graph.scss
@@ -48,7 +48,7 @@
       visibility: hidden;
       pointer-events: none;
       position: absolute;
-      border: 1px solid var(--b3-border-color);
+      border: 1px solid var(--b3-theme-surface-lighter);
       border-radius: 4px;
       box-shadow: var(--b3-dialog-shadow);
       background-color: var(--b3-theme-surface);
diff --git a/app/src/assets/scss/_layout.scss b/app/src/assets/scss/_layout.scss
index 255961bde..1f10c6794 100644
--- a/app/src/assets/scss/_layout.scss
+++ b/app/src/assets/scss/_layout.scss
@@ -1,7 +1,7 @@
 .layout {
   &__wnd--active {
     .layout-tab-bar .item--focus {
-      box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary) !important;
+      box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary);
 
       & > .item__text {
         color: var(--b3-theme-on-background);
@@ -35,7 +35,7 @@
     &:after {
       content: "";
       width: 100%;
-      height: 1px;
+      height: .5px;
       display: block;
       background-color: var(--b3-border-color);
       top: 3px;
@@ -52,7 +52,7 @@
 
       &:after {
         top: 0;
-        width: 1px;
+        width: .5px;
         left: 0;
         height: 100%;
       }
@@ -128,25 +128,26 @@
         transition: var(--b3-transition);
         flex: 1;
         min-height: 30px;
+        border-left: .5px solid transparent;
 
-        &:not(:last-child),
+        &:not(:first-child),
         &:last-child:not(.item--focus):not(.item--readonly) {
-          box-shadow: 2px -26px 0px 0px var(--b3-theme-surface), 1px -4px 1px 0px var(--b3-theme-on-surface-light);
-        }
-
-        &:last-child:not(.item--readonly) {
-          margin-right: 2px;
+          border-left-color: var(--b3-list-hover);
         }
 
         &:hover:not(.item--focus):not(.item--readonly) {
           background-color: var(--b3-list-hover);
-          box-shadow: none;
+          border-left-color: transparent;
 
           .item__text::after {
             background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-list-hover));
           }
         }
 
+        &--readonly {
+          border-left-color: var(--b3-list-hover);
+        }
+
         &--pin {
           flex: none;
 
@@ -169,11 +170,16 @@
 
         &--focus {
           background-color: var(--b3-theme-background);
-          box-shadow: none !important;
+          border-left-color: transparent !important;
+          box-shadow: inset 0 -2px 0 0 var(--b3-theme-background-light);
 
           .item__text::after {
             background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-theme-background));
           }
+
+          & + .item {
+            border-left-color: transparent !important;
+          }
         }
 
         &--unupdate {
@@ -245,17 +251,19 @@
   background-color: var(--b3-theme-surface);
 
   &#dockLeft {
-    border-right: 1px solid var(--b3-border-color);
+    border-right: .5px solid var(--b3-border-color);
   }
 
   &#dockRight {
-    border-left: 1px solid var(--b3-border-color);
+    border-left: .5px solid var(--b3-border-color);
+  }
+
+  &#dockTop {
+    border-bottom: .5px solid var(--b3-border-color);
   }
 
-  &#dockTop,
   &#dockBottom {
-    border-top: 1px solid var(--b3-border-color);
-    border-bottom: 1px solid var(--b3-border-color);
+    border-top: .5px solid var(--b3-border-color);
   }
 
   svg {
diff --git a/app/src/assets/scss/_list.scss b/app/src/assets/scss/_list.scss
index 9745aa4df..7b5a10583 100644
--- a/app/src/assets/scss/_list.scss
+++ b/app/src/assets/scss/_list.scss
@@ -55,7 +55,7 @@
     text-align: left;
     border: 0;
     color: var(--b3-theme-on-background);
-    margin-top: 0 !important;
+    margin: 0 8px !important;
 
     &[draggable="true"]:active {
       cursor: grabbing;
diff --git a/app/src/assets/scss/_menu.scss b/app/src/assets/scss/_menu.scss
index 9a038d42a..986f7ae3f 100644
--- a/app/src/assets/scss/_menu.scss
+++ b/app/src/assets/scss/_menu.scss
@@ -31,7 +31,7 @@
 
       .b3-menu__submenu {
         display: block;
-        border: 1px solid var(--b3-border-color);
+        border: 1px solid var(--b3-theme-surface-lighter);
         border-radius: 4px;
         background-color: var(--b3-menu-background);
         padding: 4px 0;
@@ -143,7 +143,7 @@
   }
 
   &__separator {
-    background-color: var(--b3-border-color);
+    background-color: var(--b3-theme-surface-lighter);
     height: 1px;
     margin: 4px 0;
     display: block;
@@ -245,7 +245,7 @@
     font-size: 16px;
 
     &:hover {
-      background-color: var(--b3-border-color);
+      background-color: var(--b3-theme-surface-lighter);
     }
 
     svg {
diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss
index 7312986d0..ffa50e163 100644
--- a/app/src/assets/scss/_protyle.scss
+++ b/app/src/assets/scss/_protyle.scss
@@ -56,7 +56,7 @@
 
     &:hover {
       color: var(--b3-theme-on-background);
-      background-color: var(--b3-border-color);
+      background-color: var(--b3-theme-surface-lighter);
     }
   }
 
diff --git a/app/src/assets/scss/_search.scss b/app/src/assets/scss/_search.scss
index 3fedecc91..a5cfb896e 100644
--- a/app/src/assets/scss/_search.scss
+++ b/app/src/assets/scss/_search.scss
@@ -3,7 +3,7 @@
     display: flex;
     background: var(--b3-theme-background);
     position: relative;
-    border-bottom: 1px solid var(--b3-border-color);
+    border-bottom: 1px solid var(--b3-theme-surface-lighter);
 
     .b3-text-field--text {
       font-size: 18px;
diff --git a/app/src/assets/scss/_switch.scss b/app/src/assets/scss/_switch.scss
index 758c9be46..633f46e4a 100644
--- a/app/src/assets/scss/_switch.scss
+++ b/app/src/assets/scss/_switch.scss
@@ -11,7 +11,7 @@
   display: inline-block;
   position: relative;
   cursor: pointer;
-  background-color: var(--b3-border-color);
+  background-color: var(--b3-theme-surface-lighter);
   overflow: inherit;
   user-select: none;
 
diff --git a/app/src/assets/scss/_toolbar.scss b/app/src/assets/scss/_toolbar.scss
index ecedd3cff..2b2202232 100644
--- a/app/src/assets/scss/_toolbar.scss
+++ b/app/src/assets/scss/_toolbar.scss
@@ -35,12 +35,12 @@
       }
 
       &:hover {
-        background-color: var(--b3-border-color);
+        background-color: var(--b3-theme-surface-lighter);
       }
     }
 
     &__divider {
-      border-left: 1px solid var(--b3-border-color);
+      border-left: 1px solid var(--b3-theme-surface-lighter);
       margin: 6px 4px;
     }
   }
@@ -65,7 +65,7 @@
       white-space: nowrap;
 
       &:hover {
-        border-color: var(--b3-border-color);
+        border-color: var(--b3-theme-surface-lighter);
       }
     }
   }
diff --git a/app/src/assets/scss/_typography.scss b/app/src/assets/scss/_typography.scss
index 5cccb4d40..cd8b2bf0f 100644
--- a/app/src/assets/scss/_typography.scss
+++ b/app/src/assets/scss/_typography.scss
@@ -36,7 +36,7 @@
   }
 
   iframe {
-    border: 1px solid var(--b3-border-color);
+    border: 1px solid var(--b3-theme-surface-lighter);
     width: 765px;
     box-sizing: border-box;
     height: 256px;
@@ -105,9 +105,9 @@
     color: var(--b3-theme-on-surface);
     vertical-align: middle;
     background-color: var(--b3-theme-surface);
-    border: solid 1px var(--b3-border-color);
+    border: solid 1px var(--b3-theme-surface-lighter);
     border-radius: 3px;
-    box-shadow: inset 0 -1px 0 var(--b3-border-color);
+    box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter);
   }
 
   u {
@@ -128,7 +128,7 @@
   .bq {
     padding: 4px;
     color: var(--b3-theme-on-surface);
-    border-left: 0.25em solid var(--b3-border-color);
+    border-left: 0.25em solid var(--b3-theme-surface-lighter);
     background-color: var(--b3-list-hover);
     margin: 4px 0;
   }
@@ -213,13 +213,13 @@
 
     tr {
       background-color: var(--b3-theme-surface);
-      border-top: 1px solid var(--b3-border-color);
+      border-top: 1px solid var(--b3-theme-surface-lighter);
     }
 
     td,
     th {
       padding: 4px 8px;
-      border: 1px solid var(--b3-border-color);
+      border: 1px solid var(--b3-theme-surface-lighter);
       box-sizing: border-box;
 
       &:empty::after {
@@ -563,7 +563,7 @@
     position: absolute;
     display: none;
     background-color: var(--b3-theme-surface);
-    border: 1px solid var(--b3-border-color);
+    border: 1px solid var(--b3-theme-surface-lighter);
     border-radius: 3px;
     padding: 3px;
     cursor: pointer;
diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/_wysiwyg.scss
index 5687f964d..1ba36453f 100644
--- a/app/src/assets/scss/_wysiwyg.scss
+++ b/app/src/assets/scss/_wysiwyg.scss
@@ -46,7 +46,7 @@
         }
 
         & > .protyle-action:after {
-          background-color: var(--b3-border-color);
+          background-color: var(--b3-theme-surface-lighter);
         }
 
         & > div:nth-child(3):not(.protyle-attr),
@@ -223,11 +223,11 @@
 
       &[data-type="NodeBlockQueryEmbed"] {
         background-color: var(--b3-theme-surface);
-        border-left: 1px dashed var(--b3-border-color);
+        border-left: 1px dashed var(--b3-theme-surface-lighter);
 
         & > .protyle-wysiwyg__embed {
           -webkit-user-modify: read-only;
-          border-top: 1px dashed var(--b3-border-color);
+          border-top: 1px dashed var(--b3-theme-surface-lighter);
           position: relative;
 
           .code-block:hover .protyle-icon,
@@ -321,7 +321,7 @@
         top: 4px;
         left: 4px;
         color: var(--b3-theme-primary);
-        background-color: var(--b3-border-color);
+        background-color: var(--b3-theme-surface-lighter);
         padding: 4px;
         border-radius: 4px;
 
@@ -464,7 +464,7 @@
     content: "";
     height: 16px !important;
     width: 16px;
-    background: var(--b3-border-color);
+    background: var(--b3-theme-surface-lighter);
     display: block;
     position: absolute;
     left: -18px !important;
@@ -553,7 +553,7 @@
   }
 
   span[data-type~="tag"]:hover {
-    background-color: var(--b3-border-color);
+    background-color: var(--b3-theme-surface-lighter);
   }
 
   span[data-type~="block-ref"]:hover,
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 09eadddec..0abc62b66 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -164,7 +164,7 @@ progressLoading: 400
   height: 42px;
   line-height: 22px;
   padding-left: 84px;
-  box-shadow: inset 0px -1px 1px 0px var(--b3-border-color);
+  border-bottom: .5px solid var(--b3-border-color);
 
   &--browser {
     padding-left: 0;
@@ -216,7 +216,7 @@ progressLoading: 400
 
     &--disabled,
     &--disabled:hover {
-      color: var(--b3-border-color);
+      color: var(--b3-theme-surface-lighter);
       cursor: not-allowed;
     }
 
@@ -241,6 +241,7 @@ progressLoading: 400
   height: 32px;
   line-height: 32px;
   z-index: 2;
+  border-top: .5px solid var(--b3-border-color);
 
   .toolbar__item {
     padding: 9px;
@@ -471,7 +472,7 @@ progressLoading: 400
 .spread-search {
   &__preview {
     background-color: var(--b3-theme-background);
-    border-top: 1px solid var(--b3-border-color);
+    border-top: 1px solid var(--b3-theme-surface-lighter);
   }
 
   &__filter {
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index d6f13f5dc..e7e4eb8d6 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -90,7 +90,7 @@
   background: var(--b3-theme-background);
 
   &--border {
-    border-bottom: 1px solid var(--b3-border-color);
+    border-bottom: 1px solid var(--b3-theme-surface-lighter);
   }
 
   &--dark {
@@ -257,7 +257,7 @@
   background: var(--b3-theme-background);
   z-index: 221;
   display: flex;
-  border-top: 1px solid var(--b3-border-color);
+  border-top: 1px solid var(--b3-theme-surface-lighter);
 
   button {
     background: transparent;
diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss
index 8a61ec86c..11f6edfca 100644
--- a/app/src/assets/scss/pdf/_pdf.scss
+++ b/app/src/assets/scss/pdf/_pdf.scss
@@ -212,7 +212,7 @@
   position: absolute;
   height: 4px;
   background-color: var(--b3-theme-on-background);
-  border-bottom: 1px solid var(--b3-border-color);
+  border-bottom: 1px solid var(--b3-theme-surface-lighter);
   transition-duration: 200ms;
   transition-timing-function: ease;
 }
@@ -344,7 +344,7 @@
   }
 
   &[disabled] {
-    color: var(--b3-border-color);
+    color: var(--b3-theme-surface-lighter);
   }
 }
 
@@ -446,7 +446,7 @@
   border-radius: 2px;
   padding: 7px;
   margin: 0 auto;
-  box-shadow: 0 0 1px 1px var(--b3-border-color);
+  box-shadow: 0 0 1px 1px var(--b3-theme-surface-lighter);
 }
 
 a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
@@ -535,7 +535,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 }
 
 .treeItem.selected > a {
-  background-color: var(--b3-border-color);
+  background-color: var(--b3-theme-surface-lighter);
 }
 
 .treeItemToggler:hover + a,
@@ -565,7 +565,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 #errorMoreInfo {
   background-color: var(--b3-theme-surface);
   color: var(--b3-theme-on-surface);
-  border: 1px solid var(--b3-border-color);
+  border: 1px solid var(--b3-theme-surface-lighter);
   padding: 3px;
   margin: 3px;
   width: 98%;
@@ -627,7 +627,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   margin: 4px 0;
   height: 1px;
   width: 100%;
-  background-color: var(--b3-border-color);
+  background-color: var(--b3-theme-surface-lighter);
 }
 
 .dialog .buttonRow {
diff --git a/app/src/menus/commonMenuItem.ts b/app/src/menus/commonMenuItem.ts
index 9221cfc5a..34d2e6edd 100644
--- a/app/src/menus/commonMenuItem.ts
+++ b/app/src/menus/commonMenuItem.ts
@@ -214,7 +214,7 @@ export const openFileAttr = (attrs: IObject, id: string, focusName = "bookmark")
         <div class="fn__space"></div>
         <span class="block__icon fn__flex-center"><svg></svg></span>
     </label>
-    <div style="background-color: var(--b3-border-color);height: 1px;margin: 16px 0;"></div>
+    <div style="background-color: var(--b3-theme-surface-lighter);height: 1px;margin: 16px 0;"></div>
     <div class="custom-attr__add">
         ${notifyHTML}
         ${customHTML}
@@ -410,7 +410,7 @@ export const openAttr = (nodeElement: Element, protyle: IProtyle, focusName = "b
         <div class="fn__space"></div>
         <span class="block__icon fn__flex-center"><svg></svg></span>
     </label>
-    <div style="background-color: var(--b3-border-color);height: 1px;margin: 16px 0;"></div>
+    <div style="background-color: var(--b3-theme-surface-lighter);height: 1px;margin: 16px 0;"></div>
     <div class="custom-attr__add">
         ${notifyHTML}
         ${customHTML}
diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts
index 6efa76afb..f247f93c5 100644
--- a/app/src/mobile/util/menu.ts
+++ b/app/src/mobile/util/menu.ts
@@ -134,7 +134,7 @@ export const popMenu = () => {
 <div class="b3-list-item b3-list-item--big${window.siyuan.config.readonly ? " fn__none" : ""}" id="menuHistory">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconVideo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.dataHistory}</span>
 </div>
-<div slot="border-bottom: 1px solid var(--b3-border-color);"></div>
+<div slot="border-bottom: 1px solid var(--b3-theme-surface-lighter);"></div>
 <div class="b3-list-item b3-list-item--big" id="menuAppearance">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconTheme"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.appearance}</span>
 </div>
diff --git a/app/src/protyle/export/index.ts b/app/src/protyle/export/index.ts
index 8b524963d..666f85748 100644
--- a/app/src/protyle/export/index.ts
+++ b/app/src/protyle/export/index.ts
@@ -179,7 +179,7 @@ const renderPDF = (id: string) => {
         }
         
         .b3-label {
-          border-bottom: 1px solid var(--b3-border-color);
+          border-bottom: 1px solid var(--b3-theme-surface-lighter);
           display: block;
           color: var(--b3-theme-on-surface);
           padding-bottom: 16px;
diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
index fa4ea4788..7ccc42b23 100644
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@@ -1613,11 +1613,11 @@ export class Gutter {
             }
         }, {
             label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
-    <span style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" class="b3-color__square fn__flex-center">A</span>
+    <span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="b3-color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
                 this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                    e.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
+                    e.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
                 });
             }
         }, {
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index 2d8e11748..4dc79f769 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -65,7 +65,7 @@ export const fontMenu = (protyle: IProtyle) => {
                     lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>`;
                     break;
                 case "style4":
-                    lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)">${window.siyuan.languages.shadow}</button>`;
+                    lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>`;
                     break;
                 case "fontSize":
                     lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
@@ -93,7 +93,7 @@ export const fontMenu = (protyle: IProtyle) => {
 <div style="margin: 4px 0 2px">${window.siyuan.languages.fontStyle}</div>
 <div class="fn__flex">
     <button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
-    <button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)">${window.siyuan.languages.shadow}</button>
+    <button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
 </div>
 <div style="margin: 4px 0 2px">${window.siyuan.languages.fontSize}</div>
 <div class="fn__flex">
@@ -174,7 +174,7 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption)
                 textElement.style.webkitTextFillColor = "transparent";
                 break;
             case "style4":
-                textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
+                textElement.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
                 break;
             case "id":
                 setBlockRef(textOption.color);
@@ -263,7 +263,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
             webkitTextFillColor === sideElement.style.webkitTextFillColor &&
             webkitTextStroke === sideElement.style.webkitTextStroke &&
             fontSize === sideElement.style.fontSize &&
-            "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" === sideElement.style.textShadow &&
+            "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" === sideElement.style.textShadow &&
             backgroundColor === sideElement.style.backgroundColor;
     }
     if (textObj.type === "fontSize") {