[css] 图片反色问题显示问题

起因：之前所记录的图片反色的代码片段会把整体的都给去进行一个反色 ，包括文档树的图标 ，显得很奇怪

代码片段分享

html[data-theme-mode="dark"] {
  /* 1. 主要文档区域的反色 */
  .protyle-wysiwyg img[src*=".png" i]:not([class*="icon"]):not([src*="emoji"]) {
    filter: invert(1) hue-rotate(180deg);
  }
  
  /* 2. 预览模式下的图片 */
  .protyle-preview img[src*=".png" i] {
    filter: invert(1) hue-rotate(180deg);
  }
  
  /* 3. 重置不需要反色的图片 */
  .b3-menu img,
  .toolbar img,
  .protyle-toolbar img,
  .block__logo img,
  .avatar img,
  [class*="icon"] img,
  [src*="emoji"] {
    filter: none !important;
  }
}

如果觉得上面的太深了 ，就使用这个

/* 带调整的反色效果 */
html[data-theme-mode="dark"] .protyle-wysiwyg img[src*=".png" i] {
  filter: invert(0.85) hue-rotate(180deg) contrast(1.1);
  opacity: 0.95;
}

/* 或者针对不同场景使用不同效果 */
html[data-theme-mode="dark"] {
  /* 图表类图片 */
  .protyle-wysiwyg img[src*="chart" i],
  .protyle-wysiwyg img[src*="graph" i] {
    filter: invert(1) hue-rotate(180deg) saturate(1.2);
  }
  
  /* 截图类图片 */
  .protyle-wysiwyg img[src*="screenshot" i],
  .protyle-wysiwyg img[src*="screen" i] {
    filter: invert(0.9) hue-rotate(180deg) contrast(1.05);
  }
}