💄 https://github.com/siyuan-note/siyuan/issues/6197

app/src/assets/scss/_layout.scss

@@ -279,13 +279,14 @@
     border-radius: 4px;
     margin: 5px;
 
-    &:hover {
-      color: var(--b3-theme-on-background);
+    &:hover,
+    &--active {
       background-color: var(--b3-theme-background-light);
     }
 
-    &--active {
-      color: var(--b3-theme-on-background);
+    &--activefocus {
+      color: var(--b3-theme-on-primary) !important;
+      background-color: var(--b3-theme-primary) !important;
     }
   }
 }

app/src/assets/scss/base.scss

@@ -159,7 +159,7 @@ progressLoading: 400
 }
 
 .toolbar {
-  background-color: var(--b3-theme-surface);
+  background-color: #292a2d;
   box-sizing: border-box;
   height: 42px;
   line-height: 22px;
@@ -170,16 +170,20 @@ progressLoading: 400
   }
 
   #windowControls {
-    top: -1px;
+    top: 0;
     z-index: 502;
-    right: -1px;
+    right: 0;
     position: relative;
+
+    .toolbar__item svg {
+      width: 13px;
+    }
   }
 
   #drag {
     -webkit-app-region: drag;
     font-size: 14px;
-    color: var(--b3-theme-on-surface);
+    color: #9aa0a6;
     user-select: none;
     text-align: center;
     white-space: nowrap;
@@ -189,7 +193,7 @@ progressLoading: 400
   &__item {
     flex-shrink: 0;
     cursor: pointer;
-    color: var(--b3-theme-on-surface);
+    color: #9aa0a6;
     padding: 12px;
     box-sizing: border-box;
     transition: var(--b3-transition);
@@ -239,6 +243,7 @@ progressLoading: 400
 
   .toolbar__item {
     padding: 9px;
+    color: var(--b3-theme-on-surface);
 
     svg {
       height: 14px;

app/src/layout/util.ts

@@ -34,11 +34,20 @@ export const setPanelFocus = (element: Element) => {
     document.querySelectorAll(".block__icons--active").forEach(item => {
         item.classList.remove("block__icons--active");
     });
+    document.querySelectorAll(".dock__item--activefocus").forEach(item => {
+        item.classList.remove("dock__item--activefocus");
+    });
     document.querySelectorAll(".layout__wnd--active").forEach(item => {
         item.classList.remove("layout__wnd--active");
     });
     if (element.classList.contains("block__icons")) {
         element.classList.add("block__icons--active");
+        ["file", "inbox", "backlink", "tag", "bookmark", "graph", "globalGraph", "outline"].find(item => {
+            if (element.parentElement.classList.contains("sy__" + item)) {
+                document.querySelector(`.dock__item[data-type="${item}"]`).classList.add("dock__item--activefocus");
+                return true;
+            }
+        });
         const blockElement = hasClosestBlock(document.activeElement);
         if (blockElement) {
             const editElement = getContenteditableElement(blockElement) as HTMLElement;

app/src/util/onGetConfig.ts

@@ -474,7 +474,7 @@ const initWindow = () => {
     </svg>
 </div>
 <div aria-label="${window.siyuan.languages.max}" class="b3-tooltips b3-tooltips__sw toolbar__item" id="maxWindow">
-    <svg style="height: 11px">
+    <svg>
         <use xlink:href="#iconMax"></use>
     </svg>
 </div>