`js
var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

darkThemeMediaQuery.addEventListener(function(e){
if(e.matches) {
document.documentElement.classList.add('dark')
}else{
document.documentElement.classList.remove('dark')
}
});

`

`js
var APPERANCE_KEY = 'layui-theme-mode-prefer-dark'

var savedPreferDark = localStorage.getItem(APPERANCE_KEY)

if(
savedPreferDark === 'true' ||
(!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
){
document.documentElement.classList.add('dark')
}

document.querySelector('#toggle-dark').addEventListener('click', function(){
var cls = document.documentElement.classList;
cls.toggle('dark');
localStorage.setItem(APPERANCE_KEY, String(cls.contains('dark')))
})
`

- 方案一：将切换主题的代码放在 标签中(推荐)

`js

`

- 方案二：创建 iframe 时，使用 display:none 隐藏 iframe 元素, 然后在 iframe 的 onload 事件回调中更改 display 属性为 display:block
`html