diff --git a/src/style.css b/src/style.css
index 43188c3..a1fb006 100644
--- a/src/style.css
+++ b/src/style.css
@@ -9,8 +9,6 @@
 
   --background-color: #242424;
   --text-color: #3d3d3d;
-  --code-background-color: #f5f5f5;
-  --code-text-color: #333;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -31,8 +29,6 @@ a:hover {
 .dark {
   --background-color: #242424;
   --text-color: rgb(228, 228, 228);
-  --code-background-color: #2d2d2d;
-  --code-text-color: #cccccc;
 }
 
 body {
@@ -94,4 +90,14 @@ button:focus-visible {
 
 p,a,h1,h2,h3,h4,h5,h6 {
   color: var(--text-color);
+}
+
+:root {
+  --pre-background-color: #f5f5f5; /* 光明模式的背景颜色 */
+  --pre-text-color: #333; /* 光明模式的字体颜色 */
+}
+
+.dark {
+  --pre-background-color: #2d2d2d; /* 黑暗模式的背景颜色 */
+  --pre-text-color: #cccccc; /* 黑暗模式的字体颜色 */
 }
\ No newline at end of file
diff --git a/src/views/LinksView.vue b/src/views/LinksView.vue
index e5a6154..432933c 100644
--- a/src/views/LinksView.vue
+++ b/src/views/LinksView.vue
@@ -42,12 +42,12 @@
       <div class="add-link-header">添加友链</div>
       <div class="add-link-content">
         <p>请按照以下格式提交您的友链信息：</p>
-        <pre>
+        <i><pre>
 avatar: "您的头像链接"
 title: "您的博客标题"
 description: "您的博客描述"
 url: "您的博客链接"</pre
-        >
+        ></i>
         <p>
           并发送至：<a href="mailto:links@kisechan.space"
             >links@kisechan.space</a
@@ -131,15 +131,18 @@ export default {
 
 .add-link-content {
   font-size: 1em;
-  color: var(--text-color);
+  background-color: var(--code-background-color);
+  color: var(--code-text-color);
 }
 
 .add-link-content pre {
-  background-color: var(--code-background-color);
-  color: var(--code-text-color);
-  padding: 10px;
   border-radius: 4px;
   overflow-x: auto;
+  font-family: Consolas, Monaco, "Courier New", monospace; /* 使用等宽字体 */
+  font-size: 0.9em; /* 调整字体大小 */
+  line-height: 1.5; /* 调整行高 */
+  color: #698db1;
+  padding: 10px; /* 可选：增加内边距 */
 }
 
 .add-link-content a {