diff --git a/settings.yaml b/settings.yaml
index a71b2692..ad987294 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -2245,6 +2245,14 @@ spec:
               value: dark
             - label: 浅色
               value: light
+        - $formkit: color
+          name: themeLightSkin
+          label: 主题浅色基色
+          value: "#425AEF"
+        - $formkit: color
+          name: themeDarkSkin
+          label: 主题深色基色
+          value: "#f2b94b"
         - $formkit: radio
           name: universe
           label: 深色模式粒子效果
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 85e334bc..85fd9443 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -98,7 +98,7 @@
     --heo-card-btn-bg: #30343f;
     --heo-post-blockquote-bg: #000;
     --heo-post-tabs-bg: #121212;
-    --heo-secondbg: #30343f;
+    --heo-secondbg: #21232a;
     --heo-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
     --heo-card-bg: #1d1e22;
     --heo-card-bg-op: var(--heo-white-op);
@@ -17313,6 +17313,82 @@ img.rss-plan-icon {
     opacity: .6
 }
 
+/* 分页搜索框 */
+.pagination input {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    border: var(--style-border-always);
+    transition: .3s;
+    outline-style: none;
+    font-size: 16px;
+    padding-left: 12px;
+    background: var(--heo-secondbg);
+    color: var(--heo-fontcolor)
+}
+
+.pagination .toPageGroup input:focus,.pagination .toPageGroup:hover input {
+    border: var(--style-border-hover-always);
+    outline-style: none;
+    width: 100px
+}
+
+.toPageGroup {
+    display: flex;
+    position: relative;
+    margin: 0 .3rem
+}
+
+a#toPageButton {
+    display: flex;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    right: 0;
+    top: 0;
+    border-radius: 8px;
+    justify-content: center;
+    align-items: center;
+    transition: .3s;
+    background: var(--heo-card-bg);
+    border: var(--style-border-always);
+    cursor: text;
+    pointer-events: none
+}
+
+.toPageGroup:focus-within a#toPageButton,.toPageGroup:hover a#toPageButton {
+    width: 30px;
+    height: 30px;
+    right: 4px;
+    top: 5px;
+    background: var(--heo-card-bg);
+    border: 1px solid var(--heo-none);
+    border-radius: 4px;
+    opacity: .2
+}
+
+.toPageGroup:focus-within a#toPageButton.haveValue {
+    opacity: 1;
+    cursor: pointer
+}
+
+a#toPageButton.haveValue {
+    opacity: 1!important;
+    cursor: pointer!important;
+    pointer-events: all
+}
+
+a#toPageButton.haveValue:hover {
+    background: var(--heo-theme);
+    color: var(--heo-white)
+}
+
+@media screen and (max-width: 768px) {
+    .toPageGroup {
+        display:none
+    }
+}
+
 
 /*   文章目录样式 */
 a.toc-link {
diff --git a/templates/modules/head.html b/templates/modules/head.html
index 485ca2eb..229f0ef4 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -249,8 +249,8 @@
                 cht_to_chs: "你已切换为简体",
                 day_to_night: "你已切换为深色模式",
                 night_to_day: "你已切换为浅色模式",
-                bgLight: "#49b1f5",
-                bgDark: "#121212",
+                bgLight: "[(${theme.config.style.themeLightSkin})]",
+                bgDark: "[(${theme.config.style.themeDarkSkin})]",
                 position: "top-center",
             },
             prism: {
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 5bdf49f3..625b0092 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -205,6 +205,16 @@
 
 </div>
 
+<style type="text/css" th:inline="css">
+    [data-theme=light] {
+        --heo-theme: [(${theme.config.style.themeLightSkin})];
+    }
+
+    [data-theme=dark] {
+        --heo-theme: [(${theme.config.style.themeDarkSkin})];
+    }
+</style>
+
 <script data-pjax="">