diff --git a/README.md b/README.md
index 64cb9b5..e135e35 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 [![Python Support](https://img.shields.io/badge/python-2.7%2B%20-blue.svg)](https://github.com/cppla/ServerStatus)
 [![C++ Compiler](http://img.shields.io/badge/C++-GNU-blue.svg?style=flat&logo=cplusplus)](https://github.com/cppla/ServerStatus)
 [![License](https://img.shields.io/badge/license-MIT-4EB1BA.svg?style=flat-square)](https://github.com/cppla/ServerStatus)
-[![Version](https://img.shields.io/badge/Version-Beta%201.0.6-red)](https://github.com/cppla/ServerStatus)
+[![Version](https://img.shields.io/badge/Version-Beta%201.0.7-red)](https://github.com/cppla/ServerStatus)
 
 ![Latest Version](http://dl.cpp.la/Archive/serverstatus-1.0.2.png)
 
@@ -26,7 +26,7 @@
 【服务端】：
 ```bash
 
-`onetouch`:     
+`OneTouch`:     
 
 wget --no-check-certificate -qO serverstatus-config.json https://raw.githubusercontent.com/cppla/ServerStatus/master/server/config.json && mkdir serverstatus-monthtraffic    
 docker run -d --restart=always --name=serverstatus -v ~/serverstatus-config.json:/ServerStatus/server/config.json -v ~/serverstatus-monthtraffic:/usr/share/nginx/html/json -p 80:80 -p 35601:35601 cppla/serverstatus:latest     
diff --git a/web/index.html b/web/index.html
index 49a7e66..eaa8f13 100644
--- a/web/index.html
+++ b/web/index.html
@@ -50,8 +50,8 @@
 							<li class="dropdown">
 								<a data-toggle="dropdown" class="dropdown-toggle" href="#">风格<b class="caret"></b></a>
 								<ul class="dropdown-menu">
-									<li><a href="#" onclick="setActiveStyleSheet('dark')">黑夜</a></li>
-									<li><a href="#" onclick="setActiveStyleSheet('light')">白天</a></li>
+									<li><a href="#" onclick="setActiveStyleSheet('dark', true)">黑夜</a></li>
+									<li><a href="#" onclick="setActiveStyleSheet('light', true)">白天</a></li>
 								</ul>
 							</li>
 						</ul>
diff --git a/web/js/serverstatus.js b/web/js/serverstatus.js
index cf8a519..44b0fc3 100644
--- a/web/js/serverstatus.js
+++ b/web/js/serverstatus.js
@@ -318,14 +318,17 @@ setInterval(updateTime, 2000);
 
 
 // styleswitcher.js
-function setActiveStyleSheet(title) {
-	var i, a, main;
-	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
-		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
-			a.disabled = true;
-			if(a.getAttribute("title") == title) a.disabled = false;
-		}
-	}
+function setActiveStyleSheet(title, cookie=false) {
+        var i, a, main;
+        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+                if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+                        a.disabled = true;
+                        if(a.getAttribute("title") == title) a.disabled = false;
+                }
+        }
+        if (true==cookie) {
+                createCookie("style", title, 365);
+        }
 }
 
 function getActiveStyleSheet() {
@@ -337,15 +340,6 @@ function getActiveStyleSheet() {
 	return null;
 }
 
-function getPreferredStyleSheet() {
-	var i, a;
-	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
-		if(a.getAttribute("rel").indexOf("style") != -1	&& a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title"))
-			return a.getAttribute("title");
-	}
-return null;
-}
-
 function createCookie(name,value,days) {
 	if (days) {
 		var date = new Date();
@@ -370,16 +364,19 @@ function readCookie(name) {
 }
 
 window.onload = function(e) {
-	var cookie = readCookie("style");
-	var title = cookie ? cookie : getPreferredStyleSheet();
-	setActiveStyleSheet(title);
+        var cookie = readCookie("style");
+        if (cookie && cookie != 'null' ) {
+                setActiveStyleSheet(cookie);
+        } else {
+                function handleChange (mediaQueryListEvent) {
+                        if (mediaQueryListEvent.matches) {
+                                setActiveStyleSheet('dark');
+                        } else {
+                                setActiveStyleSheet('light');
+                        }
+                }
+                const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
+                setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
+                mediaQueryListDark.addEventListener("change",handleChange);
+        }
 }
-
-window.onunload = function(e) {
-	var title = getActiveStyleSheet();
-	createCookie("style", title, 365);
-}
-
-var cookie = readCookie("style");
-var title = cookie ? cookie : getPreferredStyleSheet();
-setActiveStyleSheet(title);