iOS Safari扩展棕褐色（Sepia）主题异常：页面内容被意外变色的修复求助

Got it, let's tackle this sepia theme issue head-on. The problem right now is that your filter: sepia(1) is applied directly to the <body> element—CSS filters inherit to all child elements, so every piece of content (text, images, buttons, etc.) inside the body gets that sepia tint. That's why your content is changing color along with the background.

The Solution: Use a Pseudo-Element for Isolated Background Styling #

Instead of applying the filter to the entire body, we'll create a full-screen background layer using a pseudo-element. This layer sits behind all your page content, so only it gets the sepia treatment (or just a solid sepia background color, if that's all you need).

Here's the updated sepia.css:

body {
  position: relative;
  background-color: transparent !important; /* Hide the original body background */
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Use your desired sepia background color + filter (or just one of them) */
  background-color: rgb(246, 240, 229) !important;
  filter: sepia(1) !important;
  z-index: -1; /* Place the background behind page content */
  pointer-events: none; /* Ensure the background doesn't block clicks/interactions */
}

How This Works: #

• The body::before pseudo-element creates a fixed, full-screen layer that acts as your new background.
• z-index: -1 ensures this layer stays behind all normal page content.
• pointer-events: none makes sure the background layer doesn't interfere with any user interactions (like clicking links or scrolling).
• We set the original body background to transparent so it doesn't overlap with our new background layer.

Simplified Option (No Filter Needed) #

If you just want a solid sepia-toned background without the color-shifting filter effect, you can skip the filter property entirely:

body {
  position: relative;
  background-color: transparent !important;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f6f0e5 !important; /* Same as rgb(246, 240, 229) */
  z-index: -1;
  pointer-events: none;
}

Why Your Original Approach Failed #

Unlike your dark/gray themes (where you reversed the filter for images/videos), the sepia filter affects all content—text, icons, and more. Fixing every single element type would be messy, whereas the pseudo-element approach cleanly isolates the background styling from your page content.

Test this out in your extension, and you should see the sepia background applied without altering any of the page's text or content colors.

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