diff --git a/_includes/head.html b/_includes/head.html
index 44e0c47..8a7ec72 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -10,8 +10,8 @@
 <link rel="stylesheet" href="/static/css/bootstrap.css">
 <link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
 <link rel="stylesheet" href="/static/css/font-awesome.min.css" >
-<link rel="stylesheet" href="/static/css/style.css">
 <link rel="stylesheet" href="/static/css/spinkit.css">
+<link rel="stylesheet" href="/static/css/style.css">
 <link rel="stylesheet" href="/static/css/thuhidden.css">
 <script src="/static/js/jquery.min.js"></script>
 <script src="/static/js/bootstrap.min.js"></script>
diff --git a/_includes/nav.html b/_includes/nav.html
index bdad185..18d7cf0 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -9,7 +9,23 @@
         <span class="icon-bar"></span>
       </button>
       {% endunless %}
-      <a class="navbar-brand" href="/"><span class="thuhidden"><img src="/static/img/logo-small.png" srcset="/static/img/logo-small.png 1x, /static/img/logo-small@2x.png 2x, /static/img/logo-small@3x.png 3x, /static/img/logo-small@4x.png 4x" alt=""/> 清华大学</span>开源软件镜像站</a>
+      <a class="navbar-brand" href="/"><!--
+   --><span class="thuhidden"><!--
+   --><picture>
+        <source 
+          srcset="/static/img/logo-small-dark.png 1x,
+                  /static/img/logo-small-dark@2x.png 2x,
+                  /static/img/logo-small-dark@3x.png 3x,
+                  /static/img/logo-small-dark@4x.png 4x"
+          media="(prefers-color-scheme: dark)"/>
+        <img src="/static/img/logo-small.png" 
+          srcset="/static/img/logo-small.png 1x, 
+                  /static/img/logo-small@2x.png 2x, 
+                  /static/img/logo-small@3x.png 3x, 
+                  /static/img/logo-small@4x.png 4x" 
+          alt=""/>
+      </picture>
+        清华大学</span>开源软件镜像站</a>
     </div>
     <div class="{% unless page.legacy %}navbar-collapse collapse {% endunless %}navbar-right">
       <ul class="nav navbar-nav">
diff --git a/_includes/status-pic.html b/_includes/status-pic.html
new file mode 100644
index 0000000..c6fd098
--- /dev/null
+++ b/_includes/status-pic.html
@@ -0,0 +1,6 @@
+<div class="col-md-6">
+	<picture class="thumbnail">
+	<source srcset="/static/status/{{include.name}}-day-dark.png" media="(prefers-color-scheme: dark)">
+	<img class="img-responsive" src="/static/status/{{include.name}}-day.png">
+	</picture>
+</div>
diff --git a/static/css/_bootstrap-mod.scss b/static/css/_bootstrap-mod.scss
index 3876abd..b994e2f 100644
--- a/static/css/_bootstrap-mod.scss
+++ b/static/css/_bootstrap-mod.scss
@@ -73,6 +73,9 @@ code{
     color: $color_secondary;
     @include dark{
         color: $color_secondary_dark;
+        &:hover {
+          color: #fff;
+        }
     }
 }
 
@@ -146,4 +149,27 @@ code{
   .popover.left > .arrow:after {
     border-left-color: #282828;
   }
+  .modal-content {
+    background-color: $color_bg_dark;
+    border: 1px solid rgba(255, 255, 255, .2);
+  }
+  .close {
+    color: $color_secondary_dark;
+    text-shadow: 0 1px 0 $color_bg_dark;
+    &:hover, &:focus{
+      color: #fff;
+    }
+  }
+  .nav-tabs > li > a:hover {
+    background-color: $color_bg_dark;
+  }
+  .nav-tabs > li.active > a,
+  .nav-tabs > li.active > a:hover,
+  .nav-tabs > li.active > a:focus {
+    color: $color_secondary_dark;
+    background-color: $color_bg_dark;
+  }
+  .thumbnail {
+    background-color: $color_bg_dark;
+  }
 }
diff --git a/static/css/_structure.scss b/static/css/_structure.scss
index 3121610..90a0ff1 100644
--- a/static/css/_structure.scss
+++ b/static/css/_structure.scss
@@ -57,11 +57,11 @@ a {
     padding: 0;
     margin: 0;
     text-decoration: none;
-    -webkit-transition: background-color .4s linear, color .4s linear;
-    -moz-transition: background-color .4s linear, color .4s linear;
-    -o-transition: background-color .4s linear, color .4s linear;
-    -ms-transition: background-color .4s linear, color .4s linear;
-    transition: background-color .4s linear, color .4s linear;
+    -webkit-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+    -moz-transition: background-color .4s linear, color .4s linea, border-color .4s linearr;
+    -o-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+    -ms-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+    transition: background-color .4s linear, color .4s linear, border-color .4s linear;
 }
 
 a:hover, a:focus {
diff --git a/static/css/style.scss b/static/css/style.scss
index c8a5f1f..8bee3e4 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -22,7 +22,7 @@ $color_primary_dark: $color_thu_purple_dark;
 $color_primary_light: #d8aff6;
 $color_primary_rgb: 92,48,125;
 $color_secondary: #384452;
-$color_secondary_dark: #ffffff;
+$color_secondary_dark: #ddd;
 $color_link: #088acb;
 $color_link_dark: #65A9CB;
 $color_link_hover: #62bbe7;
@@ -104,6 +104,11 @@ body {
 	  background-color: #0F3A4C;
 	}
 }
+.sk-wave .sk-rect {
+  @include dark{
+    background-color: $color_secondary_dark;
+  }
+}
 
 #mirrors {
 	tbody {
diff --git a/static/img/logo-small-dark.png b/static/img/logo-small-dark.png
new file mode 100644
index 0000000..92f2d80
Binary files /dev/null and b/static/img/logo-small-dark.png differ
diff --git a/static/img/logo-small-dark@2x.png b/static/img/logo-small-dark@2x.png
new file mode 100644
index 0000000..eff52e9
Binary files /dev/null and b/static/img/logo-small-dark@2x.png differ
diff --git a/static/img/logo-small-dark@3x.png b/static/img/logo-small-dark@3x.png
new file mode 100644
index 0000000..3da8450
Binary files /dev/null and b/static/img/logo-small-dark@3x.png differ
diff --git a/static/img/logo-small-dark@4x.png b/static/img/logo-small-dark@4x.png
new file mode 100644
index 0000000..3c78435
Binary files /dev/null and b/static/img/logo-small-dark@4x.png differ
diff --git a/status.html b/status.html
index 021c099..0961cb1 100644
--- a/status.html
+++ b/status.html
@@ -12,16 +12,8 @@ permalink: /status/
 			<h3 id="server-status"> # 服务器监控 </h3>
 			<h4> # 网络流量 </h4>
 			<div class="row">
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/service_traffic_IPv4-day.png">
-					</div>
-				</div>
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/service_traffic_IPv6-day.png">
-					</div>
-				</div>
+				{% include status-pic.html name="service_traffic_IPv4" %}
+				{% include status-pic.html name="service_traffic_IPv6" %}
 			</div>
 			<h4># 磁盘状态 </h4>
 			<div class="row">
@@ -32,29 +24,13 @@ permalink: /status/
 					</div>
 				</div>
 				</div>
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/diskstats_iops-day.png">
-					</div>
-				</div>
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/diskstats_throughput-day.png">
-					</div>
-				</div>
+				{% include status-pic.html name="diskstats_iops" %}
+				{% include status-pic.html name="diskstats_throughput" %}
 			</div>
 			<h4># CPU / 内存</h4>
 			<div class="row">
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/cpu-day.png">
-					</div>
-				</div>
-				<div class="col-md-6">
-					<div class="thumbnail">
-					<img class="img-responsive" src="/static/status/memory-day.png">
-					</div>
-				</div>
+				{% include status-pic.html name="cpu" %}
+				{% include status-pic.html name="memory" %}
 			</div>
 			<h3 id="syncing-status"># 同步状态</h3>
 			<table class="table table-condensed flat-md">