有什么方法可以在Static html网站上实现Night and Day模式吗？

Question

我需要实现夜/日模式功能就像justanotherpanel网站我没有任何数据库但我有管理面板我只写html css和javascript

有没有办法当用户登录并点击按钮网站模式通过添加课程更改为夜间模式时，当他们注销并再次登录夜间模式仍在...？

ref site使用了这段代码

var mode =  false ;

    $('#nightmode').on('click', function() {
        mode = !mode;
        if (mode) {
            $(this).removeClass('fa-moon-o');
            $(this).addClass('fa-sun-o');

            daymode = $('.daymode').removeClass('daymode');
            daymode.addClass('nightmode');
            $.get('/changevariable/custom_variable_1?value=2', function() {

            });
        } else {
            $(this).removeClass('fa-sun-o');
            $(this).addClass('fa-moon-o');

            nightmode = $('.nightmode').removeClass('nightmode');
            nightmode.addClass('daymode');

            $.get('/changevariable/custom_variable_1?value=1', function() {

            });
        }
    });

Answer 1

您可以使用localStorage设置网站的模式。即使重新加载，它也会存储在用户的浏览器中。

    $(document).ready(function(){
       // Set the website mode when the page is loaded.

       var mode = localStorage.getItem('theme');

       // Set the selected theme if existing or else set the default theme.

          if(mode !== null){
              // Set the mode
              if(mode == "light"){
                $(this).removeClass('fa-moon-o');
                $(this).addClass('fa-sun-o');

                 daymode = $('.daymode').removeClass('daymode');
                 daymode.addClass('nightmode');

              } else if(mode == "night") {
                $(this).removeClass('fa-sun-o');
                $(this).addClass('fa-moon-o');

                nightmode = $('.nightmode').removeClass('nightmode');
                nightmode.addClass('daymode');

              }
          } else {
               // If no modes are selected. Define a default mode.
               $(this).removeClass('fa-moon-o');
               $(this).addClass('fa-sun-o');

               daymode = $('.daymode').removeClass('daymode');
               daymode.addClass('nightmode');
               localStorage.setItem("theme", "light")
          }

    })

    $('#toggleThemeMode').on('click', function() {
          var mode = localStorage.getItem('theme');
          if(mode !== null){
              // Toggle the selected modes.
              if(mode == "night"){
                $(this).removeClass('fa-moon-o');
                $(this).addClass('fa-sun-o');

                 daymode = $('.daymode').removeClass('daymode');
                 daymode.addClass('nightmode');
                 localStorage.setItem("theme", "light")

              } else if(mode == "light") {
                $(this).removeClass('fa-sun-o');
                $(this).addClass('fa-moon-o');

                nightmode = $('.nightmode').removeClass('nightmode');
                nightmode.addClass('daymode');

                localStorage.setItem("theme", "night")
              }
          } else {
               // If no modes are selected. Define a default mode.
               $(this).removeClass('fa-sun-o');
               $(this).addClass('fa-moon-o');

               nightmode = $('.nightmode').removeClass('nightmode');
               nightmode.addClass('daymode');

               localStorage.setItem("theme", "night")
          }
        };