├── Plugin.php
├── README.md
└── assets
    ├── css
        ├── admin.css
        └── login.css
    ├── img
        ├── logo.png
        └── user.png
    ├── index.php
    └── js
        └── admin.js


/Plugin.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
  3 | /**
  4 |  * WangStyle是一款即插即用的typecho后台美化插件
  5 |  * 
  6 |  * @package WangStyle
  7 |  * @author 小王先森
  8 |  * @version 6.3.0
  9 |  * @link https://xwsir.cn
 10 |  */
 11 | class WangStyle_Plugin implements Typecho_Plugin_Interface
 12 | {
 13 |     /**
 14 |      * 激活插件方法
 15 |      * 
 16 |      * @access public
 17 |      * @return void
 18 |      * @throws Typecho_Plugin_Exception
 19 |      */
 20 |     public static function activate()
 21 |     {
 22 |         Typecho_Plugin::factory('admin/header.php')->header = array('WangStyle_Plugin', 'render');
 23 |         //Typecho_Plugin::factory('admin/footer.php')->end = array('WangStyle_Plugin', 'footerjs');
 24 | 
 25 |         if (file_exists("admin/index.php")) {
 26 |             rename("admin/index.php", "admin/index.bak");
 27 |             copy("usr/plugins/WangStyle/assets/index.php", "admin/index.php");
 28 |         }
 29 |     }
 30 | 
 31 |     /**
 32 |      * 禁用插件方法
 33 |      * 
 34 |      * @static
 35 |      * @access public
 36 |      * @return void
 37 |      * @throws Typecho_Plugin_Exception
 38 |      */
 39 |     public static function deactivate()
 40 |     {
 41 |         if (file_exists("admin/index.bak")) {
 42 |             unlink("admin/index.php");
 43 |             rename("admin/index.bak", "admin/index.php");
 44 |         }
 45 |     }
 46 | 
 47 |     /**
 48 |      * 获取插件配置面板
 49 |      * 
 50 |      * @access public
 51 |      * @param Typecho_Widget_Helper_Form $form 配置面板
 52 |      * @return void
 53 |      */
 54 |     public static function config(Typecho_Widget_Helper_Form $form)
 55 |     {
 56 |     }
 57 | 
 58 |     /**
 59 |      * 个人用户的配置面板
 60 |      * 
 61 |      * @access public
 62 |      * @param Typecho_Widget_Helper_Form $form
 63 |      * @return void
 64 |      */
 65 |     public static function personalConfig(Typecho_Widget_Helper_Form $form)
 66 |     {
 67 |     }
 68 | 
 69 |     /**
 70 |      * 插件实现方法
 71 |      * 
 72 |      * @access public
 73 |      * @return void
 74 |      */
 75 |     public static function render($head)
 76 |     {
 77 |         $url = Helper::options()->pluginUrl . '/WangStyle/assets/';
 78 | 
 79 |         if (Typecho_Widget::widget('Widget_User')->hasLogin()) {
 80 |             //gravatar 头像源
 81 |             define('__TYPECHO_GRAVATAR_PREFIX__', '//' . 'gravatar.helingqi.com/wavatar' . '/');
 82 |             $user = Typecho_Widget::widget('Widget_User');
 83 |             $menu = Typecho_Widget::widget('Widget_Menu')->to($menu);
 84 |             $email = $user->mail;
 85 |             if ($email) {
 86 |                 $lowercase = strtolower($email);
 87 |                 $format = str_replace('@qq.com', '', $lowercase);
 88 |                 if (strstr($lowercase, "qq.com") && is_numeric($format) && strlen($format) < 11 && strlen($format) > 4) {
 89 |                     $qqImage = '//q1.qlogo.cn/g?b=qq&nk=' . $format . '&';
 90 |                 } else {
 91 |                     $decode = md5($lowercase);
 92 |                     $qqImage = '//' . 'gravatar.helingqi.com/wavatar' . '/' . $decode . '?';
 93 |                 }
 94 |             } else {
 95 |                 $qqImage = $url . 'img/user.png';
 96 |             }
 97 |             $head = $head . '<link rel="stylesheet" href="' . $url . 'css/admin.css?v=6.0.3">
 98 |                 <link rel="stylesheet" href="//at.alicdn.com/t/font_1159885_m16xrs3st3k.css">
 99 |                 <script src="' . $url . 'js/admin.js?v=6.0.3"></script>
100 |                 <script>
101 |                     var UserLink="' . Helper::options()->adminUrl . '/profile.php";
102 |                     var UserPic="' . $qqImage . '";
103 |                     var AdminLink="' . Helper::options()->adminUrl . '";
104 |                     var SiteLink="' . Helper::options()->siteUrl . '";
105 |                     var UserName="' . $user->screenName . '";
106 |                     var UserGroup="' . $user->group . '";
107 |                     var SiteName="' . Helper::options()->title . '";
108 |                     var MenuTitle="' . strip_tags($menu->title) . '";
109 |                 </script>';
110 |         } else {
111 |             $head = $head . '<link rel="stylesheet" href="' . $url . 'css/login.css">';
112 |         }
113 |         return $head;
114 |     }
115 | }
116 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | WangStyle 是一款极简的、支持暗色模式的 `typecho` 后台美化插件。
 2 | 
 3 | ### 插件特点
 4 | 
 5 | 1. 默认简白，支持暗色模式
 6 | 2. 不同级的用户登录显示不同的菜单
 7 | 3. 自动添加插件设置到菜单
 8 | 4. 即插即用、不修改程序文件
 9 | 5. 响应式布局，适配后台每一个页面
10 | 6. 后台登陆界面美化
11 | 7. 后台首页卡片样式
12 | 
13 | ### 注意事项
14 | 
15 | 1. 本插件只针对 `Typecho` 默认的程序美化。
16 | 2. 启用插件后，CTRL + F5 清除缓存。
17 | 3. 插件名为：WangStyle，注意区分大小写，否则500。
18 | 
19 | ### 默认界面
20 | ![20220307142249.png][1]
21 | 
22 | ### 登陆界面与暗色模式
23 | ![pc.gif][2]
24 | 
25 | ### 移动端
26 | ![mb.gif][3]
27 | 
28 | 
29 |   [1]: https://cdn.jsdelivr.net/gh/dinphy/webpic@main/xwsir/usr/uploads/2022/03/1463560908.png
30 |   [2]: https://cdn.jsdelivr.net/gh/dinphy/webpic@main/xwsir/usr/uploads/2022/03/1815896998.gif
31 |   [3]: https://cdn.jsdelivr.net/gh/dinphy/webpic@main/xwsir/usr/uploads/2022/03/2109832222.gif


--------------------------------------------------------------------------------
/assets/css/admin.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | html[dark-mode='dark-mode'] body,
  3 | html[dark-mode='dark-mode'] .wsbottom ul li a:hover,
  4 | html[dark-mode='dark-mode'] .category-option ul,
  5 | html[dark-mode='dark-mode'] .typecho-option-tabs li.current a,
  6 | html[dark-mode='dark-mode'] .typecho-option-tabs li.active a,
  7 | html[dark-mode='dark-mode'] .typecho-option-tabs li a:hover,
  8 | html[dark-mode='dark-mode'] .typecho-option-tabs li a:hover,
  9 | html[dark-mode='dark-mode'] .wmd-button-row li:hover,
 10 | html[dark-mode='dark-mode'] .typecho-page-main ul.tag-list,
 11 | html[dark-mode='dark-mode'] .typecho-pager li.current a,
 12 | html[dark-mode='dark-mode'] #typecho-welcome,
 13 | html[dark-mode='dark-mode'] #ui-datepicker-div,
 14 | html[dark-mode='dark-mode'] .primary:hover,
 15 | html[dark-mode='dark-mode'] .typecho-edit-theme .current,
 16 | html[dark-mode='dark-mode'] .typecho-post-area #slug,
 17 | html[dark-mode='dark-mode'] .j-setting-contain .j-aside,
 18 | html[dark-mode='dark-mode'] .typecho-list-table tbody tr.checked td,
 19 | html[dark-mode='dark-mode'] .joe_config__aside,
 20 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li .typecho-label {
 21 | 	background: #222;
 22 | 	color: #bbb;
 23 | 	box-shadow: none;
 24 | }
 25 | html[dark-mode='dark-mode'] .wrap .card,
 26 | html[dark-mode='dark-mode'] .typecho-page-main,
 27 | html[dark-mode='dark-mode'] .typecho-head-nav .operate,
 28 | html[dark-mode='dark-mode'] #typecho-nav-list,
 29 | html[dark-mode='dark-mode'] #custom-field,
 30 | html[dark-mode='dark-mode'] .typecho-table-wrap,
 31 | html[dark-mode='dark-mode'] .typecho-page-title h2 a,
 32 | html[dark-mode='dark-mode'] .typecho-page-main ul.tag-list li.checked,
 33 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-calendar a,
 34 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-current,
 35 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-close,
 36 | html[dark-mode='dark-mode'] .typecho-theme-list tbody tr.current td,
 37 | html[dark-mode='dark-mode'] .j-setting-contain .j-aside .j-setting-tab li:hover,
 38 | html[dark-mode='dark-mode'] .j-setting-contain .j-setting-notice,
 39 | html[dark-mode='dark-mode'] .j-setting-contain > form,
 40 | html[dark-mode='dark-mode'] .j-setting-contain > form .typecho-option,
 41 | html[dark-mode='dark-mode'] .j-setting-contain .j-setting-notice ol,
 42 | html[dark-mode='dark-mode'] .j-setting-contain .j-setting-notice ul,
 43 | html[dark-mode='dark-mode'] .user-info,
 44 | html[dark-mode='dark-mode'] .joe_config__notice,
 45 | html[dark-mode='dark-mode'] .joe_config > form,
 46 | html[dark-mode='dark-mode'] .joe_config__aside .tabs .item:hover,
 47 | html[dark-mode='dark-mode'] .joe_config > form .typecho-option {
 48 | 	background: #333;
 49 | 	color: #bbb;
 50 | 	box-shadow: none;
 51 | }
 52 | html[dark-mode='dark-mode'] a,
 53 | html[dark-mode='dark-mode'] .typecho-head-nav .operate a,
 54 | html[dark-mode='dark-mode'] #typecho-nav-list a {
 55 | 	color: #bbb;
 56 | }
 57 | html[dark-mode='dark-mode'] .wrap .shortcut a:hover,
 58 | html[dark-mode='dark-mode'] .menu-ul .focus a,
 59 | html[dark-mode='dark-mode'] #typecho-nav-list a:hover {
 60 | 	color: #fff !important;
 61 | }
 62 | html[dark-mode='dark-mode'] #wstyle .wsmain,
 63 | html[dark-mode='dark-mode'] .category-option ul,
 64 | html[dark-mode='dark-mode'] .typecho-option-tabs a,
 65 | html[dark-mode='dark-mode'] #ui-datepicker-div,
 66 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li,
 67 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li select,
 68 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li textarea,
 69 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li input[type='text'],
 70 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li,
 71 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li textarea,
 72 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li input[type='text'],
 73 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li select {
 74 | 	border: 1px solid #444;
 75 | }
 76 | html[dark-mode='dark-mode'] .success,
 77 | html[dark-mode='dark-mode'] .wrap .shortcut a i,
 78 | html[dark-mode='dark-mode'] .wrap .total .num,
 79 | html[dark-mode='dark-mode'] a.balloon-button,
 80 | html[dark-mode='dark-mode'] .wmd-edittab a.active,
 81 | html[dark-mode='dark-mode'] #wmd-preview,
 82 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-today a,
 83 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-today a:hover,
 84 | html[dark-mode='dark-mode'] .btn,
 85 | html[dark-mode='dark-mode'] .dropdown-menu a:hover,
 86 | html[dark-mode='dark-mode'] .typecho-list-table tr:hover td,
 87 | html[dark-mode='dark-mode'] .typecho-page-main ul.tag-list li:hover,
 88 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li .typecho-label,
 89 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li .description,
 90 | html[dark-mode='dark-mode'] .joe_config > form .joe_content li .description,
 91 | html[dark-mode='dark-mode'] .joe_config > form .typecho-option button {
 92 | 	background: #444;
 93 | 	color: #bbb;
 94 | }
 95 | html[dark-mode='dark-mode'] #custom-field td,
 96 | html[dark-mode='dark-mode'] #custom-field td:hover {
 97 | 	border-bottom: 1px solid #444;
 98 | 	background: #333;
 99 | }
100 | html[dark-mode='dark-mode'] .j-setting-contain > form .typecho-option,
101 | html[dark-mode='dark-mode'] .joe_config > form .typecho-option {
102 | 	border-top: 1px solid #444;
103 | }
104 | html[dark-mode='dark-mode'] ul.token-input-list input[type='text'] {
105 | 	border: none;
106 | }
107 | html[dark-mode='dark-mode'] input[type='text'],
108 | html[dark-mode='dark-mode'] textarea,
109 | html[dark-mode='dark-mode'] input[type='password'],
110 | html[dark-mode='dark-mode'] input[type='email'],
111 | html[dark-mode='dark-mode'] ul.token-input-list,
112 | html[dark-mode='dark-mode'] #upload-panel,
113 | html[dark-mode='dark-mode'] #custom-field select,
114 | html[dark-mode='dark-mode'] select,
115 | html[dark-mode='dark-mode'] .dropdown-menu {
116 | 	background: #222;
117 | 	border: 1px solid #444;
118 | 	color: #bbb;
119 | }
120 | html[dark-mode='dark-mode'] .typecho-list-table th {
121 | 	padding: 10px 10px 10px;
122 | 	border-bottom: 1px solid #666;
123 | }
124 | 
125 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-timepicker-div,
126 | html[dark-mode='dark-mode'] #ui-datepicker-div .ui-datepicker-buttonpane {
127 | 	border-top: 1px solid #666;
128 | }
129 | html[dark-mode='dark-mode'] .typecho-list-table td {
130 | 	border-bottom: none;
131 | 	border-top: 1px solid #666;
132 | }
133 | html[dark-mode='dark-mode'] .primary {
134 | 	background: #467b96;
135 | }
136 | html[dark-mode='dark-mode'] img {
137 | 	filter: brightness(0.8);
138 | }
139 | html[dark-mode='dark-mode'] .typecho-theme-list img {
140 | 	box-shadow: none;
141 | }
142 | html[dark-mode='dark-mode'] .j-setting-contain > form .j-setting-content li .typecho-label {
143 | 	border-left: 3px solid #666;
144 | }
145 | html[dark-mode='dark-mode'] .wrap .card .card-header,
146 | html[dark-mode='dark-mode'] .j-setting-contain .j-aside .logo,
147 | html[dark-mode='dark-mode'] .joe_config__aside .logo,
148 | html[dark-mode='dark-mode'] .joe_config__notice .title {
149 | 	border-bottom: 1px solid #666;
150 | 	color: #bbb;
151 | }
152 | ::selection {
153 | 	background: #c51f1f;
154 | 	color: #fff;
155 | }
156 | ::-moz-selection {
157 | 	background: #c51f1f;
158 | 	color: #fff;
159 | }
160 | ::-webkit-scrollbar {
161 | 	width: 5px;
162 | 	height: 5px;
163 | }
164 | ::-webkit-scrollbar-thumb {
165 | 	border-radius: 2px;
166 | 	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
167 | 	background: #ababab;
168 | }
169 | ::-webkit-scrollbar-track {
170 | 	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
171 | 	border-radius: 10px;
172 | 	background: #ededed;
173 | }
174 | a {
175 | 	transition: 0.5s all;
176 | 	-webkit-transition: 0.5s all;
177 | 	-moz-transition: 0.5s all;
178 | 	-o-transition: 0.5s all;
179 | 	-ms-transition: 0.5s all;
180 | }
181 | #custom-field {
182 | 	padding: 0;
183 | }
184 | .comment-content img {
185 | 	height: 100px;
186 | 	object-fit: fill;
187 | }
188 | .main {
189 | 	width: 100%;
190 | 	margin: 0 auto;
191 | 	padding: 50px 0;
192 | }
193 | .proup {
194 | 	position: fixed;
195 | 	display: none;
196 | 	width: 100%;
197 | 	height: 100%;
198 | 	top: 0;
199 | 	left: 0;
200 | 	z-index: 10000;
201 | 	cursor: pointer;
202 | 	background: rgba(0, 0, 0, 0.65);
203 | 	backdrop-filter: blur(5px);
204 | 	-webkit-backdrop-filter: blur(5px);
205 | }
206 | .typecho-head-nav .operate {
207 | 	position: fixed;
208 | 	width: 100%;
209 | 	padding-right: 15px;
210 | 	right: 0;
211 | 	height: 50px;
212 | 	top: 0;
213 | 	z-index: 9999;
214 | 	background: #fff;
215 | 	text-align: right;
216 | 	box-shadow: 0 0 20px -5px rgb(158 158 158 / 22%);
217 | }
218 | .typecho-head-nav .operate a {
219 | 	border: none;
220 | 	color: #060606;
221 | 	margin-top: 7px;
222 | 	padding: 0 12px;
223 | }
224 | .typecho-head-nav .operate a:hover {
225 | 	background: none;
226 | 	color: #5562c1;
227 | }
228 | .typecho-head-nav a,
229 | .typecho-head-nav button.menu-bar {
230 | 	padding: 0;
231 | }
232 | .typecho-head-nav a {
233 | 	color: #333;
234 | }
235 | .typecho-head-nav a:focus,
236 | .typecho-head-nav a:hover {
237 | 	color: #333;
238 | }
239 | .typecho-list-table {
240 | 	table-layout: auto;
241 | 	border: 0;
242 | }
243 | .typecho-list-table td .comment-content p {
244 | 	max-height: 100px;
245 | 	height: auto;
246 | 	overflow: hidden;
247 | }
248 | #typecho-nav-list ul:first-child {
249 | 	border: none;
250 | }
251 | .typecho-page-title h2 a {
252 | 	background: #6777ef;
253 | 	color: #fff;
254 | }
255 | .typecho-page-title {
256 | 	margin-bottom: 20px;
257 | }
258 | .typecho-page-main {
259 | 	border-radius: 5px;
260 | 	padding: 15px;
261 | 	background: #fff;
262 | 	box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.22);
263 | }
264 | .typecho-foot {
265 | 	display: none;
266 | }
267 | #typecho-welcome {
268 | 	border-radius: 12px;
269 | 	background-color: #f5f5f5;
270 | }
271 | #typecho-nav-list {
272 | 	display: none;
273 | 	position: fixed;
274 | 	z-index: 10000;
275 | 	top: 0;
276 | 	left: 0;
277 | 	background: #fff;
278 | 	width: 180px;
279 | 	overflow: auto;
280 | 	height: 100%;
281 | 	box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.22);
282 | }
283 | .typecho-theme-list tbody tr.current td {
284 | 	background-color: #e8ecf3;
285 | }
286 | .typecho-theme-list img {
287 | 	border-radius: 4px;
288 | 	box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.23);
289 | }
290 | .typecho-page-title h2 {
291 | 	margin-right: -10px;
292 | 	margin-left: -10px;
293 | }
294 | .user-info {
295 | 	width: 100%;
296 | 	padding: 25px 0;
297 | 	text-align: center;
298 | 	border-bottom: 1px solid #bbb;
299 | }
300 | .user-info img {
301 | 	border-radius: 50%;
302 | 	transition: 0.5s all;
303 | 	width: 72px;
304 | 	-webkit-transition: 0.5s all;
305 | 	-moz-transition: 0.5s all;
306 | 	-o-transition: 0.5s all;
307 | 	-ms-transition: 0.5s all;
308 | }
309 | .user-info img:hover {
310 | 	transform: rotate(360deg);
311 | }
312 | .user-nav {
313 | 	margin-left: -1rem;
314 | }
315 | .user-nav li {
316 | 	line-height: 40px;
317 | 	overflow: hidden;
318 | 	font-size: 15px;
319 | }
320 | .user-nav li a {
321 | 	height: 40px;
322 | 	display: block;
323 | }
324 | .user-nav li a:first-child {
325 | 	padding-right: 15px;
326 | }
327 | .user-nav li a:hover {
328 | 	color: #6777ef;
329 | }
330 | .user-nav li a i:first-child {
331 | 	padding-right: 8px;
332 | }
333 | .user-nav li a i:last-child {
334 | 	float: right;
335 | 	padding-right: 1rem;
336 | }
337 | .user-nav li ul {
338 | 	display: none;
339 | 	height: auto;
340 | 	overflow: hidden;
341 | }
342 | .user-nav li ul li {
343 | 	height: 35px;
344 | 	line-height: 35px;
345 | 	margin-left: -1rem;
346 | }
347 | .user-nav li ul li a {
348 | 	height: 35px;
349 | }
350 | .user-nav li ul li.return {
351 | 	cursor: pointer;
352 | }
353 | .copy-links {
354 | 	width: 85%;
355 | 	margin: 20px auto 10px auto;
356 | }
357 | .copy-links p {
358 | 	color: #fff;
359 | }
360 | .links-mian {
361 | 	width: 100%;
362 | 	padding: 5px;
363 | 	overflow: hidden;
364 | 	zoom: 1;
365 | 	height: auto;
366 | 	margin: 0;
367 | }
368 | .links-mian a {
369 | 	margin: 5px;
370 | 	padding: 6px 12px;
371 | 	display: inline-block;
372 | 	width: auto;
373 | 	max-width: 100%;
374 | 	border-radius: 5px;
375 | 	color: #6777ef;
376 | 	border: #6777ef solid 1px;
377 | 	white-space: nowrap;
378 | }
379 | #tonav {
380 | 	float: left;
381 | 	margin-left: 30px;
382 | 	font-size: 16px;
383 | }
384 | #wmd-preview {
385 | 	background: #f3f3f3;
386 | }
387 | #start-link {
388 | 	padding: 0 0 20px;
389 | }
390 | .primary {
391 | 	background-color: #6777ef;
392 | }
393 | .primary:hover {
394 | 	background: #5562c1;
395 | }
396 | .popup {
397 | 	top: 50px !important;
398 | }
399 | .root {
400 | 	display: none;
401 | }
402 | .typecho-table-wrap {
403 | 	padding: 0;
404 | }
405 | .wmd-button-row {
406 | 	height: auto;
407 | }
408 | .row [class*='col-'] {
409 | 	padding: 0 5px;
410 | }
411 | .i-logo img {
412 | 	max-width: 170px;
413 | }
414 | #custom-field textarea {
415 | 	width: 100%;
416 | 	min-height: 100px;
417 | }
418 | #tonav a:focus,
419 | #tonav a:hover {
420 | 	color: #fff;
421 | }
422 | .welcome-board {
423 | 	font-size: 1em;
424 | }
425 | #start-link li {
426 | 	padding: 8px;
427 | 	margin: 8px;
428 | 	background: #09f;
429 | 	text-align: center;
430 | }
431 | #start-link li:hover {
432 | 	background: #5562c1;
433 | }
434 | #start-link li a {
435 | 	color: #fff;
436 | 	text-decoration: none;
437 | }
438 | 
439 | .menu-ul .focus a {
440 | 	color: #6777ef;
441 | }
442 | #tonav,
443 | .user-nav li a,
444 | li,
445 | ul {
446 | 	outline: 0;
447 | }
448 | .comment-avatar .avatar,
449 | .profile-avatar {
450 | 	border-radius: 50%;
451 | 	border: 1px solid #fff;
452 | 	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.13);
453 | }
454 | .main.main-in {
455 | 	width: 100% !important;
456 | }
457 | .fullscreen #tab-files {
458 | 	right: 0;
459 | }
460 | .success {
461 | 	background: #e8ecf3;
462 | 	color: #6777ef;
463 | }
464 | .wrap {
465 | 	width: 100%;
466 | }
467 | .wrap .row {
468 | 	margin-left: -1rem;
469 | 	margin-right: -1rem;
470 | }
471 | .wrap .card {
472 | 	padding: 10px;
473 | 	border-radius: 5px;
474 | 	background: #fff;
475 | 	box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.22);
476 | 	margin: 10px 0;
477 | }
478 | .wrap .card .card-header {
479 | 	padding: 8px;
480 | 	border-bottom: 1px solid #ebeef5;
481 | 	box-sizing: border-box;
482 | 	font-size: 16px;
483 | 	font-weight: 600;
484 | }
485 | .wrap .card .card-body {
486 | 	padding: 10px;
487 | 	min-height: 220px;
488 | 	box-sizing: content-box;
489 | }
490 | .wrap .total .num {
491 | 	padding: 10px 15px;
492 | 	background-color: #f8f8f8;
493 | 	color: #666;
494 | 	border-radius: 2px;
495 | 	text-decoration: none;
496 | 	margin: 10px;
497 | 	cursor: pointer;
498 | }
499 | .wrap .total h3 {
500 | 	font-weight: 400;
501 | 	padding-bottom: 10px;
502 | 	font-size: 12px;
503 | 	padding: 0px;
504 | 	margin: 0px;
505 | }
506 | .wrap .total span {
507 | 	margin: 0;
508 | 	font-style: normal;
509 | 	font-size: 30px;
510 | 	font-weight: 400;
511 | 	color: #009688;
512 | }
513 | .wrap .shortcut a {
514 | 	display: block;
515 | 	padding: 10px 15px;
516 | 	color: #666;
517 | 	border-radius: 2px;
518 | 	text-decoration: none;
519 | 	box-sizing: border-box;
520 | }
521 | .wrap .shortcut a:hover {
522 | 	color: #6777ef;
523 | }
524 | .wrap .shortcut a i {
525 | 	display: inline-block;
526 | 	width: 100%;
527 | 	height: 60px;
528 | 	line-height: 60px;
529 | 	text-align: center;
530 | 	border-radius: 2px;
531 | 	font-size: 30px;
532 | 	color: #009688;
533 | 	background-color: #f8f8f8;
534 | 	transition: all 0.3s;
535 | 	-webkit-transition: all 0.3s;
536 | }
537 | .wrap .shortcut cite {
538 | 	position: relative;
539 | 	top: 2px;
540 | 	display: block;
541 | 	text-overflow: ellipsis;
542 | 	overflow: hidden;
543 | 	white-space: nowrap;
544 | 	font-size: 14px;
545 | 	font-style: normal;
546 | 	text-align: center;
547 | }
548 | @media all and (max-width: 575px) {
549 | 	.container {
550 | 		padding: 0 20px;
551 | 	}
552 | 	a.balloon-button,
553 | 	a.balloon-button:hover {
554 | 		background: 0 0;
555 | 		color: #6777ef;
556 | 	}
557 | 	.wrap .card:last-child {
558 | 		margin-top: 0;
559 | 	}
560 | 	.user-info img {
561 | 		width: 48px;
562 | 	}
563 | 	.user-nav li a {
564 | 		text-indent: 0.5em;
565 | 	}
566 | 	.typecho-head-nav {
567 | 		bottom: auto;
568 | 	}
569 | 	#typecho-nav-list {
570 | 		padding-top: 20px;
571 | 	}
572 | 	.typecho-page-main {
573 | 		box-shadow: none;
574 | 	}
575 | 	.typecho-page-title {
576 | 		height: auto;
577 | 	}
578 | 	.typecho-page-title h2 {
579 | 		margin: 15px 0;
580 | 	}
581 | 	.typecho-list-table thead {
582 | 		display: none;
583 | 	}
584 | 	.typecho-list-operate .search {
585 | 		text-align: right;
586 | 	}
587 | 	.typecho-list-table tr {
588 | 		display: block;
589 | 		position: relative;
590 | 		margin-bottom: 10px;
591 | 		border-radius: 5px;
592 | 		background: rgb(158 158 158 / 22%);
593 | 	}
594 | 	.typecho-list-table tr:hover {
595 | 		border-radius: 5px;
596 | 	}
597 | 	html[dark-mode='dark-mode'] .typecho-list-table td {
598 | 		border-top: none;
599 | 	}
600 | 	.typecho-list-table td {
601 | 		display: block;
602 | 		text-align: left;
603 | 		border-top: none;
604 | 		height: auto !important;
605 | 	}
606 | 	.typecho-list-table td:nth-child(3) {
607 | 		border-top: 1px dotted #666 !important;
608 | 	}
609 | 	.typecho-list-table td:nth-child(4),
610 | 	.typecho-list-table td:nth-child(5) {
611 | 		display: none;
612 | 	}
613 | 	.typecho-list-table td:before {
614 | 		content: attr(data-label);
615 | 		float: left;
616 | 		text-transform: uppercase;
617 | 	}
618 | 	.typecho-table-wrap table tbody tr td:first-child {
619 | 		float: right;
620 | 		border-bottom: none;
621 | 	}
622 | }
623 | 


--------------------------------------------------------------------------------
/assets/css/login.css:
--------------------------------------------------------------------------------
 1 | .body-100 {
 2 | 	background: #ffffff;
 3 | 	background-image: linear-gradient(to bottom, rgb(0 0 0 / 10%) 0, rgb(0 0 0 / 10%) 1px, transparent 1px), linear-gradient(to right, rgb(0 0 0 / 10%) 0, rgb(0 0 0 / 10%) 1px, transparent 1px);
 4 | 	background-size: 2px 2px;
 5 | 	background-repeat: repeat;
 6 | }
 7 | .typecho-login {
 8 | 	display: block;
 9 | 	padding: 15px 30px;
10 | 	margin: 0 auto;
11 | 	background: #fff;
12 | 	border-radius: 5px;
13 | 	box-shadow: 1px 1px 1px #ccc;
14 | 	opacity: 0.95;
15 | }
16 | .typecho-login-wrap {
17 | 	width: 100%;
18 | 	display: block;
19 | 	position: absolute;
20 | 	top: 22%;
21 | 	height: auto;
22 | }
23 | .typecho-login .more-link {
24 | 	margin-top: 0;
25 | }
26 | .typecho-login h1 {
27 | 	margin: 0.5em 0 1em;
28 | }
29 | .i-logo,
30 | .i-logo-s {
31 | 	background: url(../img/logo.png) no-repeat;
32 | 	width: 180px;
33 | 	height: 60px;
34 | 	opacity: 1;
35 | }
36 | .i-logo:hover,
37 | .i-logo-s:hover {
38 | 	opacity: 0.9;
39 | }
40 | 


--------------------------------------------------------------------------------
/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinphy/WangStyle/7c88c2354880e0c63cb7aae4c20f03658835f79c/assets/img/logo.png


--------------------------------------------------------------------------------
/assets/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinphy/WangStyle/7c88c2354880e0c63cb7aae4c20f03658835f79c/assets/img/user.png


--------------------------------------------------------------------------------
/assets/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | include 'common.php';
  3 | include 'header.php';
  4 | include 'menu.php';
  5 | 
  6 | $stat = Typecho_Widget::widget('Widget_Stat');
  7 | ?>
  8 | <div class="main">
  9 |     <div class="container typecho-dashboard">
 10 |         <?php include 'page-title.php'; ?>
 11 |         <div class="wrap">
 12 |             <div class="row">
 13 |                 <div class="col-mb-12 col-tb-6">
 14 |                     <div class="card shortcut">
 15 |                         <div class="card-header">快捷方式</div>
 16 |                         <div class="card-body">
 17 |                             <div class="row">
 18 |                                 <div class="col-mb-4">
 19 |                                     <a href="<?php $options->adminUrl('write-post.php'); ?>">
 20 |                                         <i class="zm zm-bianji1"></i>
 21 |                                         <cite>
 22 |                                             <?php _e('新建文章'); ?>
 23 |                                         </cite>
 24 |                                     </a>
 25 |                                 </div>
 26 |                                 <div class="col-mb-4">
 27 |                                     <a href="<?php $options->adminUrl('themes.php'); ?>">
 28 |                                         <i class="zm zm-waiguan"></i>
 29 |                                         <cite>
 30 |                                             <?php _e('更换外观'); ?>
 31 |                                         </cite>
 32 |                                     </a>
 33 |                                 </div>
 34 |                                 <div class="col-mb-4">
 35 |                                     <a href="<?php $options->adminUrl('plugins.php'); ?>">
 36 |                                         <i class="zm zm-chajian1"></i>
 37 |                                         <cite>
 38 |                                             <?php _e('插件管理'); ?>
 39 |                                         </cite>
 40 |                                     </a>
 41 |                                 </div>
 42 |                                 <div class="col-mb-4">
 43 |                                     <a href="<?php $options->adminUrl('write-page.php'); ?>">
 44 |                                         <i class="zm zm-iconset0335"></i>
 45 |                                         <cite>
 46 |                                             <?php _e('创建页面'); ?>
 47 |                                         </cite>
 48 |                                     </a>
 49 |                                 </div>
 50 |                                 <div class="col-mb-4">
 51 |                                     <a href="<?php $options->adminUrl('manage-medias.php'); ?>">
 52 |                                         <i class="zm zm-zhitongche"></i>
 53 |                                         <cite>
 54 |                                             <?php _e('文件管理'); ?>
 55 |                                         </cite>
 56 |                                     </a>
 57 |                                 </div>
 58 |                                 <?php if ($user->pass('administrator', true)) : ?>
 59 |                                     <div class="col-mb-4">
 60 |                                         <a href="<?php $options->adminUrl('options-general.php'); ?>">
 61 |                                             <i class="zm zm-xitong"></i>
 62 |                                             <cite>
 63 |                                                 <?php _e('系统设置'); ?>
 64 |                                             </cite>
 65 |                                         </a>
 66 |                                     </div>
 67 |                                 <?php endif; ?>
 68 |                             </div>
 69 |                         </div>
 70 |                     </div>
 71 |                 </div>
 72 |                 <div class="col-mb-12 col-tb-6">
 73 |                     <div class="card total">
 74 |                         <div class="card-header">网站统计</div>
 75 |                         <div class="card-body">
 76 |                             <div class="row">
 77 |                                 <div class="col-mb-6">
 78 |                                     <div class="num">
 79 |                                         <h3>文章数量</h3>
 80 |                                         <a href="<?php $options->adminUrl('manage-posts.php'); ?>">
 81 |                                             <span>
 82 |                                                 <?php $stat->myPublishedPostsNum(); ?>
 83 |                                             </span>
 84 |                                         </a>
 85 |                                     </div>
 86 |                                 </div>
 87 |                                 <div class="col-mb-6">
 88 |                                     <div class="num">
 89 |                                         <h3>分类数量</h3>
 90 |                                         <a href="<?php $options->adminUrl('manage-categories.php'); ?>">
 91 |                                             <span>
 92 |                                                 <?php $stat->categoriesNum() ?>
 93 |                                             </span>
 94 |                                         </a>
 95 |                                     </div>
 96 |                                 </div>
 97 |                                 <div class="col-mb-6">
 98 |                                     <div class="num">
 99 |                                         <h3>评论数量</h3>
100 |                                         <a href="<?php $options->adminUrl('manage-comments.php'); ?>">
101 |                                             <span>
102 |                                                 <?php $stat->publishedCommentsNum() ?>
103 |                                             </span>
104 |                                         </a>
105 |                                     </div>
106 |                                 </div>
107 |                                 <div class="col-mb-6">
108 |                                     <div class="num">
109 |                                         <h3>页面数量</h3>
110 |                                         <a href="<?php $options->adminUrl('manage-pages.php'); ?>">
111 |                                             <span>
112 |                                                 <?php $stat->publishedPagesNum() ?>
113 |                                             </span>
114 |                                         </a>
115 |                                     </div>
116 |                                 </div>
117 |                             </div>
118 |                         </div>
119 |                     </div>
120 |                 </div>
121 |             </div>
122 |         </div>
123 |         <div class="row typecho-page-main">
124 |             <div class="col-mb-12 col-tb-6" role="complementary">
125 |                 <section class="latest-link">
126 |                     <h3><?php _e('最近文章'); ?></h3>
127 |                     <?php Typecho_Widget::widget('Widget_Contents_Post_Recent', 'pageSize=10')->to($posts); ?>
128 |                     <ul>
129 |                         <?php if ($posts->have()) : ?>
130 |                             <?php while ($posts->next()) : ?>
131 |                                 <li>
132 |                                     <span><?php $posts->date('n.j'); ?></span>
133 |                                     <a href="<?php $posts->permalink(); ?>" class="title"><?php $posts->title(); ?></a>
134 |                                 </li>
135 |                             <?php endwhile; ?>
136 |                         <?php else : ?>
137 |                             <li><em><?php _e('暂时没有文章'); ?></em></li>
138 |                         <?php endif; ?>
139 |                     </ul>
140 |                 </section>
141 |             </div>
142 | 
143 |             <div class="col-mb-12 col-tb-6" role="complementary">
144 |                 <section class="latest-link">
145 |                     <h3><?php _e('最近回复'); ?></h3>
146 |                     <ul>
147 |                         <?php Typecho_Widget::widget('Widget_Comments_Recent', 'pageSize=10')->to($comments); ?>
148 |                         <?php if ($comments->have()) : ?>
149 |                             <?php while ($comments->next()) : ?>
150 |                                 <li>
151 |                                     <span><?php $comments->date('n.j'); ?></span>
152 |                                     <a href="<?php $comments->permalink(); ?>" class="title"><?php $comments->author(false); ?></a>:
153 |                                     <?php $comments->excerpt(35, '...'); ?>
154 |                                 </li>
155 |                             <?php endwhile; ?>
156 |                         <?php else : ?>
157 |                             <li><?php _e('暂时没有回复'); ?></li>
158 |                         <?php endif; ?>
159 |                     </ul>
160 |                 </section>
161 |             </div>
162 | 
163 |             <div class="col-mb-12 col-tb-4" role="complementary" style="display:none">
164 |                 <section class="latest-link">
165 |                     <h3><?php _e('官方最新日志'); ?></h3>
166 |                     <div id="typecho-message">
167 |                         <ul>
168 |                             <li><?php _e('读取中...'); ?></li>
169 |                         </ul>
170 |                     </div>
171 |                 </section>
172 |             </div>
173 |         </div>
174 |     </div>
175 | </div>
176 | 
177 | <?php
178 | include 'copyright.php';
179 | include 'common-js.php';
180 | ?>
181 | 
182 | <script>
183 |     $(document).ready(function() {
184 |         var ul = $('#typecho-message ul'),
185 |             cache = window.sessionStorage,
186 |             html = cache ? cache.getItem('feed') : '',
187 |             update = cache ? cache.getItem('update') : '';
188 | 
189 |         if (!!html) {
190 |             ul.html(html);
191 |         } else {
192 |             html = '';
193 |             $.get('<?php $options->index('/action/ajax?do=feed'); ?>', function(o) {
194 |                 for (var i = 0; i < o.length; i++) {
195 |                     var item = o[i];
196 |                     html += '<li><span>' + item.date + '</span> <a href="' + item.link + '" target="_blank">' + item.title +
197 |                         '</a></li>';
198 |                 }
199 | 
200 |                 ul.html(html);
201 |                 cache.setItem('feed', html);
202 |             }, 'json');
203 |         }
204 | 
205 |         function applyUpdate(update) {
206 |             if (update.available) {
207 |                 $('<div class="update-check message error"><p>' +
208 |                         '<?php _e('您当前使用的版本是 %s'); ?>'.replace('%s', update.current) + '<br />' +
209 |                         '<strong><a href="' + update.link + '" target="_blank">' +
210 |                         '<?php _e('官方最新版本是 %s'); ?>'.replace('%s', update.latest) + '</a></strong></p></div>')
211 |                     .insertAfter('.typecho-page-title').effect('highlight');
212 |             }
213 |         }
214 | 
215 |         if (!!update) {
216 |             applyUpdate($.parseJSON(update));
217 |         } else {
218 |             $.get('<?php $options->index('/action/ajax?do=checkVersion'); ?>', function(o, status, resp) {
219 |                 applyUpdate(o);
220 |                 cache.setItem('update', resp.responseText);
221 |             }, 'json');
222 |         }
223 |     });
224 | </script>
225 | <?php include 'footer.php'; ?>


--------------------------------------------------------------------------------
/assets/js/admin.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 | 	$(function () {
  3 | 		/* 初始化菜单 */
  4 | 		$('#typecho-nav-list .child li:eq(0)').remove();
  5 | 		var e = $('#typecho-nav-list .child:eq(0)').html();
  6 | 		var a = $('#typecho-nav-list .child:eq(1)').html();
  7 | 		var i = $('#typecho-nav-list .child:eq(2)').html();
  8 | 		var l = $('#typecho-nav-list .child:eq(3)').html();
  9 | 		/* 侧边栏菜单 */
 10 | 		var r = '<div class="user-info"><a href="' + UserLink + '"><img src="' + UserPic + 's=100" /></a><p>Hi，' + UserName + '</p></div>';
 11 | 		if ('administrator' == UserGroup) var o = '<div class="user-nav"><ul><li><a href="' + AdminLink + 'index.php"><i class="zm zm-zu"></i>主页<i></i></a></li><li class="menu-li"><a href="javascript:;"><i class="zm zm-quanjushuxing"></i>全局<i class="zm zm-sanJiaoBottom"></i></a><ul class="menu-ul">' + e + '</ul></li><li class="menu-li"><a href="javascript:;"><i class="zm zm-zhuomiankuaijiefangshi"></i>撰写<i class="zm zm-sanJiaoBottom"></i></a><ul class="menu-ul">' + a + '</li></ul></li><li class="menu-li"><a href="javascript:;"><i class="zm zm-leibie"></i>管理<i class="zm zm-sanJiaoBottom"></i></a><ul class="menu-ul">' + i + '</ul></li><li class="menu-li"><a href="javascript:;"><i class="zm zm-shezhi"></i>设置<i class="zm zm-sanJiaoBottom"></i></a><ul class="menu-ul">' + l + '</li></ul></div>';
 12 | 		else if ('editor' == UserGroup || 'contributor' == UserGroup) o = '<div class="user-nav"><ul><li><a href="' + AdminLink + 'index.php"><i class="zm zm-zu"></i>主页</a></li><li><a href="' + AdminLink + 'profile.php"><i class="zm zm-shezhi"></i>个人设置</a></li><li><a href="' + AdminLink + 'write-post.php"><i class="zm zm-bianji"></i>撰写文章</a></li><li><a href="' + AdminLink + 'manage-posts.php"><i class="zm zm-leibie"></i>我的文章</a></li><li><a href="' + AdminLink + '/manage-comments.php"><i class="zm zm-quanjushuxing"></i>评论管理</a></li></ul></div>';
 13 | 		else o = '<div class="user-nav"><ul><li><a href="' + AdminLink + 'index.php"><i class="zm zm-zu"></i>主页</a></li><li><a href="' + AdminLink + 'profile.php"><i class="zm zm-shezhi"></i>个人设置</a></li></ul></div>';
 14 | 		if ('' != UserGroup) {
 15 | 			$('#typecho-nav-list').html(r + o),
 16 | 				$('.typecho-head-nav .operate').eq(0).prepend('<a id="dark-mode" href="javascript:;"><i class="zm zm-heiye"></i></a>'),
 17 | 				$('.typecho-head-nav .operate').eq(0).prepend('<a id="tonav" href="javascript:;"><i class="zm zm-caidan"></i></a>'),
 18 | 				$('#typecho-nav-list').before('<div class="proup"></div>'),
 19 | 				$('#tonav').click(function (event) {
 20 | 					event.stopPropagation(), $('#typecho-nav-list').toggle();
 21 | 					$('.proup').toggle();
 22 | 				}),
 23 | 				$(document).click(function (event) {
 24 | 					var _con = $('#typecho-nav-list');
 25 | 					if (!_con.is(event.target) && _con.has(event.target).length == 0) {
 26 | 						$('#typecho-nav-list').hide();
 27 | 						$('.proup').hide();
 28 | 					}
 29 | 				});
 30 | 			if (MenuTitle == '个人设置') {
 31 | 				$('.profile-avatar:eq(0)').attr('src', UserPic + 's=640');
 32 | 				$('.typecho-page-main div:eq(0)').attr('style', 'text-align:center');
 33 | 			}
 34 | 		}
 35 | 		$('#typecho-nav-list li.focus').parent('.menu-ul').show();
 36 | 		$('body').on('click', '.menu-li', function () {
 37 | 			$(this).find('.menu-ul').is(':hidden') && $('.menu-ul').hide(200), $(this).find('.menu-ul').slideToggle(200);
 38 | 		});
 39 | 		/* 全屏按钮 */
 40 | 		$('body').on('click', '#wmd-fullscreen-button', function () {
 41 | 			$('.main').addClass('main-in');
 42 | 		});
 43 | 		$('body').on('click', '#wmd-exit-fullscreen-button', function () {
 44 | 			$('.main').removeClass('main-in');
 45 | 		});
 46 | 		/* 页面调整 */
 47 | 		$('.typecho-list-table colgroup').remove();
 48 | 		if ('网站概要' == MenuTitle) {
 49 | 			$('.typecho-page-title h2').hide();
 50 | 		}
 51 | 		if ($(window).width() < 575) {
 52 | 			if ('插件管理' == MenuTitle) {
 53 | 				$('.typecho-table-wrap tr').find('td:eq(0)').css({ float: 'none', padding: '10px' });
 54 | 				$('.typecho-list-table tr').find('td:eq(1)').attr('data-label', '描述：');
 55 | 				$('.typecho-list-table tr').find('td:eq(2)').hide();
 56 | 				$('.typecho-list-table tr').find('td:eq(4)').css({ display: 'block', 'font-size': '1rem' });
 57 | 			}
 58 | 			if ('管理文章' == MenuTitle || '管理独立页面' == MenuTitle) {
 59 | 				$('.typecho-list-table tr').find('td:eq(1)').attr('data-label', '评论：');
 60 | 			}
 61 | 			if ('管理评论' == MenuTitle) {
 62 | 				$('.typecho-list-table td').find('td:eq(2)').css('display', 'block').attr('data-label', '评论者：');
 63 | 				$('.typecho-list-table tr').find('td:eq(3)').css('display', 'block').attr('data-label', '发表于：');
 64 | 			}
 65 | 			if ('管理分类' == MenuTitle) {
 66 | 				$('.typecho-list-table tr').find('td:eq(5)').attr('data-label', '文章数：');
 67 | 			}
 68 | 			if ('管理用户' == MenuTitle) {
 69 | 				$('.typecho-list-table tr').find('td:eq(1)').attr('data-label', '文章数：');
 70 | 				$('.typecho-list-table tr').find('td:eq(4)').css('display', 'block');
 71 | 			}
 72 | 		}
 73 | 		/* 显示canvas 图片 */
 74 | 		$('tbody tr .comment-content p').each(function (i, item) {
 75 | 			let str = $(item).html();
 76 | 			if (!/\{!\{.*\}!\}/.test(str)) return;
 77 | 			str = str.replace(/{!{/, '').replace(/}!}/, '');
 78 | 			$(item).html('<img src="' + str + '" />');
 79 | 		});
 80 | 		/* 暗色模式 */
 81 | 		if (localStorage.getItem('dark-mode')) {
 82 | 			$('html').attr('dark-mode', 'dark-mode');
 83 | 			$('#dark-mode').html('<i class="zm zm-baitian"></i>');
 84 | 		} else {
 85 | 			$('html').removeAttr('dark-mode', 'dark-mode');
 86 | 			$('#dark-mode').html('<i class="zm zm-heiye"></i>');
 87 | 		}
 88 | 		$('#dark-mode').on('click', function () {
 89 | 			if ($('html').attr('dark-mode')) {
 90 | 				$('html').removeAttr('dark-mode');
 91 | 				localStorage.removeItem('dark-mode');
 92 | 				$('#dark-mode').html('<i class="zm zm-heiye"></i>');
 93 | 			} else {
 94 | 				$('html').attr('dark-mode', 'dark-mode');
 95 | 				localStorage.setItem('dark-mode', 'dark-mode');
 96 | 				$('#dark-mode').html('<i class="zm zm-baitian"></i>');
 97 | 			}
 98 | 		});
 99 | 	});
100 | });
101 | 


--------------------------------------------------------------------------------