你好,我有这个代码:
<script>
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
</script>
当用户在浏览器中启用暗模式时,如何添加偏好颜色方案媒体查询以自动启用创建的暗模式?您能帮我吗
很抱歉,您的回复很晚。集成的快速代码(未测试):
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
if(window.matchMedia)
{
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event =>
{
if (event.matches && !$("body").hasClass("et-dark-mode"))
{
$(".et-dark-mode-capable,body").addClass("et-dark-mode");
if ( storageAvailable )
{
sessionStorage.setItem('etDarkModeEnabled','1'):
}
}
else
{
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
if ( storageAvailable )
{
sessionStorage.removeItem('etDarkModeEnabled');
}
}
}
);
}
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
简而言之,它检查浏览器是否支持window.matchMedia,然后读取它并根据该首选项设置主题。最后,它与您的代码相同,允许用户切换明暗模式(可能是按钮或复选框)。
有关更多信息,您可以搜索一些dev blogs on the subject,在快速搜索后,我会说this one might closely match your needs(p.s。不是我的博客:))