Как сделать медиа-запрос add prefers-color-scheme - PullRequest
Новая
       73

Как сделать медиа-запрос add prefers-color-scheme

1 голос
/ 28 мая 2020

Здравствуйте, у меня есть этот код: 

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

Как я могу добавить медиа-запрос prefers-color-scheme для автоматического включения созданного темного режима, когда у пользователя включен темный режим в браузере? Не могли бы вы помочь мне

1 Ответ

0 голосов
/ 05 июня 2020

Извините за поздний ответ. Быстрый код для интеграции (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 , а затем читает его и устанавливает тему на основе этого предпочтения . В конце концов, это то же самое, что и ваш код, позволяющий пользователю переключать темный и светлый режим (может быть, кнопка или флажок).

Для получения дополнительной информации вы можете поискать в некоторых блогах разработчиков на тема , и после быстрого поиска я бы сказал, что этот может точно соответствовать вашим потребностям (ps не мой блог :))

...