Сохранение настроек темного режима для моего сайта - PullRequest
Новая
       2

Сохранение настроек темного режима для моего сайта

0 голосов
/ 23 октября 2019

Я создал темный режим для своего веб-сайта, но когда я включаю темный режим, затем обновляю страницу или удаляю настройки сброса настроек. Мне нужен способ сохранить предпочтение в виде куки. Вот код, который я добавил в jquery. Я также определил цвета темного режима в моих файлах CSS. 

    $( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
  $( "body" ).removeClass( "dark" );
  $( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
  $( ".inner-switch" ).text( "OFF" );
  } else {
  $( "body" ).addClass( "dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
  $( ".inner-switch" ).text( "ON" );
  }
});

Ответы [ 3 ]

1 голос
/ 23 октября 2019

Сначала вам нужно сохранить ваше состояние, например, в localstorage: 

$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
localStorage.removeItem("dark");
$( "body" ).removeClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
$( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
$( ".inner-switch" ).text( "OFF" );
} else {
 localStorage.setItem("dark");
 $( "body" ).addClass( "dark" );
 $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
 $( ".inner-switch" ).text( "ON" );
 }
});

Затем вы проверяете загрузку, если установлено localalstorage: 

<body onload="myFunction()">

myFunction(){
   if(localStorage.getItem("dark")){
      $( "body" ).addClass( "dark" );
      $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
      $( ".inner-switch" ).text( "ON" );
}
0 голосов
/ 23 октября 2019

Моя кнопка темного режима не работает, когда я использую локальное хранилище. Ошибки в изображении.

Изображение

0 голосов
/ 23 октября 2019

Вам нужно сохранить пользовательские настройки в браузере, и самый простой способ сделать это - использовать localStorage.

Используя localStorage, вы можете иметь переменную, скажем darkMode, чтоВы можете сохранить в браузере, и он останется там даже после закрытия и повторного открытия браузера.

Итак, как только пользователь открывает ваш сайт, вы можете:

  • Считайте ранее сохраненное значение darkMode, если пользователь является возвращающимся пользователем, или

  • Установите для вашей переменной darkMode значение по умолчанию, скажем "OFF".

. 

onload = function() {
    if(localStorage.getItem("darkMode")) {
        var mode = localStorage.getItem("darkMode");
        //apply relevant CSS changes based on the value of 'mode'
    }
}

Затем в обработчике события переключателя вы можете перевернуть значение переменной следующим образом: 

$( ".inner-switch" ).on("click", function() {
    var mode = localStorage.getItem("darkMode");
    localStorage.setItem("darkMode", (mode == 'ON'? 'OFF': 'ON'));
    //relevant CSS changes
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...