【问题标题】：When I click the dark mode button, I want to apply the dark mode to the iframe tag as well当我单击暗模式按钮时，我也想将暗模式应用于 iframe 标签
【发布时间】：2020-08-11 04:19:07
【问题描述】：

目前正在研究暗模式功能。

我在研究暗模式功能时有一个问题。

单击深色模式按钮会更改其他标记，但不会更改 iframe 标记。

我也想对 iframe 标签应用深色模式。

我该怎么办？

下面的源码是文件中的源码。

01.文件：index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        iframe {
            margin:0;
            padding:0;
        }
        .layout-01 {
            border: 1px solid #ddd;
            padding:10px;
            margin-bottom: 20px;
            background: var(--bg-color);
            color: var(--font-color);
        }
        .iframe-layout {
            border: 1px solid #ddd;
            background: var(--bg-color);
            color: var(--font-color);
        }
        .iframe-layout iframe html p {
            color: var(--font-color);
        }
        :root {
            --bg-color: #fff;
            --font-color: #000;
        }
        html.darkmode:root {
            --bg-color: #000;
            --font-color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <button onClick="userTheme(true);">Toogle Theme</button>
    </div>

    <script>
        function userTheme(toggle = false) {
            let userMode = localStorage.userThemeMode || 'auto';
            const osMode = !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
            if(toggle) {
                switch(userMode) {
                    case 'auto':
                        userMode = 'dark'; break;
                    case 'dark':
                        userMode = 'light'; break;
                    default:
                        userMode = 'auto';
                }
                localStorage.userThemeMode = userMode;
            }
            console.log(`current mode : ${userMode}`);
            window.__THEME_MODE = userMode === 'auto' ? osMode : userMode;
            document.getElementsByTagName('html')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
            //document.querySelectorAll('iframe')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
        }
        if (!!window.matchMedia) {
            ['light', 'dark'].forEach(mode => {
                window.matchMedia(`(prefers-color-scheme: ${mode})`).addListener(e => {
                    if(!!e.matches) {
                        userTheme();
                    }
                });
            });
        }
        userTheme();
    </script>

    <div>
        <div class="layout-01">
            <p>text</p>
        </div>
        <div i="iframe-layout">
            <iframe src="test.html" frameborder="0" sandbox="allow-same-origin allow-scripts" seamless></iframe>
        </div>
    </div>

</body>
</html>

02. test.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        iframe {
            margin:0;
            padding:0;
        }
        .layout-01 {
            border: 1px solid #ddd;
            padding:10px;
            margin-bottom: 20px;
            background: var(--bg-color);
            color: var(--font-color);
        }
        .iframe-layout {
            border: 1px solid #ddd;
            background: var(--bg-color);
            color: var(--font-color);
        }
        .iframe-layout iframe html p {
            color: var(--font-color);
        }
        :root {
            --bg-color: #fff;
            --font-color: #000;
        }
        html.darkmode:root {
            --bg-color: #000;
            --font-color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <button onClick="userTheme(true);">Toogle Theme</button>
    </div>


    <script>
        function userTheme(toggle = false) {
            let userMode = localStorage.userThemeMode || 'auto';
            const osMode = !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
            if(toggle) {
                switch(userMode) {
                    case 'auto':
                        userMode = 'dark'; break;
                    case 'dark':
                        userMode = 'light'; break;
                    default:
                        userMode = 'auto';
                }
                localStorage.userThemeMode = userMode;
            }
            console.log(`current mode : ${userMode}`);
            window.__THEME_MODE = userMode === 'auto' ? osMode : userMode;
            document.getElementsByTagName('html')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
            //document.querySelectorAll('iframe')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
        }
        if (!!window.matchMedia) {
            ['light', 'dark'].forEach(mode => {
                window.matchMedia(`(prefers-color-scheme: ${mode})`).addListener(e => {
                    if(!!e.matches) {
                        userTheme();
                    }
                });
            });
        }
        userTheme();
    </script>

    <div>
        <div class="iframe-layout">
            <p>sdfsdfsdf</p>
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您可以采取以下方法：

单击暗模式按钮时，通过传递查询参数更改 iframe 的 URL。例如：www.example.com?theme=dark。
在iframe中，使用JS获取查询参数。根据参数，添加/删除会影响 iframe 主题的 css 类。例如：

let theme = 'dark' //Get this from URL
let class = theme=='dark'?'dark-theme-class':'default-theme';
document.body.classList.toggle(class);

这应该适用于您的情况。

【讨论】：

我对脚本了解不多。在 index.html 文件中“" 点击时，iframe 标签是否进入深色模式？

【解决方案2】：

使用 CSS `filter: invert()` 属性。

退房

CSS invert,
CSS invert summary &
MDN 上的CSS filter。

这个 sn-p 应该说明我的意思。

const iframes = document.querySelectorAll('iframe');

function toggleTheme() {
  for (i = 0; i < iframes.length; i++) {
    iframes[i].classList.toggle('is-dark');
  }
}

.is-dark {
  filter: invert(80%);
}

<!doctype html>
<html lang="en">

<body>

  <button onClick="toggleTheme();">Toogle Theme</button>

  <iframe id="the-iframe" src="https://wikipedia.org/"></iframe>

</body>

</html>

以类似的方式，您可以应用棕褐色过滤器，如下面的 sn-p 所示。

const iframes = document.querySelectorAll('iframe');

function toggleTheme() {
  for (i = 0; i < iframes.length; i++) {
    iframes[i].classList.toggle('is-sepia');
  }
}

.is-sepia {
  filter: sepia(100%);
}

<!doctype html>
<html lang="en">

<body>

  <button onClick="toggleTheme();">Toogle Theme</button>

  <iframe id="the-iframe" src="https://wikipedia.org/"></iframe>

</body>

</html>

【讨论】：

使用 CSS filter: invert() 属性。

使用 CSS `filter: invert()` 属性。