文章/答案/技术大牛

发布

社区首页 >问答首页 >单击“暗模式”按钮时，也要将暗模式应用于iframe标记。

问单击“暗模式”按钮时，也要将暗模式应用于iframe标记。
EN

Stack Overflow用户

提问于 2020-08-11 04:19:07

回答 2查看 1.8K关注 0票数 1

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

在研究黑暗模式特征时，我有一个问题。

单击“黑暗模式”按钮会更改其他标记，但不会更改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

回答 2

Stack Overflow用户

发布于 2020-08-11 04:24:50

您可以采取以下方法：

在单击黑暗模式按钮时，通过传递查询参数来更改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);

这应该适用于你的情况。

票数 0

Stack Overflow用户

发布于 2020-08-11 06:36:15

使用CSS filter: invert()属性。

检查

CSS反演，
CSS 倒转总结 &
MDN上的CSS滤波器。

这段片段应该能说明我的意思。

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>

以类似的方式，您可以应用一个败血症过滤器，如下面的代码段所示。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63351439

复制

相似问题

问单击“暗模式”按钮时，也要将暗模式应用于iframe标记。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击“暗模式”按钮时，也要将暗模式应用于iframe标记。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击“暗模式”按钮时，也要将暗模式应用于iframe标记。
EN