diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ec90c88..12d7767 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -7,6 +7,6 @@
   <span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span>
 </footer>
 <script src="{{ "highlight.min.js" | absURL }}"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<script src="{{ "main.js" | absURL }}"></script>
 </body>
 </html>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5d04a26..f79c35c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -38,6 +38,9 @@
     {{ end }}
   </head>
   <body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
+    {{if ne .Kind `page` }}
+    <div class="list-bg"></div>
+    {{end}}
     <header class="header">
       <nav class="nav">
         {{ if .IsHome }}
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..10d8fe1
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,24 @@
+hljs.initHighlightingOnLoad();
+
+const listBg = document.querySelector('.list-bg');
+
+if (listBg) {
+  const halfAnHour = 1000 * 60 * 30;
+
+  function setListBgStyle() {
+    const now = new Date();
+    const time = now.getHours() + now.getMinutes() / 60;
+
+    let opacity = Math.abs(time - 14);
+    opacity = opacity > 12 ? 10 + Math.abs(opacity - 14) : opacity;
+    opacity = Number((opacity / 12).toFixed(2));
+
+    listBg.setAttribute('style', `opacity: ${opacity}`);
+  }
+
+  requestAnimationFrame(setListBgStyle);
+
+  setInterval(() => {
+    requestAnimationFrame(setListBgStyle);
+  }, halfAnHour);
+}
