技术问询：如何隐藏图片预览区域的Dark mode图标

Got it, let's fix that annoying Dark Mode icon covering the image preview area on your target page. Here are a few solid solutions you can try:

1. 用自定义CSS直接隐藏图标 #

这是最快速的通用方法，不管你是普通访客还是网站维护者都能用上：

• 先打开浏览器开发者工具（按F12快捷键），定位到那个Dark Mode图标元素（它的类名是.dark-mode-toggle）。
• 添加以下自定义CSS代码来隐藏它：

  .dark-mode-toggle {
      display: none !important;
  }
  

• 如果你不想彻底隐藏，只是想让它不挡在图片前面，也可以调整它的层级优先级：

  .dark-mode-toggle {
      z-index: 1 !important; /* 把图标层级调低，让图片预览层自然覆盖它 */
  }
  

  普通访客可以用浏览器扩展（比如Stylus）来应用这段样式；如果是你自己的网站，直接把代码加到主题的自定义CSS区域就行。

2. 从根源调整布局（针对网站开发者） #

如果你是这个网站的维护者，可以从布局逻辑上彻底解决问题：

• 调整图标的定位方式：把它的position: fixed改成position: absolute，并限制在header容器内，避免它脱离正常布局流跑到图片预览层上方。
• 或者给图片预览模态框设置更高的层级，确保它始终在最上层：

  .wp-block-image .lightbox-container {
      z-index: 9999 !important;
  }
  

3. 临时快速移除（应急用） #

如果只是临时需要查看图片，不想折腾样式，直接在开发者工具里找到那个图标元素，右键选择「删除元素」，就能临时移除它，不影响图片预览操作。

内容的提问来源于stack exchange，提问作者sameerakodikara