8 lines
1.8 KiB
HTML
8 lines
1.8 KiB
HTML
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>石墨灰配色验证</title><style>body{margin:0;font:14px system-ui;background:#a5a5a0}header{padding:8px;display:flex;gap:10px}button{padding:8px}iframe{width:100%;height:calc(100vh - 60px);border:0}</style><header><button data-theme="light">亮色</button><button data-theme="dark">暗色</button><button id="reverse">快速反向切换</button><button id="archive">档案展示</button><button id="workbench">桌面工作台</button><button id="reduced">减少动态效果</button><button id="full">完整动效</button><output></output></header><iframe src="/?scene=archive" title="明暗配色对比"></iframe><script>
|
|
const f=document.querySelector('iframe');const props=p=>f.contentWindow.wallpaperPropertyListener?.applyUserProperties(Object.fromEntries(Object.entries(p).map(([k,v])=>[k,{value:v}])));
|
|
f.onload=()=>props({desktopmode:'workbench',sound:false,music:false,audioreactive:false,reduced:false,colortheme:'light'});
|
|
document.querySelectorAll('[data-theme]').forEach(b=>b.onclick=()=>props({colortheme:b.dataset.theme}));document.querySelector('#reverse').onclick=()=>{props({colortheme:'dark'});setTimeout(()=>props({colortheme:'light'}),350);setTimeout(()=>props({colortheme:'dark'}),620)};
|
|
document.querySelector('#archive').onclick=()=>props({desktopmode:'archive'});document.querySelector('#workbench').onclick=()=>props({desktopmode:'workbench'});document.querySelector('#reduced').onclick=()=>props({reduced:true});document.querySelector('#full').onclick=()=>props({reduced:false});
|
|
setInterval(()=>{const d=f.contentDocument;document.querySelector('output').textContent=d?`暗色表面 ${d.documentElement.dataset.darkSurface} · ${d.documentElement.style.getPropertyValue('--theme-paper')}`:''},100);
|
|
</script></html>
|