如何添加偏好颜色方案媒体查询答案

【问题标题】：How do a add prefers-color-scheme media query如何添加偏好颜色方案媒体查询
【发布时间】：2020-05-28 19:50:48
【问题描述】：

你好，我有这个代码：

<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>

当用户在浏览器中启用暗模式时，如何添加偏好颜色方案媒体查询以自动启用创建的暗模式？你能帮帮我吗

【问题讨论】：

你可以试试 if(window.matchMedia) window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { if (event.matches ) { //dark mode } else { //light mode } }) 你也想知道dark mode的变化。
你能帮我如何用我的代码准确地做到这一点

标签： color-scheme

【解决方案1】：

抱歉回复晚了。一个快速集成的代码（ps未经测试）：

    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（ps 不是我的博客 :)）

【讨论】：