最近我也是在使用并慢慢地了解MDUI,在这一过程中发现有一些或多或少的问题。

这篇文章就着重解决以下两个问题。

第一个是MDUI的列表,要么一行全占满屏幕,要么缩到最右边(例如文本框),很难看
我们可以通过在mdui-list上一级设置可以居中显示:

<div class="mdui-container" style="max-width: 500px; ">

第二个是为了使用者夜间阅读的便利,有不少开发者都把网站或应用设置了“深色模式”
而MDUI中则自带了这个模式。

但是当我们想实际使用的时候就会发现问题了:开关无法与 JavaScript 通信使用。
这个问题当时遇到后我找了很久也没有找到解决方案。
偶然间看到一篇文章,里面提到的方法如下:

我们可以在开关控件的lable层级加 id="bwmode" ,在 input 层级加 οnclick="checkmode()"
然后再用 JavaScript 进行如下操作:

 <script>
    if(localStorage.getItem("mode")==null || localStorage.getItem("mode")=="white")
    {
        document.getElementById("bwmode").innerHTML = '<input  onclick="checkmode()" type="checkbox"/><i class="mdui-switch-icon"></i>';
    }
    else
    {
        document.getElementById("bwmode").innerHTML = '<input  onclick="checkmode()" type="checkbox" checked/><i class="mdui-switch-icon"></i>';
        document.getElementById("allconfig").className = "mdui-color-black mdui-bottom-nav-fixed";
    }
 
    function checkmode()
    {
        if(localStorage.getItem("mode")==null)
        {
            localStorage.setItem("mode","black");
        }
        else if(localStorage.getItem("mode") == "white")
        {
            localStorage.setItem("mode","black");
            document.getElementById("allconfig").className = "mdui-color-black mdui-bottom-nav-fixed";
        }
        else
        {
            localStorage.setItem("mode","white");
            document.getElementById("allconfig").className = "mdui-color-white mdui-bottom-nav-fixed";
        }
    }
</script>

这样可以记住用户选择,很好用。

此文为转载,并经过明石修改。
原文:MDUI的黑暗模式实现和居中问题