From 24921cd449c4b4b726e63c4bc354806c3c690f24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=A8=E5=B0=8F=E9=80=8F=E6=98=8E=E3=83=BB=E5=AE=B8?=
 =?UTF-8?q?=E2=9C=A8?= <1272742391@qq.com>
Date: Thu, 5 Dec 2019 16:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=B7=B2=E7=9F=A5=E9=97=AE=E9=A2=98=EF=BC=88=E5=A4=A7=E9=9B=BE?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   8 +-
 fuckWechat.js                                 |  20 +-
 index.html                                    | 215 +++++++++++-------
 mdicons/{ => black_icons}/app_acfun.svg       |   2 +-
 mdicons/{ => black_icons}/app_cloudmusic.svg  |   2 +-
 mdicons/{ => black_icons}/app_coolapk.svg     |   2 +-
 mdicons/{ => black_icons}/app_qq.svg          |   2 +-
 mdicons/{ => black_icons}/app_tieba.svg       |   2 +-
 mdicons/{ => black_icons}/app_wechat.svg      |   2 +-
 back.svg => mdicons/black_icons/back.svg      |  30 +--
 mdicons/black_icons/comment.svg               |  13 ++
 mdicons/black_icons/emoticon.svg              |  12 +
 mdicons/black_icons/ic_battery_20_48px.svg    |   5 +
 mdicons/black_icons/ic_battery_30_48px.svg    |   5 +
 mdicons/black_icons/ic_battery_50_48px.svg    |   5 +
 mdicons/black_icons/ic_battery_60_48px.svg    |   5 +
 mdicons/black_icons/ic_battery_80_48px.svg    |   5 +
 mdicons/black_icons/ic_battery_90_48px.svg    |   5 +
 .../ic_battery_charging_20_48px.svg           |   5 +
 .../ic_battery_charging_30_48px.svg           |   5 +
 .../ic_battery_charging_50_48px.svg           |   5 +
 .../ic_battery_charging_60_48px.svg           |   5 +
 .../ic_battery_charging_80_48px.svg           |   5 +
 .../ic_battery_charging_90_48px.svg           |   5 +
 .../ic_battery_charging_full_48px.svg         |   4 +
 mdicons/black_icons/ic_battery_full_48px.svg  |   4 +
 .../ic_signal_cellular_0_bar_48px.svg         |   1 +
 .../ic_signal_cellular_1_bar_48px.svg         |   1 +
 .../ic_signal_cellular_2_bar_48px.svg         |   1 +
 .../ic_signal_cellular_3_bar_48px.svg         |   1 +
 .../ic_signal_cellular_4_bar_48px.svg         |   1 +
 .../black_icons/ic_signal_wifi_0_bar_48px.svg |   1 +
 .../black_icons/ic_signal_wifi_1_bar_48px.svg |   1 +
 .../black_icons/ic_signal_wifi_2_bar_48px.svg |   1 +
 .../black_icons/ic_signal_wifi_3_bar_48px.svg |   1 +
 .../black_icons/ic_signal_wifi_4_bar_48px.svg |   1 +
 mdicons/white_icons/app_acfun.svg             |  10 +
 mdicons/white_icons/app_cloudmusic.svg        |  25 ++
 mdicons/white_icons/app_coolapk.svg           |  15 ++
 mdicons/white_icons/app_qq.svg                |  13 ++
 mdicons/white_icons/app_tieba.svg             |  20 ++
 mdicons/white_icons/app_wechat.svg            |  17 ++
 mdicons/white_icons/back.svg                  |  15 ++
 .../white_icons/comment.svg                   |  26 +--
 .../white_icons/emoticon.svg                  |  28 +--
 .../{ => white_icons}/ic_battery_20_48px.svg  |   0
 .../{ => white_icons}/ic_battery_30_48px.svg  |   0
 .../{ => white_icons}/ic_battery_50_48px.svg  |   0
 .../{ => white_icons}/ic_battery_60_48px.svg  |   0
 .../{ => white_icons}/ic_battery_80_48px.svg  |   0
 .../{ => white_icons}/ic_battery_90_48px.svg  |   0
 .../ic_battery_charging_20_48px.svg           |   0
 .../ic_battery_charging_30_48px.svg           |   0
 .../ic_battery_charging_50_48px.svg           |   0
 .../ic_battery_charging_60_48px.svg           |   0
 .../ic_battery_charging_80_48px.svg           |   0
 .../ic_battery_charging_90_48px.svg           |   0
 .../ic_battery_charging_full_48px.svg         |   0
 .../ic_battery_full_48px.svg                  |   0
 .../ic_signal_cellular_0_bar_48px.svg         |   0
 .../ic_signal_cellular_1_bar_48px.svg         |   0
 .../ic_signal_cellular_2_bar_48px.svg         |   0
 .../ic_signal_cellular_3_bar_48px.svg         |   0
 .../ic_signal_cellular_4_bar_48px.svg         |   0
 .../ic_signal_wifi_0_bar_48px.svg             |   0
 .../ic_signal_wifi_1_bar_48px.svg             |   0
 .../ic_signal_wifi_2_bar_48px.svg             |   0
 .../ic_signal_wifi_3_bar_48px.svg             |   0
 .../ic_signal_wifi_4_bar_48px.svg             |   0
 69 files changed, 427 insertions(+), 130 deletions(-)
 rename mdicons/{ => black_icons}/app_acfun.svg (96%)
 rename mdicons/{ => black_icons}/app_cloudmusic.svg (99%)
 rename mdicons/{ => black_icons}/app_coolapk.svg (98%)
 rename mdicons/{ => black_icons}/app_qq.svg (97%)
 rename mdicons/{ => black_icons}/app_tieba.svg (98%)
 rename mdicons/{ => black_icons}/app_wechat.svg (98%)
 rename back.svg => mdicons/black_icons/back.svg (95%)
 create mode 100644 mdicons/black_icons/comment.svg
 create mode 100644 mdicons/black_icons/emoticon.svg
 create mode 100644 mdicons/black_icons/ic_battery_20_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_30_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_50_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_60_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_80_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_90_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_20_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_30_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_50_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_60_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_80_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_90_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_charging_full_48px.svg
 create mode 100644 mdicons/black_icons/ic_battery_full_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_cellular_0_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_cellular_1_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_cellular_2_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_cellular_3_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_cellular_4_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_wifi_0_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_wifi_1_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_wifi_2_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_wifi_3_bar_48px.svg
 create mode 100644 mdicons/black_icons/ic_signal_wifi_4_bar_48px.svg
 create mode 100644 mdicons/white_icons/app_acfun.svg
 create mode 100644 mdicons/white_icons/app_cloudmusic.svg
 create mode 100644 mdicons/white_icons/app_coolapk.svg
 create mode 100644 mdicons/white_icons/app_qq.svg
 create mode 100644 mdicons/white_icons/app_tieba.svg
 create mode 100644 mdicons/white_icons/app_wechat.svg
 create mode 100644 mdicons/white_icons/back.svg
 rename comment.svg => mdicons/white_icons/comment.svg (98%)
 rename emoticon.svg => mdicons/white_icons/emoticon.svg (98%)
 rename mdicons/{ => white_icons}/ic_battery_20_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_30_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_50_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_60_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_80_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_90_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_20_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_30_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_50_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_60_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_80_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_90_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_charging_full_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_battery_full_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_cellular_0_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_cellular_1_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_cellular_2_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_cellular_3_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_cellular_4_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_wifi_0_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_wifi_1_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_wifi_2_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_wifi_3_bar_48px.svg (100%)
 rename mdicons/{ => white_icons}/ic_signal_wifi_4_bar_48px.svg (100%)

diff --git a/README.md b/README.md
index 545d240..8fd660f 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,12 @@
 
 ### 更新记录
 
+#### 2019.12.5
+
+~~解决了一些已知问题。~~
+
+支持选择生成 7.0 以上版本白色界面的截图。
+
 #### 2019.6.8
 
 还是根据 [Issue #4](https://github.com/TransparentLC/WechatMomentScreenshot/issues/4)，增加了在生成的截图中设定评论的功能～ฅ•̀∀•́ฅ
@@ -26,7 +32,7 @@
 
 ~~也欢迎请小透明喝肥宅快乐水(\*´∀`)~~
 
-#### 2019.5.14 
+#### 2019.5.14
 
 新功能：输入微信公众号文章链接，自动获取文章标题和封面。
 
diff --git a/fuckWechat.js b/fuckWechat.js
index e55102e..f6cbe03 100644
--- a/fuckWechat.js
+++ b/fuckWechat.js
@@ -4,14 +4,26 @@
 if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
     var div = document.createElement('div');
     div.setAttribute('id', 'fuckWechat');
-    div.style.cssText = 'position: fixed; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 18px; font-size: 18px; line-height: 1.5em; background-color: #fff; z-index: 2147483647; display: flex; justify-content: center; align-items: center;'
+    document.querySelector('.mdui-appbar').style.filter = 'blur(2px)';
+    document.querySelector('.mdui-container').style.filter = 'blur(2px)';
+    div.style.cssText = 'position: fixed; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 18px; font-size: 16px; line-height: 1.5em; background-color: rgba(255,255,255,.6); z-index: 2147483647; display: flex; justify-content: center; align-items: center;'
     div.innerHTML = ''
       + '<div>'
       +     '<h1>(　^ω^)</h1>'
-      +     '<p>我们刚刚做了一个非常艰难的决定，这个网页不允许使用微信内置浏览器打开。<a href="javascript:;" style="color: #175199;" onclick="alert(\'因为微信要维护它所谓的“绿色上网环境”啊 :)\')">为什么这样做？</a></p>'
-      +     '<p>请点击右上角，选择“在浏览器打开”。</p>'
+      +     '<p><a href="https://www.zhihu.com/question/271184234" style="color: #175199;">“为什么一些人只使用 QQ 而不使用微信？”</a></p>'
+      +     '<p>因为微信是个：</p>'
+      +     '<ul>'
+      +     '<li>电脑版功能不全还只能扫码登录</li>'
+      +     '<li>做不出夜间模式</li>'
+      +     '<li>群聊不能禁言</li>'
+      +     '<li>把人拉进群聊不需要本人同意</li>'
+      +     '<li>无法一键清除小红点</li>'
+      +     '<li>公众号文章插个外部链接都不行</li>'
+      +     '</ul>'
+      +     '<p>……的辣鸡软件，所以我就加上了这个遮罩层把它批判一番 : )</p>'
+      +     '<p><button style="width: 100%; background-color: #175199; color: #fff; border: none; border-radius: 4px; height: 2em;" onclick="document.body.removeChild(document.getElementById(\'fuckWechat\'));document.querySelector(\'.mdui-appbar\').style.filter=\'\';document.querySelector(\'.mdui-container\').style.filter=\'\';">继续</button></p>'
+      +     '<p style="text-align: center; color: #bbb; font-size: 14px">使用浏览器打开此页面，即可直接跳过遮罩层</p>'
       + '</div>';
 
-    document.body.innerHTML = '';
     document.body.append(div);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1d228b3..ea96b5a 100644
--- a/index.html
+++ b/index.html
@@ -6,19 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <meta http-equiv="Cache-Control" content="no-transform" />
-    <!--<link rel="stylesheet" href="mdui.min.css">-->
-    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/mdui/0.4.2/css/mdui.min.css">-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css" integrity="sha256-6qmBnKuMpat5q87DddBqPCow5gfT/seDX7MMCqcF23g=" crossorigin="anonymous">
     <style>
         body {
             margin: 0 0 0 0;
+            overflow-x: hidden;
         }
 
         #fakeWechatMoment {
-            background-color: #ffffff;
-            /*display: none;*/
-            position: fixed;
+            background-color: #fff;
             display: block;
+            position: fixed;
             left: 100%;
             top: 0;
         }
@@ -29,7 +27,7 @@
             background-color: #303030;
             font-size: 34px;
             font-weight: 500;
-            color: #ffffff;
+            color: #fff;
             display: flex;
             justify-content: space-between;
             align-items: Center;
@@ -42,7 +40,7 @@
             height: 132px;
             background-color: #303030;
             font-size: 48px;
-            color: #ffffff;
+            color: #fff;
             display: flex;
             align-items: Center;
         }
@@ -156,7 +154,7 @@
 
         .like {
             width: 100%;
-            background-color: #eeeeee;
+            background-color: #eee;
             font-size: 0;
         }
 
@@ -238,13 +236,77 @@
             display: inline-block;
         }
 
+        .commentInput {
+            border: none;
+            border-bottom: 2px solid #5ec838;
+            font-size: 40px; color: #bbb;
+            width:760px;
+            height: 88px;
+            padding-left: 24px;
+            padding-right: 24px;
+            display: flex;
+            align-items: center;
+        }
+
+        .commentSend {
+            border: 2px solid #dcdcdc;
+            border-radius: 7px;
+            font-size: 36px;
+            color: #dcdcdc;
+            width: 122px;
+            height: 88px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
         .heimu{
-            background-color: #000000;
-            color: #000000;
+            background-color: #000;
+            color: #000;
             transition: color .2s ease;
         }
         .heimu:hover{
-            color: #ffffff;
+            color: #fff;
+        }
+
+        .whiteUI #topBarTime {
+            color: #000;
+        }
+
+        .whiteUI .topBar,
+        .whiteUI .header {
+            background-color: #efefef;
+            color: #181818;
+        }
+
+        .whiteUI #topBarTime {
+            color: #626262;
+        }
+
+        .whiteUI .squareImage {
+            border-radius: 10px;
+        }
+
+        .whiteUI .avatarOut {
+            background-color: transparent;
+        }
+
+        .whiteUI .avatarIn {
+            left: 0;
+            top: 0;
+            width: 116px;
+            height: 116px;
+        }
+
+        .whiteUI .footer {
+            border-top: #bfbfbf;
+            background-color: #f7f7f7;
+        }
+
+        .whiteUI .commentInput {
+            background-color: #fff;
+            border: none;
+            color: #aaa;
         }
     </style>
 </head>
@@ -471,6 +533,18 @@
             </div>
         </div>
 
+        <div class="mdui-textfield">
+            <label class="mdui-textfield-label">界面</label>
+        </div>
+        <div class="mdui-row">
+            <div class="mdui-col-xs-12">
+                <label class="mdui-checkbox">
+                    <input id="configUIWhite" type="checkbox" name="configUIWhite" />
+                    <i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面
+                </label>
+            </div>
+        </div>
+
         <div class="mdui-textfield">
             <label class="mdui-textfield-label">通知栏</label>
         </div>
@@ -507,7 +581,7 @@
             </div>
             <div id="header" class="header">
                 <div style="width: 40px;"></div>
-                <img src="back.svg" style="width: auto; height: 48px;" />
+                <img style="width: auto; height: 48px;" />
                 <div style="width: 40px;"></div>
                 详情
             </div>
@@ -548,7 +622,7 @@
                         <div style="height: 20px;"></div>
                         <span id="time"></span>&nbsp;<span style="color: #576b95">删除</span>
                     </div>
-                    <img src="comment.svg" style="position: relative; display: inline-block; width: auto; height: 42px; top: 9px;" />
+                    <img style="position: relative; display: inline-block; width: auto; height: 42px; top: 9px;" />
                 </div>
                 <div style="height: 50px;"></div>
                 <img id="triangle" src="triangle.svg" width="40" height="16" style="position: relative; left: 25px; top: 5px;" />
@@ -563,11 +637,11 @@
                 </div>
             </div>
             <div id="footer" class="footer">
-                <div style="border: none; border-bottom: 2px solid #5ec838; font-size: 40px; color: #bbbbbb; width:760px; height: 88px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center;">评论</div>
+                <div class="commentInput">评论</div>
                 <div style="width: 22px; display: inline-block;"></div>
-                <img src="emoticon.svg" width="88" height="88" />
+                <img style="width: 88px !important; height: 88px !important;" />
                 <div style="width: 40px; display: inline-block;"></div>
-                <div style="border: 2px solid #dcdcdc; border-radius: 7px; font-size: 36px; color: #dcdcdc; width: 122px; height: 88px; display: flex; align-items: center; justify-content: center; ">发送</div>
+                <div class="commentSend">发送</div>
             </div>
         </div>
 
@@ -684,7 +758,7 @@
             <div class="mdui-dialog-content mdui-typo">
                 <div style="text-align: center;">
                     <div>
-                        <img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1DpS1VMHqK1RjSZFE763GMXXac.png" /><img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1.nuUVHvpK1RjSZPi762mwXXat.png" />
+                        <img id="donateWechat" width="50%" src="https://ae01.alicdn.com/kf/HTB1DpS1VMHqK1RjSZFE763GMXXac.png" /><img id="donateAlipay" width="50%" src="https://ae01.alicdn.com/kf/HTB1.nuUVHvpK1RjSZPi762mwXXat.png" />
                     </div>
                     <span class="mdui-typo-caption-opacity">扫一扫(`ε´ )<br />左：微信 右：支付宝</span>
                 </div>
@@ -695,12 +769,8 @@
         </div>
     </div>
 
-    <!--<script src="mdui.min.js"></script>-->
-    <!--<script src="https://cdn.bootcss.com/mdui/0.4.2/js/mdui.min.js"></script>-->
-    <script src="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/js/mdui.min.js"></script>
-    <!--<script src="html2canvas.min.js"></script>-->
-    <!--<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>-->
-    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/js/mdui.min.js" integrity="sha256-czQNy3ygtVNeyJKT2CrwVzzDBa9VfksAad4F6y2oad4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js" integrity="sha256-feQHyrGaCrKuXRH9q/y7/1+YlHczxI0FybmcWNtjdlI=" crossorigin="anonymous"></script>
     <script src="avatarURL.js"></script>
     <script src="emoticon.js"></script>
     <script>
@@ -741,7 +811,7 @@
                 document.getElementById('requestResultContent').innerHTML = '<div class="mdui-valign"><div class="mdui-spinner"></div><span class="mdui-m-l-2">获取中…… (oﾟωﾟo)</span></div>';
                 mdui.updateSpinners();
                 requestDialog.open();
-            }, function () { });
+            }, null);
         }
 
         //删除所有发表的九宫格图片
@@ -780,7 +850,7 @@
             document.getElementById('gitLink').style.display = 'none';
         }
 
-        var commentList = Array();
+        var commentList = [];
 
         //添加评论
         function addComment(avatar, name, content, date) {
@@ -924,36 +994,29 @@
             }
         });
 
-        document.getElementById('configSetMultiImage1').addEventListener('change', function () {
-            document.getElementById('image1').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-
-        document.getElementById('configSetMultiImage2').addEventListener('change', function () {
-            document.getElementById('image2').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage3').addEventListener('change', function () {
-            document.getElementById('image3').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage4').addEventListener('change', function () {
-            document.getElementById('image4').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage5').addEventListener('change', function () {
-            document.getElementById('image5').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage6').addEventListener('change', function () {
-            document.getElementById('image6').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage7').addEventListener('change', function () {
-            document.getElementById('image7').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage8').addEventListener('change', function () {
-            document.getElementById('image8').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
-        document.getElementById('configSetMultiImage9').addEventListener('change', function () {
-            document.getElementById('image9').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
-        });
+        for (var i = 1; i <= 9; i++) {
+            !function (i) {
+                document.getElementById('configSetMultiImage' + i).addEventListener('change', function () {
+                    document.getElementById('image' + i).style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
+                });
+            }(i);
+        }
 
         document.getElementById('generate').addEventListener('click', function () {
+            // 是否使用7.0以上版本白色界面？
+            var useWhiteUI = document.getElementById('configUIWhite').checked;
+            if (useWhiteUI) {
+                document.getElementById('fakeWechatMoment').classList.add('whiteUI');
+                document.querySelector('#header > img').src = 'mdicons/black_icons/back.svg';
+                document.querySelector('.content > img').src = 'mdicons/black_icons/comment.svg';
+                document.querySelector('#footer > img').src = 'mdicons/black_icons/emoticon.svg';
+            } else {
+                document.getElementById('fakeWechatMoment').classList.remove('whiteUI');
+                document.querySelector('#header > img').src = 'mdicons/white_icons/back.svg';
+                document.querySelector('.content > img').src = 'mdicons/white_icons/comment.svg';
+                document.querySelector('#footer > img').src = 'mdicons/white_icons/emoticon.svg';
+            }
+
             //设置生成的图片上的各种属性
             document.getElementById('name').innerText = document.getElementById('configName').value;
             document.getElementById('text').innerText = document.getElementById('configText').value;
@@ -996,13 +1059,13 @@
             var iconSignal = [4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 2, 2, 2, 1, 1, 0];
             var iconBattery = [20, 30, 50, 60, 80, 90, 'full'];
             if (document.getElementById('configTopBarStatusIcons').checked) {
-                document.getElementById('topBarIconWifi').src = 'mdicons/ic_signal_wifi_' + iconWifi[Math.floor(Math.random() * iconWifi.length)] + '_bar_48px.svg';
-                document.getElementById('topBarIconSignal').src = 'mdicons/ic_signal_cellular_' + iconWifi[Math.floor(Math.random() * iconSignal.length)] + '_bar_48px.svg';
-                document.getElementById('topBarIconBattery').src = 'mdicons/ic_battery_' + ((Math.random() > 0.75) ? 'charging_' : '') + iconBattery[Math.floor(Math.random() * iconBattery.length)] + '_48px.svg';
+                document.getElementById('topBarIconWifi').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_signal_wifi_' + iconWifi[Math.floor(Math.random() * iconWifi.length)] + '_bar_48px.svg';
+                document.getElementById('topBarIconSignal').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_signal_cellular_' + iconWifi[Math.floor(Math.random() * iconSignal.length)] + '_bar_48px.svg';
+                document.getElementById('topBarIconBattery').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_battery_' + ((Math.random() > 0.75) ? 'charging_' : '') + iconBattery[Math.floor(Math.random() * iconBattery.length)] + '_48px.svg';
             } else {
-                document.getElementById('topBarIconWifi').src = 'mdicons/ic_signal_wifi_4_bar_48px.svg';
-                document.getElementById('topBarIconSignal').src = 'mdicons/ic_signal_cellular_4_bar_48px.svg';
-                document.getElementById('topBarIconBattery').src = 'mdicons/ic_battery_full_48px.svg';
+                document.getElementById('topBarIconWifi').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_signal_wifi_4_bar_48px.svg';
+                document.getElementById('topBarIconSignal').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_signal_cellular_4_bar_48px.svg';
+                document.getElementById('topBarIconBattery').src = 'mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/ic_battery_full_48px.svg';
             }
             var iconApp = [['qq', .5], ['wechat', .5], ['cloudmusic', .25], ['coolapk', .15], ['tieba', .15], ['acfun', .15]];
             iconApp.sort(function () { return (Math.random() > .5) ? 1 : -1 });
@@ -1010,7 +1073,7 @@
             if (document.getElementById('configTopBarAppIcons').checked) {
                 for (var i = 0; i < iconApp.length; i++) {
                     if (Math.random() < iconApp[i][1]) {
-                        document.getElementById('topBarAppIcons').innerHTML += '<img class="topBarIcon" src="mdicons/app_' + iconApp[i][0] +'.svg">';
+                        document.getElementById('topBarAppIcons').innerHTML += '<img class="topBarIcon" src="mdicons/' + (useWhiteUI ? 'black_icons' : 'white_icons') + '/app_' + iconApp[i][0] +'.svg">';
                     }
                 }
             }
@@ -1052,16 +1115,15 @@
             if (document.getElementById('configShowComment').checked && commentList.length) {
                 document.getElementById('comment').style.display = 'block';
                 for (var i = 0; i < commentList.length; i++) {
-                    document.getElementById('commentList').innerHTML += [
-                        '<div class="commentItem">',
-                        '    <div class="commentAvatar squareImage" style="background-image: url(' + commentList[i].avatar + ');"></div>',
-                        '    <div class="content">',
-                        '        <span class="commentName">' + commentList[i].name + '</span>',
-                        '        <span class="commentTime">' + getTimeString(configScreenshotDate, commentList[i].date) + '</span>',
-                        '        <div class="commentText">' + emoticonReplace(commentList[i].content) + '</div>',
-                        '    </div>',
-                        '</div>'
-                    ].join('');
+                    document.getElementById('commentList').innerHTML += ''
+                      + '<div class="commentItem">'
+                      +     '<div class="commentAvatar squareImage" style="background-image: url(' + commentList[i].avatar + ');"></div>'
+                      +     '<div class="content">'
+                      +         '<span class="commentName">' + commentList[i].name + '</span>'
+                      +         '<span class="commentTime">' + getTimeString(configScreenshotDate, commentList[i].date) + '</span>'
+                      +         '<div class="commentText">' + emoticonReplace(commentList[i].content) + '</div>'
+                      +     '</div>'
+                      + '</div>';
                 }
             } else {
                 document.getElementById('comment').style.display = 'none';
@@ -1091,18 +1153,17 @@
             document.getElementById('generate').setAttribute('disabled', '');
             document.getElementById('generate').innerText = '生成中...';
 
-            var option = {
+            html2canvas(document.getElementById('fakeWechatMoment'), {
                 useCORS: true,
-                scale: 1
-            }
-            html2canvas(document.getElementById('fakeWechatMoment'), option).then(function (canvas) {
+                scale: 1,
+            }).then(function (canvas) {
                 var dURL = canvas.toDataURL();
                 document.getElementById('generated').src = dURL;
                 document.getElementById('save').setAttribute('href', dURL);
                 document.getElementById('save').setAttribute('download', (new Date()).getTime() + '.png');
                 (new mdui.Dialog(document.getElementById('generatedPopup'))).open();
 
-                //document.getElementById('fakeWechatMoment').style.display = 'none';
+                // document.getElementById('fakeWechatMoment').style.display = 'none';
                 document.getElementById('generate').removeAttribute('disabled');
                 document.getElementById('generate').innerText = '生成'
             });
@@ -1110,4 +1171,4 @@
     </script>
     <script src="fuckWechat.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/mdicons/app_acfun.svg b/mdicons/black_icons/app_acfun.svg
similarity index 96%
rename from mdicons/app_acfun.svg
rename to mdicons/black_icons/app_acfun.svg
index e3080b4..2321c0c 100644
--- a/mdicons/app_acfun.svg
+++ b/mdicons/black_icons/app_acfun.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1092px" height="1024px" viewBox="0 0 1092 1024" style="enable-background:new 0 0 1092 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M521,0L0,859.1L260.5,1024l54-185l413.4-31.2l107.3,204.8l256.7-153.6L521,0L521,0z M414.7,642.1l98.6-217.4
 	l111.1,217.4H414.7L414.7,642.1z"/>
diff --git a/mdicons/app_cloudmusic.svg b/mdicons/black_icons/app_cloudmusic.svg
similarity index 99%
rename from mdicons/app_cloudmusic.svg
rename to mdicons/black_icons/app_cloudmusic.svg
index 181df5a..a761bf2 100644
--- a/mdicons/app_cloudmusic.svg
+++ b/mdicons/black_icons/app_cloudmusic.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M604,105.2c22.1-6.4,45.8-6.1,68.1-0.9c25.6,6.1,49.9,17.9,70.8,33.9c7.6,5.8,14.5,13,18,22.1
 	c5.4,13.4,4,29.4-4,41.5c-7,10.8-18.8,18.4-31.6,20c-10.2,1.4-20.9-0.8-29.7-6.2c-5-2.9-8.7-7.4-13.7-10.3
diff --git a/mdicons/app_coolapk.svg b/mdicons/black_icons/app_coolapk.svg
similarity index 98%
rename from mdicons/app_coolapk.svg
rename to mdicons/black_icons/app_coolapk.svg
index 22e7693..e5d282f 100644
--- a/mdicons/app_coolapk.svg
+++ b/mdicons/black_icons/app_coolapk.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M127.9,426.7c29.9-67,94.5-116.7,166.4-130.3c55.8-9.6,113,5.1,161.9,31.9c41.5,21.2,78.2,50.6,111.7,82.8
 	c-16.2,18.4-39.1,28.9-57.5,44.7c-46.1-38.9-96.6-77.7-158-87.1c-78.9-13.2-158.6,49.2-170.5,127.1c-8.7,45.9,10.1,94.7,45.2,124.9
diff --git a/mdicons/app_qq.svg b/mdicons/black_icons/app_qq.svg
similarity index 97%
rename from mdicons/app_qq.svg
rename to mdicons/black_icons/app_qq.svg
index 1501e48..2d742d4 100644
--- a/mdicons/app_qq.svg
+++ b/mdicons/black_icons/app_qq.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M933.4,643.9c-18.8-108.9-97.7-180.3-97.7-180.3c11.3-98.9-30.1-116.5-30.1-116.5C797,41,533.4,46.4,527.8,46.5
 	C522.3,46.4,258.6,41,250,347.1c0,0-41.3,17.5-30.1,116.5c0,0-78.9,71.4-97.7,180.3c0,0-10,184.1,90.2,22.5
diff --git a/mdicons/app_tieba.svg b/mdicons/black_icons/app_tieba.svg
similarity index 98%
rename from mdicons/app_tieba.svg
rename to mdicons/black_icons/app_tieba.svg
index 3e9a7bf..3c16ac6 100644
--- a/mdicons/app_tieba.svg
+++ b/mdicons/black_icons/app_tieba.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M613.4,570.2v164c0,9.4,7.6,17.1,17,17.1c0,0,0,0,0,0h105c9.4,0,17.1-7.6,17.1-17.1v-164
 	c0-9.4-7.6-17.1-17.1-17.1h-105C621,553.1,613.4,560.8,613.4,570.2C613.4,570.2,613.4,570.2,613.4,570.2z M862.7,0.1H161.2
diff --git a/mdicons/app_wechat.svg b/mdicons/black_icons/app_wechat.svg
similarity index 98%
rename from mdicons/app_wechat.svg
rename to mdicons/black_icons/app_wechat.svg
index c9922d9..8248318 100644
--- a/mdicons/app_wechat.svg
+++ b/mdicons/black_icons/app_wechat.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#626262;}
 </style>
 <path class="st0" d="M1024,636c0-141.9-141.9-257.4-301.5-257.4c-169.1,0-301.9,115.5-301.9,257.4c0,142.3,132.8,257.4,301.9,257.4
 	c35.4,0,71.1-9,106.5-17.6l97.5,53.4l-26.7-88.8C970.9,787,1024,715.8,1024,636z M624.6,591.6c-17.6,0-35.3-17.7-35.3-35.4
diff --git a/back.svg b/mdicons/black_icons/back.svg
similarity index 95%
rename from back.svg
rename to mdicons/black_icons/back.svg
index f03ad47..15860bc 100644
--- a/back.svg
+++ b/mdicons/black_icons/back.svg
@@ -1,15 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="27.329px" height="47.65px" viewBox="0 0 27.329 47.65" style="enable-background:new 0 0 27.329 47.65;"
-	 xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	
-		<rect x="11.22" y="-3.215" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 13.6647 32.9895)" class="st0" width="4.89" height="33.759"/>
-	
-		<rect x="11.22" y="17.105" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.0287 19.6164)" class="st0" width="4.89" height="33.759"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="27.329px" height="47.65px" viewBox="0 0 27.329 47.65" style="enable-background:new 0 0 27.329 47.65;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000;}
+</style>
+<g>
+	
+		<rect x="11.22" y="-3.215" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 13.6647 32.9895)" class="st0" width="4.89" height="33.759"/>
+	
+		<rect x="11.22" y="17.105" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.0287 19.6164)" class="st0" width="4.89" height="33.759"/>
+</g>
+</svg>
diff --git a/mdicons/black_icons/comment.svg b/mdicons/black_icons/comment.svg
new file mode 100644
index 0000000..7b31053
--- /dev/null
+++ b/mdicons/black_icons/comment.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60px" height="42px" viewBox="0 0 60 42" style="enable-background:new 0 0 60 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F7F7F7;}
+	.st2{fill:#5B6A91;}
+</style>
+<path class="st1" d="M51,42H9.1c-5,0-9.1-4.1-9.1-9.1V9.1C0,4.1,4.1,0,9.1,0H51C56,0,60,4.1,60,9.1v23.9C60,37.9,56,42,51,42z"/>
+<circle class="st2" cx="38.1" cy="21" r="4.1"/>
+<circle class="st2" cx="21.5" cy="21" r="4.1"/>
+</svg>
diff --git a/mdicons/black_icons/emoticon.svg b/mdicons/black_icons/emoticon.svg
new file mode 100644
index 0000000..3617a5f
--- /dev/null
+++ b/mdicons/black_icons/emoticon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="89.9px" height="89.9px" viewBox="0 0 89.9 89.9" style="enable-background:new 0 0 89.9 89.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:4;}
+</style>
+<ellipse class="st0" cx="45" cy="45.5" rx="43" ry="43.5"/>
+<ellipse cx="30" cy="36" rx="4.9" ry="6.2"/>
+<ellipse cx="60" cy="36" rx="4.9" ry="6.2"/>
+<path class="st0" d="M45,73.3c-14,0-25.4-9.8-25.4-21.8h50.7C70.3,63.5,59,73.3,45,73.3z"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_20_48px.svg b/mdicons/black_icons/ic_battery_20_48px.svg
new file mode 100644
index 0000000..3edecac
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_20_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M14 34v7.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V34H14z" fill="#626262"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V34h20V10.67z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_30_48px.svg b/mdicons/black_icons/ic_battery_30_48px.svg
new file mode 100644
index 0000000..e3e351d
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_30_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V30h20V10.67z" fill="#626262"/>
+    <path d="M14 30v11.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V30H14z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_50_48px.svg b/mdicons/black_icons/ic_battery_50_48px.svg
new file mode 100644
index 0000000..086c52e
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_50_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V26h20V10.67z" fill="#626262"/>
+    <path d="M14 26v15.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V26H14z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_60_48px.svg b/mdicons/black_icons/ic_battery_60_48px.svg
new file mode 100644
index 0000000..4ca682d
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_60_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V22h20V10.67z" fill="#626262"/>
+    <path d="M14 22v19.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V22H14z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_80_48px.svg b/mdicons/black_icons/ic_battery_80_48px.svg
new file mode 100644
index 0000000..139074b
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_80_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V18h20v-7.33z" fill="#626262"/>
+    <path d="M14 18v23.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V18H14z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_90_48px.svg b/mdicons/black_icons/ic_battery_90_48px.svg
new file mode 100644
index 0000000..e1ba800
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_90_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill-opacity=".3" d="M34 10.67C34 9.19 32.81 8 31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V16h20v-5.33z" fill="#626262"/>
+    <path d="M14 16v25.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V16H14z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_20_48px.svg b/mdicons/black_icons/ic_battery_charging_20_48px.svg
new file mode 100644
index 0000000..82c16ec
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_20_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M22 40v-6h-8v7.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V34h-8.8L22 40z" fill="#626262"/>
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V34h8v-5h-4l8-15v11h4l-4.8 9H34V10.67C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_30_48px.svg b/mdicons/black_icons/ic_battery_charging_30_48px.svg
new file mode 100644
index 0000000..6beafd1
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_30_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V29h4l8-15v11h4l-2.13 4H34V10.67C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+    <path d="M22 40V29h-8v12.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V29h-6.13L22 40z" fill="#626262"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_50_48px.svg b/mdicons/black_icons/ic_battery_charging_50_48px.svg
new file mode 100644
index 0000000..8630ae1
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_50_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0zm18 29h4v11l6.93-13h-9.86zm8-4V14l-5.87 11-1.06 2h9.86L30 25z" fill="none"/>
+    <path d="M28.93 27L22 40V29h-4l1.07-2H14v14.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V27h-5.08z" fill="#626262"/>
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V27h5.07L26 14v11h4l-1.07 2H34V10.67C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_60_48px.svg b/mdicons/black_icons/ic_battery_charging_60_48px.svg
new file mode 100644
index 0000000..ac35313
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_60_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V22h7.73L26 14v8h8V10.67C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+    <path d="M26 25h4l-8 15V29h-4l3.73-7H14v19.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V22h-8v3z" fill="#626262"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_80_48px.svg b/mdicons/black_icons/ic_battery_charging_80_48px.svg
new file mode 100644
index 0000000..d899f3f
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_80_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V18h9.87L26 14v4h8v-7.33C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+    <path d="M26 25h4l-8 15V29h-4l5.87-11H14v23.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V18h-8v7z" fill="#626262"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_90_48px.svg b/mdicons/black_icons/ic_battery_charging_90_48px.svg
new file mode 100644
index 0000000..6462725
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_90_48px.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path fill-opacity=".3" d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67V16h10.93L26 14v2h8v-5.33C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+    <path d="M26 25h4l-8 15V29h-4l6.93-13H14v25.33C14 42.8 15.19 44 16.67 44h14.67c1.47 0 2.67-1.19 2.67-2.67V16h-8v9z" fill="#626262"/>
+    <path d="M0 0h48v48H0z" fill="none"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_charging_full_48px.svg b/mdicons/black_icons/ic_battery_charging_full_48px.svg
new file mode 100644
index 0000000..2c34cbc
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_charging_full_48px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67v30.67c0 1.47 1.19 2.67 2.67 2.67h14.67c1.47 0 2.67-1.19 2.67-2.67V10.67C34 9.19 32.81 8 31.33 8zM22 40V29h-4l8-15v11h4l-8 15z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_battery_full_48px.svg b/mdicons/black_icons/ic_battery_full_48px.svg
new file mode 100644
index 0000000..aef7079
--- /dev/null
+++ b/mdicons/black_icons/ic_battery_full_48px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M31.33 8H28V4h-8v4h-3.33C15.19 8 14 9.19 14 10.67v30.67c0 1.47 1.19 2.67 2.67 2.67h14.67c1.47 0 2.67-1.19 2.67-2.67V10.67C34 9.19 32.81 8 31.33 8z" fill="#626262"/>
+</svg>
diff --git a/mdicons/black_icons/ic_signal_cellular_0_bar_48px.svg b/mdicons/black_icons/ic_signal_cellular_0_bar_48px.svg
new file mode 100644
index 0000000..387ade8
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_cellular_0_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M4 44h40V4z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_cellular_1_bar_48px.svg b/mdicons/black_icons/ic_signal_cellular_1_bar_48px.svg
new file mode 100644
index 0000000..d5203d5
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_cellular_1_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M4 44h40V4z" fill="#626262"/><path d="M24 24L4 44h20z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_cellular_2_bar_48px.svg b/mdicons/black_icons/ic_signal_cellular_2_bar_48px.svg
new file mode 100644
index 0000000..52ce507
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_cellular_2_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M4 44h40V4z" fill="#626262"/><path d="M28 20L4 44h24z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_cellular_3_bar_48px.svg b/mdicons/black_icons/ic_signal_cellular_3_bar_48px.svg
new file mode 100644
index 0000000..36a3808
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_cellular_3_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M4 44h40V4z" fill="#626262"/><path d="M34 14L4 44h30z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_cellular_4_bar_48px.svg b/mdicons/black_icons/ic_signal_cellular_4_bar_48px.svg
new file mode 100644
index 0000000..3595dee
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_cellular_4_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M4 44h40V4z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_wifi_0_bar_48px.svg b/mdicons/black_icons/ic_signal_wifi_0_bar_48px.svg
new file mode 100644
index 0000000..0d7856b
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_wifi_0_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8C10.57 6 1.62 13.32.72 14l23.26 28.98.02.02.02-.02z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_wifi_1_bar_48px.svg b/mdicons/black_icons/ic_signal_wifi_1_bar_48px.svg
new file mode 100644
index 0000000..d697feb
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_wifi_1_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8S1.62 13.32.72 14l23.26 28.98.02.02.02-.02z" fill="#626262"/><path d="M13.34 29.72l10.65 13.27.01.01.01-.01 10.65-13.27C34.13 29.31 30.06 26 24 26s-10.13 3.31-10.66 3.72z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_wifi_2_bar_48px.svg b/mdicons/black_icons/ic_signal_wifi_2_bar_48px.svg
new file mode 100644
index 0000000..02e8f60
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_wifi_2_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8S1.62 13.32.72 14l23.26 28.98.02.02.02-.02z" fill="#626262"/><path d="M9.58 25.03l14.41 17.95.01.02.01-.02 14.41-17.95C37.7 24.47 32.2 20 24 20s-13.7 4.47-14.42 5.03z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_wifi_3_bar_48px.svg b/mdicons/black_icons/ic_signal_wifi_3_bar_48px.svg
new file mode 100644
index 0000000..e2b90d3
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_wifi_3_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill-opacity=".3" d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8S1.62 13.32.72 14l23.26 28.98.02.02.02-.02z" fill="#626262"/><path d="M7.07 21.91l16.92 21.07.01.02.02-.02 16.92-21.07C40.08 21.25 33.62 16 24 16c-9.63 0-16.08 5.25-16.93 5.91z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/black_icons/ic_signal_wifi_4_bar_48px.svg b/mdicons/black_icons/ic_signal_wifi_4_bar_48px.svg
new file mode 100644
index 0000000..e4969b6
--- /dev/null
+++ b/mdicons/black_icons/ic_signal_wifi_4_bar_48px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8S1.62 13.32.72 14l23.26 28.98.02.02.02-.02z" fill="#626262"/></svg>
\ No newline at end of file
diff --git a/mdicons/white_icons/app_acfun.svg b/mdicons/white_icons/app_acfun.svg
new file mode 100644
index 0000000..d5ffe38
--- /dev/null
+++ b/mdicons/white_icons/app_acfun.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1092px" height="1024px" viewBox="0 0 1092 1024" style="enable-background:new 0 0 1092 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M521,0L0,859.1L260.5,1024l54-185l413.4-31.2l107.3,204.8l256.7-153.6L521,0L521,0z M414.7,642.1l98.6-217.4
+	l111.1,217.4H414.7L414.7,642.1z"/>
+</svg>
diff --git a/mdicons/white_icons/app_cloudmusic.svg b/mdicons/white_icons/app_cloudmusic.svg
new file mode 100644
index 0000000..a3e25c3
--- /dev/null
+++ b/mdicons/white_icons/app_cloudmusic.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M604,105.2c22.1-6.4,45.8-6.1,68.1-0.9c25.6,6.1,49.9,17.9,70.8,33.9c7.6,5.8,14.5,13,18,22.1
+	c5.4,13.4,4,29.4-4,41.5c-7,10.8-18.8,18.4-31.6,20c-10.2,1.4-20.9-0.8-29.7-6.2c-5-2.9-8.7-7.4-13.7-10.3
+	c-13.3-8.5-28.7-15.1-44.7-14.7c-11.3,0.1-21.2,6.8-28.9,14.5c-7.2,7.4-10.8,18.3-8.5,28.5c5.5,20.7,11,41.5,16.5,62.2
+	c39.5,2,79.1,12.5,113,33.1c33,20.4,62.9,46.4,86.6,77.3c20.1,26.2,35.3,56.1,44.6,87.7c10.1,34.1,13.4,70.1,10.7,105.5
+	c-2.2,29.2-7.9,58.3-17.9,85.9c-25.7,67.3-73.2,126.3-134.3,164.5c-44.8,28.3-96.4,45.4-148.9,51.9c-36.3,4.5-73.2,4.5-109.3-1.6
+	c-74.1-12.3-143.6-49.2-196.4-102.6c-52.4-52.5-88.9-120.6-103.6-193.3c-10.9-53-10.4-108.4,1.7-161.1
+	c14.8-65.1,47.4-125.9,93.2-174.4c37.4-39.8,83.5-71.3,134.2-91.6c5.2-2,10.4-4.4,15.9-5.2c11.9-2.1,24.5,0.7,34.3,7.9
+	c13.2,9.3,20.4,26.1,18.2,42.1c-1.8,16.3-13.4,30.9-28.8,36.5c-51.2,19.1-96.6,53.3-129.3,97.1c-29.2,38.9-48.3,85.3-54.7,133.5
+	c-6.4,47.7-0.7,97,16.4,142c24.7,65.8,73.8,122.4,136.4,154.6c37.7,19.5,80.1,29.7,122.6,29.4c34.9-0.5,70-6.1,102.8-18.2
+	c28.9-10.7,55.9-26.5,78.9-47.1c21.4-19,39.3-42,52.9-67.2c6.8-12.8,13.1-26.1,17-40.2c11.4-40.2,13.3-83.8,1.2-124.1
+	c-10-33.8-30.7-63.9-57.1-87c-11.7-10.2-24.2-19.6-37.5-27.5c-11.8-6.6-24.7-11.2-37.9-14.3c9.2,35.9,19,71.6,28.3,107.5
+	c1.6,8.6,3.2,17.2,4.6,25.8c1.4,37-11.6,74.3-35.5,102.6c-22.2,26.7-53.8,45.5-88,51.9c-36.8,7.3-76.4,0.4-108-20
+	c-30.2-19.1-52.5-49.5-64.3-83c-6.7-18.8-10-38.6-10.6-58.5c-2-43.3,9.3-87.4,34-123.2c29.1-42.7,74.9-72,124-86.4
+	c-3.6-13.8-7.3-27.7-11-41.5c-9.5-29.9-7.5-63.4,6.7-91.5c7.6-15.7,19-29.3,32.1-40.7C568.3,120.2,585.3,110.3,604,105.2
+	 M486.6,430.6c-13.2,13.8-22.4,31.3-26.4,50c-3.6,17-3.6,34.6-0.4,51.6c3.9,18.8,13.6,37.2,29.7,48.3c12.5,8.9,28.7,11.5,43.6,8.6
+	c27.5-4.8,50-30.2,50.8-58.2c-1-7-2.2-13.9-4.2-20.7c-10.3-38.9-20.7-77.8-30.9-116.8C525.6,400.7,503.5,412.8,486.6,430.6
+	L486.6,430.6z"/>
+</svg>
diff --git a/mdicons/white_icons/app_coolapk.svg b/mdicons/white_icons/app_coolapk.svg
new file mode 100644
index 0000000..95f0d39
--- /dev/null
+++ b/mdicons/white_icons/app_coolapk.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M127.9,426.7c29.9-67,94.5-116.7,166.4-130.3c55.8-9.6,113,5.1,161.9,31.9c41.5,21.2,78.2,50.6,111.7,82.8
+	c-16.2,18.4-39.1,28.9-57.5,44.7c-46.1-38.9-96.6-77.7-158-87.1c-78.9-13.2-158.6,49.2-170.5,127.1c-8.7,45.9,10.1,94.7,45.2,124.9
+	c39.7,35,97.2,44.6,147.6,31.3c57.6-13.9,102-57.1,136.9-102.8c54.1-72.1,99.2-150.4,147.8-226.1c13.9-19.1,47.4-17.2,58.7,3.8
+	c63.6,109,126.1,218.7,189.6,327.8c7.6,15.1,4.4,35.8-9.6,46.1c-13.1,10.6-33.3,10.2-46.1-0.7C776.6,646,701.2,591.8,625.9,537.4
+	c18.9-15,38.4-29.3,58-43.5c23.7,12.9,43.8,33.2,69.6,41.7c-20.4-39.6-43.6-77.7-66.3-115.9c-42.7,59.1-77.1,124.2-123.1,181.1
+	C516,663.5,448.8,717,368.6,728.5c-38.9,3.4-79.3,4.2-116.4-10c-53.5-19.1-100.3-58.7-124.6-110.6
+	C99.5,551.8,100.9,482.9,127.9,426.7L127.9,426.7z"/>
+</svg>
diff --git a/mdicons/white_icons/app_qq.svg b/mdicons/white_icons/app_qq.svg
new file mode 100644
index 0000000..0901056
--- /dev/null
+++ b/mdicons/white_icons/app_qq.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M933.4,643.9c-18.8-108.9-97.7-180.3-97.7-180.3c11.3-98.9-30.1-116.5-30.1-116.5C797,41,533.4,46.4,527.8,46.5
+	C522.3,46.4,258.6,41,250,347.1c0,0-41.3,17.5-30.1,116.5c0,0-78.9,71.4-97.7,180.3c0,0-10,184.1,90.2,22.5
+	c0,0,22.5,61.3,63.9,116.5c0,0-73.9,25.1-67.6,90.2c0,0-2.5,72.6,157.8,67.6c0,0,112.7-8.8,146.5-56.4h14.8h0.3h14.8
+	c33.8,47.6,146.5,56.4,146.5,56.4C849.5,945.6,847,873,847,873c6.2-65.1-67.6-90.2-67.6-90.2c41.3-55.1,63.9-116.5,63.9-116.5
+	C943.4,827.9,933.4,643.9,933.4,643.9L933.4,643.9z"/>
+</svg>
diff --git a/mdicons/white_icons/app_tieba.svg b/mdicons/white_icons/app_tieba.svg
new file mode 100644
index 0000000..f9e093c
--- /dev/null
+++ b/mdicons/white_icons/app_tieba.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M613.4,570.2v164c0,9.4,7.6,17.1,17,17.1c0,0,0,0,0,0h105c9.4,0,17.1-7.6,17.1-17.1v-164
+	c0-9.4-7.6-17.1-17.1-17.1h-105C621,553.1,613.4,560.8,613.4,570.2C613.4,570.2,613.4,570.2,613.4,570.2z M862.7,0.1H161.2
+	C72.1,0.1,0,72.3,0,161.3v701.6c0,89,72.1,161.2,161.2,161.2h701.6c89,0,161.2-72.1,161.2-161.2V161.3
+	C1023.9,72.3,951.8,0.1,862.7,0.1z M180.8,281.7v-59c0-9.4,7.6-17,17.1-17.1h292.5c9.4,0,17.1,7.6,17.1,17.1v417.7
+	c0,9.4-7.6,17.1-17.1,17.1h-41.9c-9.4,0-17.1-7.7-17.1-17.1V281.7H256.9v358.7c0,9.4-7.6,17.1-17.1,17.1h-41.9
+	c-9.4,0-17.1-7.7-17.1-17.1V281.7z M510,798.4c0,9.4-7.6,17.1-17.1,17.1c-60.9,0-114.8-29.2-148.9-74.2
+	c-34.2,45-88.1,74.2-148.9,74.2c-9.4,0-17.1-7.6-17.1-17.1v-42.1c0-9.4,7.6-17.1,17.1-17.1c0,0,0,0,0,0v-0.2
+	c61.1,0,110.6-49.5,110.6-110.6h0.4v-296c0-9.4,7.6-17,17-17.1h41.9c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0v296h0.1
+	c0,61.1,49.5,110.6,110.6,110.6v0.2c9.4,0,17.1,7.6,17.1,17.1c0,0,0,0,0,0L510,798.4L510,798.4z M845.8,309.3c0,9.4-7.6,17-17,17.1
+	c0,0,0,0-0.1,0H655.3v150.7h156.4c9.4,0,17.1,7.6,17.1,17.1c0,0,0,0,0,0v59h-0.3v198.1h0.3v59c0,9.4-7.6,17.1-17,17.1c0,0,0,0,0,0
+	H554.4c-9.4,0-17.1-7.6-17.1-17.1c0,0,0,0,0,0V494.2c0-9.4,7.6-17.1,17.1-17.1h24.9V213.8c0-9.4,7.6-17.1,17-17.1c0,0,0,0,0,0h41.9
+	c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0v36.5h173.5c9.4,0,17.1,7.6,17.1,17c0,0,0,0,0,0V309.3L845.8,309.3z"/>
+</svg>
diff --git a/mdicons/white_icons/app_wechat.svg b/mdicons/white_icons/app_wechat.svg
new file mode 100644
index 0000000..87bf233
--- /dev/null
+++ b/mdicons/white_icons/app_wechat.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1024px" height="1024px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<path class="st0" d="M1024,636c0-141.9-141.9-257.4-301.5-257.4c-169.1,0-301.9,115.5-301.9,257.4c0,142.3,132.8,257.4,301.9,257.4
+	c35.4,0,71.1-9,106.5-17.6l97.5,53.4l-26.7-88.8C970.9,787,1024,715.8,1024,636z M624.6,591.6c-17.6,0-35.3-17.7-35.3-35.4
+	c0-17.6,17.7-35.3,35.3-35.3c26.8,0,44.5,17.7,44.5,35.3C669.1,574,651.4,591.6,624.6,591.6z M820,591.6
+	c-17.7,0-35.3-17.7-35.3-35.4c0-17.6,17.6-35.3,35.3-35.3c26.7,0,44.4,17.7,44.4,35.3C864.4,574,846.3,591.6,820,591.6z
+	 M693.2,347.2c11.6,0,23.3,0.8,34.9,2C696.9,203.1,540.8,94.8,362.5,94.8C163.4,94.8,0,230.4,0,403c0,99.6,54.2,181.4,144.9,244.9
+	L108.8,757l126.8-63.8c45.4,8.8,81.9,18.1,126.8,18.1c11.2,0,22.5-0.4,33.7-1.6C389,685.6,385,660,385,633.9
+	C385,475.7,521.1,347.2,693.2,347.2z M498.1,248.9c27.3,0,45.3,18.1,45.3,45.4c0,27.3-18.1,45.3-45.3,45.3
+	c-27.3,0-54.6-18.1-54.6-45.3C444,266.9,471.2,248.9,498.1,248.9z M244.5,339.6c-27.3,0-54.6-18-54.6-45.3
+	c0-27.3,27.3-45.4,54.6-45.4c27.3,0,45.4,18.1,45.4,45.4C289.8,321.1,271.8,339.6,244.5,339.6z"/>
+</svg>
diff --git a/mdicons/white_icons/back.svg b/mdicons/white_icons/back.svg
new file mode 100644
index 0000000..d71affc
--- /dev/null
+++ b/mdicons/white_icons/back.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="27.329px" height="47.65px" viewBox="0 0 27.329 47.65" style="enable-background:new 0 0 27.329 47.65;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+</style>
+<g>
+	
+		<rect x="11.22" y="-3.215" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 13.6647 32.9895)" class="st0" width="4.89" height="33.759"/>
+	
+		<rect x="11.22" y="17.105" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.0287 19.6164)" class="st0" width="4.89" height="33.759"/>
+</g>
+</svg>
diff --git a/comment.svg b/mdicons/white_icons/comment.svg
similarity index 98%
rename from comment.svg
rename to mdicons/white_icons/comment.svg
index bca86b9..25c339c 100644
--- a/comment.svg
+++ b/mdicons/white_icons/comment.svg
@@ -1,13 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="60.008px" height="42px" viewBox="0 0 60.008 42" style="enable-background:new 0 0 60.008 42;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#8593B0;}
-	.st1{fill:#FFFFFF;}
-</style>
-<rect x="11.008" class="st0" width="49" height="42"/>
-<polygon class="st0" points="0,21 11.812,29.142 11.812,12.858 "/>
-<circle class="st1" cx="24.32" cy="21" r="5.484"/>
-<circle class="st1" cx="46.695" cy="21" r="5.484"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="60.008px" height="42px" viewBox="0 0 60.008 42" style="enable-background:new 0 0 60.008 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8593B0;}
+	.st1{fill:#FFFFFF;}
+</style>
+<rect x="11.008" class="st0" width="49" height="42"/>
+<polygon class="st0" points="0,21 11.812,29.142 11.812,12.858 "/>
+<circle class="st1" cx="24.32" cy="21" r="5.484"/>
+<circle class="st1" cx="46.695" cy="21" r="5.484"/>
+</svg>
diff --git a/emoticon.svg b/mdicons/white_icons/emoticon.svg
similarity index 98%
rename from emoticon.svg
rename to mdicons/white_icons/emoticon.svg
index 750e7d0..f58f77c 100644
--- a/emoticon.svg
+++ b/mdicons/white_icons/emoticon.svg
@@ -1,14 +1,14 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="87.937px" height="87.937px" viewBox="0 0 87.937 87.937" style="enable-background:new 0 0 87.937 87.937;"
-	 xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#6f7378;stroke-width:2;}
-	.st1{fill:#6f7378;}
-</style>
-<circle class="st0" cx="43.968" cy="43.968" r="42.968"/>
-<ellipse class="st1" cx="28.968" cy="33.996" rx="4.875" ry="6.188"/>
-<ellipse class="st1" cx="58.968" cy="33.996" rx="4.875" ry="6.188"/>
-<path class="st1" d="M43.968,71.308c-14.009,0-25.366-9.78-25.366-21.844h50.731C69.334,61.529,57.977,71.308,43.968,71.308z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="87.937px" height="87.937px" viewBox="0 0 87.937 87.937" style="enable-background:new 0 0 87.937 87.937;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#6f7378;stroke-width:2;}
+	.st1{fill:#6f7378;}
+</style>
+<circle class="st0" cx="43.968" cy="43.968" r="42.968"/>
+<ellipse class="st1" cx="28.968" cy="33.996" rx="4.875" ry="6.188"/>
+<ellipse class="st1" cx="58.968" cy="33.996" rx="4.875" ry="6.188"/>
+<path class="st1" d="M43.968,71.308c-14.009,0-25.366-9.78-25.366-21.844h50.731C69.334,61.529,57.977,71.308,43.968,71.308z"/>
+</svg>
diff --git a/mdicons/ic_battery_20_48px.svg b/mdicons/white_icons/ic_battery_20_48px.svg
similarity index 100%
rename from mdicons/ic_battery_20_48px.svg
rename to mdicons/white_icons/ic_battery_20_48px.svg
diff --git a/mdicons/ic_battery_30_48px.svg b/mdicons/white_icons/ic_battery_30_48px.svg
similarity index 100%
rename from mdicons/ic_battery_30_48px.svg
rename to mdicons/white_icons/ic_battery_30_48px.svg
diff --git a/mdicons/ic_battery_50_48px.svg b/mdicons/white_icons/ic_battery_50_48px.svg
similarity index 100%
rename from mdicons/ic_battery_50_48px.svg
rename to mdicons/white_icons/ic_battery_50_48px.svg
diff --git a/mdicons/ic_battery_60_48px.svg b/mdicons/white_icons/ic_battery_60_48px.svg
similarity index 100%
rename from mdicons/ic_battery_60_48px.svg
rename to mdicons/white_icons/ic_battery_60_48px.svg
diff --git a/mdicons/ic_battery_80_48px.svg b/mdicons/white_icons/ic_battery_80_48px.svg
similarity index 100%
rename from mdicons/ic_battery_80_48px.svg
rename to mdicons/white_icons/ic_battery_80_48px.svg
diff --git a/mdicons/ic_battery_90_48px.svg b/mdicons/white_icons/ic_battery_90_48px.svg
similarity index 100%
rename from mdicons/ic_battery_90_48px.svg
rename to mdicons/white_icons/ic_battery_90_48px.svg
diff --git a/mdicons/ic_battery_charging_20_48px.svg b/mdicons/white_icons/ic_battery_charging_20_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_20_48px.svg
rename to mdicons/white_icons/ic_battery_charging_20_48px.svg
diff --git a/mdicons/ic_battery_charging_30_48px.svg b/mdicons/white_icons/ic_battery_charging_30_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_30_48px.svg
rename to mdicons/white_icons/ic_battery_charging_30_48px.svg
diff --git a/mdicons/ic_battery_charging_50_48px.svg b/mdicons/white_icons/ic_battery_charging_50_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_50_48px.svg
rename to mdicons/white_icons/ic_battery_charging_50_48px.svg
diff --git a/mdicons/ic_battery_charging_60_48px.svg b/mdicons/white_icons/ic_battery_charging_60_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_60_48px.svg
rename to mdicons/white_icons/ic_battery_charging_60_48px.svg
diff --git a/mdicons/ic_battery_charging_80_48px.svg b/mdicons/white_icons/ic_battery_charging_80_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_80_48px.svg
rename to mdicons/white_icons/ic_battery_charging_80_48px.svg
diff --git a/mdicons/ic_battery_charging_90_48px.svg b/mdicons/white_icons/ic_battery_charging_90_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_90_48px.svg
rename to mdicons/white_icons/ic_battery_charging_90_48px.svg
diff --git a/mdicons/ic_battery_charging_full_48px.svg b/mdicons/white_icons/ic_battery_charging_full_48px.svg
similarity index 100%
rename from mdicons/ic_battery_charging_full_48px.svg
rename to mdicons/white_icons/ic_battery_charging_full_48px.svg
diff --git a/mdicons/ic_battery_full_48px.svg b/mdicons/white_icons/ic_battery_full_48px.svg
similarity index 100%
rename from mdicons/ic_battery_full_48px.svg
rename to mdicons/white_icons/ic_battery_full_48px.svg
diff --git a/mdicons/ic_signal_cellular_0_bar_48px.svg b/mdicons/white_icons/ic_signal_cellular_0_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_cellular_0_bar_48px.svg
rename to mdicons/white_icons/ic_signal_cellular_0_bar_48px.svg
diff --git a/mdicons/ic_signal_cellular_1_bar_48px.svg b/mdicons/white_icons/ic_signal_cellular_1_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_cellular_1_bar_48px.svg
rename to mdicons/white_icons/ic_signal_cellular_1_bar_48px.svg
diff --git a/mdicons/ic_signal_cellular_2_bar_48px.svg b/mdicons/white_icons/ic_signal_cellular_2_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_cellular_2_bar_48px.svg
rename to mdicons/white_icons/ic_signal_cellular_2_bar_48px.svg
diff --git a/mdicons/ic_signal_cellular_3_bar_48px.svg b/mdicons/white_icons/ic_signal_cellular_3_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_cellular_3_bar_48px.svg
rename to mdicons/white_icons/ic_signal_cellular_3_bar_48px.svg
diff --git a/mdicons/ic_signal_cellular_4_bar_48px.svg b/mdicons/white_icons/ic_signal_cellular_4_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_cellular_4_bar_48px.svg
rename to mdicons/white_icons/ic_signal_cellular_4_bar_48px.svg
diff --git a/mdicons/ic_signal_wifi_0_bar_48px.svg b/mdicons/white_icons/ic_signal_wifi_0_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_wifi_0_bar_48px.svg
rename to mdicons/white_icons/ic_signal_wifi_0_bar_48px.svg
diff --git a/mdicons/ic_signal_wifi_1_bar_48px.svg b/mdicons/white_icons/ic_signal_wifi_1_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_wifi_1_bar_48px.svg
rename to mdicons/white_icons/ic_signal_wifi_1_bar_48px.svg
diff --git a/mdicons/ic_signal_wifi_2_bar_48px.svg b/mdicons/white_icons/ic_signal_wifi_2_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_wifi_2_bar_48px.svg
rename to mdicons/white_icons/ic_signal_wifi_2_bar_48px.svg
diff --git a/mdicons/ic_signal_wifi_3_bar_48px.svg b/mdicons/white_icons/ic_signal_wifi_3_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_wifi_3_bar_48px.svg
rename to mdicons/white_icons/ic_signal_wifi_3_bar_48px.svg
diff --git a/mdicons/ic_signal_wifi_4_bar_48px.svg b/mdicons/white_icons/ic_signal_wifi_4_bar_48px.svg
similarity index 100%
rename from mdicons/ic_signal_wifi_4_bar_48px.svg
rename to mdicons/white_icons/ic_signal_wifi_4_bar_48px.svg