使用CSS构建用于移动浏览器的棕褐色主题

Question

我正在建立一个 ios Safari扩展，它颠倒了不同的主题（灰色，黑暗和棕褐色）。灰色和深色效果很好，但是它对棕褐色的预期无法正常工作。它不仅改变了背景的颜色，还会改变页面内容的内容。 这是带有问题的图像，我希望它不倒入页面内容，这是目标图像

，这是我注入页面的CSS文件。

/* sepia.css */

body {
    background-color: rgb(246, 240, 229) !important;
    filter: sepia(1) !important;
}

/*dark.css*/

body {
    background-color: rgb(0, 0, 0) !important;
    filter: invert(1.0) hue-rotate(165deg) !important;
}

img,
video {
    filter: invert(1.0) hue-rotate(-165deg) !important;
}

/*gray.css*/

body {
    background-color: rgb(75, 75, 75) !important;
    filter: invert(0.85) hue-rotate(165deg) !important;
}

img,
video {
    filter: invert(0.85) hue-rotate(-165deg) !important;
}

这是我用来发送（注入）CSS文件到网站的JavaScript代码。

//popup.js

insertCSS("sepia.css");

function insertCSS(file) {
    return new Promise((resolve, reject) => {
        browser.tabs.insertCSS({ file }).then(resolve, reject);
    });
}