From ccf3759fbf211a7654cfd3a6d0e434cdc1fb216c Mon Sep 17 00:00:00 2001
From: Terwer <youweics@sina.com>
Date: Fri, 22 Mar 2019 19:09:27 +0800
Subject: [PATCH 1/3] Admin header style

---
 jvue-admin/src/components/common/MHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jvue-admin/src/components/common/MHeader.vue b/jvue-admin/src/components/common/MHeader.vue
index e40d31a..f15c603 100644
--- a/jvue-admin/src/components/common/MHeader.vue
+++ b/jvue-admin/src/components/common/MHeader.vue
@@ -86,7 +86,7 @@ export default {
 .header-right {
   list-style: none;
   float: right;
-  margin: 0 15px 0 0;
+  margin: 0 35px 0 0;
   color: #7f8c8d;
 }
 

From bdbb91d0fb461db34fce7452c21f7e68b640e2b8 Mon Sep 17 00:00:00 2001
From: Terwer <youweics@sina.com>
Date: Sat, 23 Mar 2019 20:07:11 +0800
Subject: [PATCH 2/3] Change theme

---
 jvue-admin/package.json                      |  1 +
 jvue-front/components/themes/dark/Aside.vue  |  1 +
 jvue-front/components/themes/dark/Header.vue |  3 +-
 jvue-front/package-lock.json                 | 28 +++++--
 jvue-front/pages/about-dark.vue              |  5 +-
 jvue-front/pages/common.css                  | 62 +++++++++++++++
 jvue-front/pages/dark.css                    | 79 ++++++++------------
 jvue-front/pages/default.css                 | 52 +------------
 jvue-front/pages/index-default.vue           |  1 +
 jvue-front/pages/index.vue                   | 13 ++--
 jvue-front/pages/post-dark/_id.vue           | 65 +---------------
 jvue-front/pages/post/_id.vue                | 13 +++-
 12 files changed, 149 insertions(+), 174 deletions(-)
 create mode 100644 jvue-front/pages/common.css

diff --git a/jvue-admin/package.json b/jvue-admin/package.json
index 53a84da..9b0940b 100644
--- a/jvue-admin/package.json
+++ b/jvue-admin/package.json
@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 3001",
+    "dev": "npm run serve",
     "build": "vue-cli-service build",
     "start": "vue-cli-service serve --port 3001 --mode production",
     "lint-cli": "vue-cli-service lint --fix",
diff --git a/jvue-front/components/themes/dark/Aside.vue b/jvue-front/components/themes/dark/Aside.vue
index fc96067..0083bd3 100644
--- a/jvue-front/components/themes/dark/Aside.vue
+++ b/jvue-front/components/themes/dark/Aside.vue
@@ -48,6 +48,7 @@ export default {
 <style scoped>
 #aside {
   background-color: #212121;
+  padding-top: 10px;
 }
 .el-card {
   background-color: #212121;
diff --git a/jvue-front/components/themes/dark/Header.vue b/jvue-front/components/themes/dark/Header.vue
index c0a3888..4a4dfc7 100644
--- a/jvue-front/components/themes/dark/Header.vue
+++ b/jvue-front/components/themes/dark/Header.vue
@@ -20,10 +20,11 @@
       </div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="6">
-      <div class="search">
+      <div class="search s-dark">
         <el-input v-model="s" placeholder="请输入关键字" clearable>
           <el-button
             slot="append"
+            class="s-dark-btn"
             type="primary"
             icon="el-icon-search"
             @click="doSearch"
diff --git a/jvue-front/package-lock.json b/jvue-front/package-lock.json
index 6a650a5..d93737d 100644
--- a/jvue-front/package-lock.json
+++ b/jvue-front/package-lock.json
@@ -4437,11 +4437,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4454,15 +4456,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4565,7 +4570,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4575,6 +4581,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4587,17 +4594,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4614,6 +4624,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4686,7 +4697,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4696,6 +4708,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4801,6 +4814,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/jvue-front/pages/about-dark.vue b/jvue-front/pages/about-dark.vue
index 47ec243..7162843 100644
--- a/jvue-front/pages/about-dark.vue
+++ b/jvue-front/pages/about-dark.vue
@@ -103,9 +103,12 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 @import "./dark.css";
+@import "./common.css";
+</style>
 
+<style lang="scss" scoped>
 .visit {
   font-size: 24px;
 }
diff --git a/jvue-front/pages/common.css b/jvue-front/pages/common.css
new file mode 100644
index 0000000..9eb24d5
--- /dev/null
+++ b/jvue-front/pages/common.css
@@ -0,0 +1,62 @@
+/**
+* 所有主题公共样式
+* 注意：每个主题都要引用这个样式
+*/
+body {
+  font-family: "Microsoft Yahei", Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
+  color: #666 !important;
+}
+body,
+* {
+  box-sizing: border-box;
+}
+body a {
+  text-decoration: none;
+  color: #00a4ff;
+}
+body a:hover {
+  color: orangered;
+}
+.el-header,
+.el-footer {
+  background-color: #fff;
+  color: #333;
+  line-height: 60px;
+  padding: 0;
+  height: auto !important;
+}
+.el-main {
+  background-color: #fff;
+  color: #333;
+  text-align: left;
+  line-height: 45px;
+  padding: 0;
+  overflow: hidden;
+}
+body > .el-container {
+  margin-bottom: 40px;
+}
+.hide {
+  display: none;
+}
+/*!
+* 遮罩层
+*/
+.mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 999999;
+}
+.text-center {
+  text-align: center;
+}
+/*!
+* element-ui 覆盖样式
+*/
+.el-menu{
+  background-color: transparent;
+}
diff --git a/jvue-front/pages/dark.css b/jvue-front/pages/dark.css
index 94fcb6d..3428615 100644
--- a/jvue-front/pages/dark.css
+++ b/jvue-front/pages/dark.css
@@ -7,63 +7,44 @@
  * Tags:blog
  * Version: 1.0
  */
-body {
-  font-family: "Microsoft Yahei", Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
-  color: #666 !important;
-}
-body,
-* {
-  box-sizing: border-box;
-}
-body a {
-  text-decoration: none;
-  color: #00a4ff;
+/*!
+ * 自定义黑色主题
+ * css名称必须有default关键字
+ */
+.el-container-dark{
+  background-color: #181818;
 }
-body a:hover {
-  color: orangered;
+.el-main-dark{
+  background-color: #212121;
 }
-.el-header,
-.el-footer {
+.el-header-dark{
   background-color: #212121;
-  color: #333;
-  line-height: 60px;
-  padding: 0;
-  height: auto !important;
 }
-.el-main {
-  background-color: #181818;
-  color: #333;
-  text-align: left;
-  line-height: 45px;
-  padding: 0;
-  overflow: hidden;
+.el-menu-dark {
+  background-color: #212121 !important;;
 }
-body > .el-container {
-  margin-bottom: 40px;
+.el-menu-dark > .el-submenu .el-submenu__title {
+  background-color: #212121 !important;
 }
-.hide {
-  display: none;
+.s-dark .el-input__inner {
+  color:#f3f3f3;
+  background-color: #212121;
 }
-/*!
-* 遮罩层
-*/
-.mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 999999;
+.s-dark input:-ms-input-placeholder{color:#909399;}/* Internet Explorer 10+ */
+.s-dark input::-webkit-input-placeholder{color:#909399;}/* WebKit browsers */
+.s-dark input::-moz-placeholder{color:#909399;}/* Mozilla Firefox 4 to 18 */
+.s-dark input:-moz-placeholder{color:#909399;}/* Mozilla Firefox 19+ */
+.s-dark-btn {
+  background-color:#212121 !important;
 }
-
-/* 自定义黑色主题 */
-.el-menu{
-  background-color: transparent;
+.s-dark-btn:hover{
+  background-color:#181818 !important;
 }
-.el-menu-dark {
-  background-color: #212121;
+.s-dark-btn span:hover {
+  color: #f3f3f3;
 }
-.el-menu-dark > .el-submenu .el-submenu__title {
-  background-color: #212121 !important;
+@-moz-document url-prefix() {
+  .s-dark-btn {
+    padding: 11.5px 20px !important;
+  }
 }
diff --git a/jvue-front/pages/default.css b/jvue-front/pages/default.css
index 70f7b9d..f3edabb 100644
--- a/jvue-front/pages/default.css
+++ b/jvue-front/pages/default.css
@@ -7,52 +7,8 @@
  * Tags:blog
  * Version: 1.0
  */
-body {
-  font-family: "Microsoft Yahei", Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
-  color: #666 !important;
-}
-body,
-* {
-  box-sizing: border-box;
-}
-body a {
-  text-decoration: none;
-  color: #00a4ff;
-}
-body a:hover {
-  color: orangered;
-}
-.el-header,
-.el-footer {
-  background-color: #fff;
-  color: #333;
-  line-height: 60px;
-  padding: 0;
-  height: auto !important;
-}
-.el-main {
-  background-color: #fff;
-  color: #333;
-  text-align: left;
-  line-height: 45px;
-  padding: 0;
-  overflow: hidden;
-}
-body > .el-container {
-  margin-bottom: 40px;
-}
-.hide {
-  display: none;
-}
 /*!
-* 遮罩层
-*/
-.mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 999999;
-}
+ * 自定义默认主题
+ * css名称必须有default关键字
+ */
+
diff --git a/jvue-front/pages/index-default.vue b/jvue-front/pages/index-default.vue
index 271b66b..a833926 100644
--- a/jvue-front/pages/index-default.vue
+++ b/jvue-front/pages/index-default.vue
@@ -78,5 +78,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "./common.css";
 @import "./default.css";
 </style>
diff --git a/jvue-front/pages/index.vue b/jvue-front/pages/index.vue
index e5641e3..56f34ef 100644
--- a/jvue-front/pages/index.vue
+++ b/jvue-front/pages/index.vue
@@ -1,20 +1,20 @@
 <template>
   <el-container>
-    <el-main>
+    <el-main class="el-container-dark">
       <el-row>
         <el-col :xs="0" :md="2">&nbsp;</el-col>
         <el-col :xs="24" :md="20">
-          <el-main>
+          <el-main class="el-main-dark">
             <el-container>
-              <el-main>
+              <el-main class="el-main-dark">
                 <el-container>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <HeaderTime />
                   </el-header>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <Header />
                   </el-header>
-                  <el-main>
+                  <el-main class="el-main-dark">
                     <Body :post-list="postListArray" />
                   </el-main>
                 </el-container>
@@ -78,5 +78,6 @@ export default {
 </script>
 
 <style lang="scss">
+@import "./common.css";
 @import "./dark.css";
 </style>
diff --git a/jvue-front/pages/post-dark/_id.vue b/jvue-front/pages/post-dark/_id.vue
index 3d7b2d6..a946a2d 100644
--- a/jvue-front/pages/post-dark/_id.vue
+++ b/jvue-front/pages/post-dark/_id.vue
@@ -162,66 +162,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../common.css";
+@import "../dark.css";
 @import "../../plugins/lib/vue-hljs/vs2015.css";
-
-.text-center {
-  text-align: center;
-}
-
-.el-breadcrumb__inner a,
-.el-breadcrumb__inner.is-link {
-  color: #ffcb6b;
-}
-
-#post {
-  margin: 20px;
-  p {
-    color: #f3f3f3;
-  }
-}
-
-#postTitle {
-  a {
-    color: #000;
-    line-height: 1.5;
-    text-decoration: none;
-  }
-  a:hover {
-    color: red;
-  }
-  h1 {
-    color: #f3f3f3;
-    border-bottom: 1px solid #ddd;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 20px 0 10px;
-    padding-bottom: 5px;
-  }
-  h1:hover {
-    color: #ffcb6b;
-  }
-}
-
-#postContent {
-  h1 {
-    color: #c792ea;
-    font-size: 28px;
-    font-weight: bold;
-    line-height: 1.5;
-    margin: 10px 0;
-  }
-  h2 {
-    color: #ffcb6b;
-    font-size: 21px;
-    font-weight: bold;
-    line-height: 1.5;
-    margin: 10px 0;
-  }
-  p {
-    // 图片自适应
-    img {
-      max-width: 100% !important;
-    }
-  }
-}
 </style>
+
+<style lang="scss" scoped></style>
diff --git a/jvue-front/pages/post/_id.vue b/jvue-front/pages/post/_id.vue
index 957e8ac..8cbe378 100644
--- a/jvue-front/pages/post/_id.vue
+++ b/jvue-front/pages/post/_id.vue
@@ -163,9 +163,20 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import "../default.css";
+</style>
+
+<style>
 @import "../../plugins/lib/vue-hljs/vs.css";
+</style>
+
+<style lang="scss" scoped>
+@import "../common.css";
+@import "../default.css";
+</style>
 
+<style lang="scss" scoped>
 #post {
   margin: 20px;
 }

From 64020dc1bd0d9bb8d9f4e1fcb1b8d6ad78686af3 Mon Sep 17 00:00:00 2001
From: Terwer <youweics@sina.com>
Date: Sat, 23 Mar 2019 21:23:16 +0800
Subject: [PATCH 3/3] Style OK

---
 jvue-front/components/themes/dark/Aside.vue   | 17 ++++-
 .../components/themes/dark/PostList.vue       | 22 +++++--
 .../components/themes/default/Aside.vue       | 17 ++++-
 .../components/themes/default/PostList.vue    | 18 ++++-
 jvue-front/pages/about-dark.vue               | 18 ++---
 jvue-front/pages/about.vue                    |  3 +
 jvue-front/pages/dark.css                     | 27 ++++++++
 jvue-front/pages/default.css                  | 12 ++++
 jvue-front/pages/index-default.vue            |  2 +-
 jvue-front/pages/post-dark/_id.vue            | 66 ++++++++++++++++---
 jvue-front/pages/post/_id.vue                 |  4 +-
 jvue-front/plugins/lib/vue-hljs/vs2015.css    | 15 +++--
 12 files changed, 182 insertions(+), 39 deletions(-)

diff --git a/jvue-front/components/themes/dark/Aside.vue b/jvue-front/components/themes/dark/Aside.vue
index 0083bd3..eb8d22f 100644
--- a/jvue-front/components/themes/dark/Aside.vue
+++ b/jvue-front/components/themes/dark/Aside.vue
@@ -12,9 +12,20 @@
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
             <div>
-              <h2 :class="post.thumbnails.length > 0 ? 'has-image-title' : ''">
-                {{ post.title === "" ? "暂无标题" : post.title }}
-              </h2>
+              <nuxt-link
+                class="aside-link-dark"
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2
+                  :class="post.thumbnails.length > 0 ? 'has-image-title' : ''"
+                >
+                  {{ post.title === "" ? "暂无标题" : post.title }}
+                </h2>
+              </nuxt-link>
             </div>
           </el-col>
         </el-row>
diff --git a/jvue-front/components/themes/dark/PostList.vue b/jvue-front/components/themes/dark/PostList.vue
index 6d82ab7..9ac8357 100644
--- a/jvue-front/components/themes/dark/PostList.vue
+++ b/jvue-front/components/themes/dark/PostList.vue
@@ -11,8 +11,16 @@
             <img :src="post.thumbnails[0]" class="image" alt="image" />
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
-            <div>
-              <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+            <div class="post-list-title-dark">
+              <nuxt-link
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+              </nuxt-link>
               <div class="bottom clearfix">
                 <div class="page desc">
                   {{ post.desc === "" ? "暂无简介" : post.desc }}
@@ -39,7 +47,9 @@
                     : '/post-dark/' + post.name + '.html'
                 "
               >
-                <el-button type="text" class="read-more">查看全文</el-button>
+                <el-button type="text" class="read-more-dark"
+                  >查看全文</el-button
+                >
               </nuxt-link>
             </div>
           </el-col>
@@ -92,13 +102,17 @@ export default {
   line-height: 12px;
 }
 
-.read-more {
+.read-more-dark {
   padding: 0;
   margin-top: 15px;
   float: left;
   color: #e78c6c;
 }
 
+.read-more-dark:hover {
+  color: #ffcb6b;
+}
+
 .image {
   width: 100%;
   max-height: 150px;
diff --git a/jvue-front/components/themes/default/Aside.vue b/jvue-front/components/themes/default/Aside.vue
index 3c4178c..1797811 100644
--- a/jvue-front/components/themes/default/Aside.vue
+++ b/jvue-front/components/themes/default/Aside.vue
@@ -12,9 +12,20 @@
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
             <div>
-              <h2 :class="post.thumbnails.length > 0 ? 'has-image-title' : ''">
-                {{ post.title === "" ? "暂无标题" : post.title }}
-              </h2>
+              <nuxt-link
+                class="aside-link"
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2
+                  :class="post.thumbnails.length > 0 ? 'has-image-title' : ''"
+                >
+                  {{ post.title === "" ? "暂无标题" : post.title }}
+                </h2>
+              </nuxt-link>
             </div>
           </el-col>
         </el-row>
diff --git a/jvue-front/components/themes/default/PostList.vue b/jvue-front/components/themes/default/PostList.vue
index df09de4..c3acb16 100644
--- a/jvue-front/components/themes/default/PostList.vue
+++ b/jvue-front/components/themes/default/PostList.vue
@@ -11,8 +11,16 @@
             <img :src="post.thumbnails[0]" class="image" alt="image" />
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
-            <div>
-              <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+            <div class="post-list-title">
+              <nuxt-link
+                :to="
+                  post.name === ''
+                    ? '/post/' + post.id + '.html'
+                    : '/post/' + post.name + '.html'
+                "
+              >
+                <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+              </nuxt-link>
               <div class="bottom clearfix">
                 <div class="page">
                   {{ post.desc === "" ? "暂无简介" : post.desc }}
@@ -39,7 +47,7 @@
                     : '/post/' + post.name + '.html'
                 "
               >
-                <el-button type="text" class=".read-more">查看全文</el-button>
+                <el-button type="text" class="read-more">查看全文</el-button>
               </nuxt-link>
             </div>
           </el-col>
@@ -92,6 +100,10 @@ export default {
   float: left;
 }
 
+.read-more:hover {
+  color: #212121;
+}
+
 .image {
   width: 100%;
   max-height: 150px;
diff --git a/jvue-front/pages/about-dark.vue b/jvue-front/pages/about-dark.vue
index 7162843..1cb0475 100644
--- a/jvue-front/pages/about-dark.vue
+++ b/jvue-front/pages/about-dark.vue
@@ -1,21 +1,21 @@
 <template>
   <el-container>
-    <el-main>
+    <el-main class="el-container-dark">
       <el-row>
         <el-col :xs="0" :md="2">&nbsp;</el-col>
         <el-col :xs="24" :md="20">
-          <el-main>
+          <el-main class="el-main-dark">
             <el-container>
-              <el-main>
+              <el-main class="el-main-dark">
                 <el-container>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <HeaderTime />
                   </el-header>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <Header />
                   </el-header>
-                  <el-main>
-                    <div class="about">
+                  <el-main class="el-main-dark">
+                    <div class="about about-dark">
                       <div class="visit">
                         谢谢您，您是第
                         <img
@@ -103,9 +103,9 @@ export default {
 };
 </script>
 
-<style>
-@import "./dark.css";
+<style lang="scss">
 @import "./common.css";
+@import "./dark.css";
 </style>
 
 <style lang="scss" scoped>
diff --git a/jvue-front/pages/about.vue b/jvue-front/pages/about.vue
index f0501db..adab455 100644
--- a/jvue-front/pages/about.vue
+++ b/jvue-front/pages/about.vue
@@ -104,8 +104,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "./common.css";
 @import "./default.css";
+</style>
 
+<style lang="scss" scoped>
 .visit {
   font-size: 24px;
 }
diff --git a/jvue-front/pages/dark.css b/jvue-front/pages/dark.css
index 3428615..f01ac6f 100644
--- a/jvue-front/pages/dark.css
+++ b/jvue-front/pages/dark.css
@@ -48,3 +48,30 @@
     padding: 11.5px 20px !important;
   }
 }
+.about-dark{
+  border: solid 1px #f3f3f3;
+  border-radius: 4px;
+  padding: 10px;
+}
+.post-dark{
+  border: solid 1px #f3f3f3;
+  border-radius: 4px;
+  padding: 10px;
+  margin: 15px;
+}
+.post-dark .el-breadcrumb__inner a,
+.post-dark .el-breadcrumb__inner.is-link {
+  color: #ffcb6b;
+}
+.post-list-title-dark h2{
+  color: #c792ea;
+}
+.post-list-title-dark h2:hover{
+  color: #ffcb6b;
+}
+.aside-link-dark h2{
+  color: #c792ea;
+}
+.aside-link-dark h2:hover{
+  color: #ffcb6b;
+}
diff --git a/jvue-front/pages/default.css b/jvue-front/pages/default.css
index f3edabb..64d62fa 100644
--- a/jvue-front/pages/default.css
+++ b/jvue-front/pages/default.css
@@ -11,4 +11,16 @@
  * 自定义默认主题
  * css名称必须有default关键字
  */
+.post-list-title h2{
+  color: #409EFF;
+}
+.post-list-title h2:hover{
+  color: #000000;
+}
+.aside-link h2{
+  color: #409EFF;
+}
+.aside-link h2:hover{
+  color: #000000;
+}
 
diff --git a/jvue-front/pages/index-default.vue b/jvue-front/pages/index-default.vue
index a833926..c39847f 100644
--- a/jvue-front/pages/index-default.vue
+++ b/jvue-front/pages/index-default.vue
@@ -77,7 +77,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "./common.css";
 @import "./default.css";
 </style>
diff --git a/jvue-front/pages/post-dark/_id.vue b/jvue-front/pages/post-dark/_id.vue
index a946a2d..b6906af 100644
--- a/jvue-front/pages/post-dark/_id.vue
+++ b/jvue-front/pages/post-dark/_id.vue
@@ -1,20 +1,20 @@
 <template>
   <el-container>
-    <el-main>
+    <el-main class="el-container-dark">
       <el-row>
         <el-col :xs="0" :md="2">&nbsp;</el-col>
         <el-col :xs="24" :md="20">
-          <el-main>
+          <el-main class="el-main-dark">
             <el-container>
-              <el-main>
+              <el-main class="el-main-dark">
                 <el-container>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <HeaderTime />
                   </el-header>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <Header />
                   </el-header>
-                  <el-main>
+                  <el-main class="el-main-dark">
                     <div id="post" class="post-dark">
                       <!-- 导航 -->
                       <el-breadcrumb separator="/">
@@ -29,7 +29,7 @@
 
                       <!-- 文章标题 -->
                       <div id="postTitle">
-                        <router-link
+                        <nuxt-link
                           :to="
                             postObj.name === ''
                               ? '/post-dark/' + postObj.id + '.html'
@@ -39,7 +39,7 @@
                           <h1>
                             {{ postObj.title }}
                           </h1>
-                        </router-link>
+                        </nuxt-link>
                       </div>
 
                       <!-- 文章详情 -->
@@ -165,6 +165,56 @@ export default {
 @import "../common.css";
 @import "../dark.css";
 @import "../../plugins/lib/vue-hljs/vs2015.css";
+.post-dark {
+  margin: 20px;
+  p {
+    color: #f3f3f3;
+  }
+}
+.post-dark #postTitle {
+  a {
+    color: #000;
+    line-height: 1.5;
+    text-decoration: none;
+  }
+  a:hover {
+    color: red;
+  }
+  h1 {
+    color: #f3f3f3;
+    border-bottom: 1px solid #ddd;
+    font-size: 14px;
+    font-weight: bold;
+    margin: 20px 0 10px;
+    padding-bottom: 5px;
+  }
+  h1:hover {
+    color: #ffcb6b;
+  }
+}
+
+.post-dark #postContent {
+  h1 {
+    color: #c792ea;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.5;
+    margin: 10px 0;
+  }
+  h2 {
+    color: #ffcb6b;
+    font-size: 21px;
+    font-weight: bold;
+    line-height: 1.5;
+    margin: 10px 0;
+  }
+  p {
+    // 图片自适应
+    img {
+      max-width: 100% !important;
+    }
+  }
+}
 </style>
 
 <style lang="scss" scoped></style>
diff --git a/jvue-front/pages/post/_id.vue b/jvue-front/pages/post/_id.vue
index 8cbe378..54b56cc 100644
--- a/jvue-front/pages/post/_id.vue
+++ b/jvue-front/pages/post/_id.vue
@@ -29,7 +29,7 @@
 
                       <!-- 文章标题 -->
                       <div id="postTitle">
-                        <router-link
+                        <nuxt-link
                           :to="
                             postObj.name === ''
                               ? '/post/' + postObj.id + '.html'
@@ -39,7 +39,7 @@
                           <h1>
                             {{ postObj.title }}
                           </h1>
-                        </router-link>
+                        </nuxt-link>
                       </div>
 
                       <!-- 文章详情 -->
diff --git a/jvue-front/plugins/lib/vue-hljs/vs2015.css b/jvue-front/plugins/lib/vue-hljs/vs2015.css
index 6f5b093..25df3b0 100644
--- a/jvue-front/plugins/lib/vue-hljs/vs2015.css
+++ b/jvue-front/plugins/lib/vue-hljs/vs2015.css
@@ -1,10 +1,13 @@
 .hljs {
-    font-family: "dejavu sans mono","Fira Code",Menlo,Monaco,Consolas,"Courier New",monospace;
-    display: block;
-    overflow-x: auto;
-    padding: .5em;
-    background: #212121;
-    color: #DCDCDC
+  font-family: "dejavu sans mono","Fira Code",Menlo,Monaco,Consolas,"Courier New",monospace;
+  display: block;
+  overflow-x: auto;
+  padding: .5em;
+  background: #181818;
+  color: #DCDCDC;
+  border: solid 1px #181818;
+  border-radius: 5px;
+  line-height: 1.6;
 }
 
 .hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name {