暗色主题

README.md

@@ -69,15 +69,14 @@
 + [x] 运行 python php nodejs 块
 + [x] 大纲展示
 + [x] 同步滚动
++ [x] 暗色主题
 + [ ] 运行代码支持图表生成
-+ [ ] 增加 rss 抓取
 + [ ] ~~认证，// 如有需要使用 nginx~~
 + [ ] 全文查找 Ctrl + p
-+ [ ] 微信结合
 + [ ] ~~git 备份，// 使用 OneDrive 同步备份~~
 + [ ] 标签
 + [ ] 移动端展示
 
-![截图](./screenshot.png)
-![截图](./screenshot2.png)
-![截图](./screenshot3.png)
+![截图](./1.png)
+![截图](./2.png)
+![截图](./3.png)

frontend/src/App.vue

@@ -17,4 +17,39 @@ export default {
 </script>
 
 <style>
+* {
+  outline: none;
+}
+
+::selection {
+  background: #d3d3d3;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.08);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+@media screen {
+  body {
+    background: #403e3e;
+  }
+}
 </style>

frontend/src/components/Tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside>
+  <aside class="side">
     <TreeNode
       v-for="item in tree"
       :slected-file="file"
@@ -64,18 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.markdown-body {
-  box-sizing: border-box;
-  min-width: 200px;
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 45px;
-  width: 50vw;
-}
-
-@media (max-width: 767px) {
-  .markdown-body {
-    padding: 15px;
-  }
+.side {
+  color: #ddd;
 }
 </style>

frontend/src/components/TreeNode.vue

@@ -2,7 +2,7 @@
   <div class="tree-node">
     <details ref="dir" :open="item.path === '/'" v-if="item.type === 'dir'">
       <summary
-        :style="{background: selected ? '#eee' : 'none'}"
+        :style="{background: selected ? '#313131' : 'none'}"
         @dblclick="createFile()"
         @contextmenu.ctrl.prevent="renameFile"
         @contextmenu.shift.prevent="deleteFile"> {{ item.name }} </summary>
@@ -20,7 +20,7 @@
       @click="select(item)"
       @contextmenu.ctrl.prevent="renameFile"
       @contextmenu.shift.prevent="deleteFile"
-      :style="{background: selected ? '#53ddf3' : 'none'}"> {{ item.name }} </div>
+      :style="{background: selected ? '#313131' : 'none'}"> {{ item.name }} </div>
   </div>
 </template>
 

frontend/src/components/View.vue

@@ -159,6 +159,33 @@ export default {
 </script>
 
 <style scoped>
+@media screen {
+  .markdown-body {
+    color: #ccc;
+  }
+
+  .markdown-body /deep/ tr {
+    background: inherit;
+  }
+
+  .markdown-body /deep/ * {
+    border-color: #8b8d90;
+    background: inherit;
+  }
+
+  .markdown-body /deep/ table tr:nth-child(2n),
+  .markdown-body /deep/ pre
+  {
+    background: #333030;
+  }
+
+  .markdown-body /deep/ input,
+  .markdown-body /deep/ img
+  {
+    filter: brightness(70%);
+  }
+}
+
 .view {
   box-sizing: border-box;
   min-width: 200px;
@@ -169,16 +196,31 @@ export default {
   position: relative;
 }
 
+button {
+  background: #333030;
+  border: 0;
+  padding: 5px 10px;
+  color: #ccc;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+button:hover {
+  background: #252525;
+}
+
 .outline {
   position: fixed;
   right: 3em;
-  background: #eee;
+  background: #333030;
+  color: #ccc;
   font-size: 14px;
   max-height: 3.2em;
   max-width: 2em;
   overflow: hidden;
   transition: .1s ease-in-out;
   z-index: 500;
+  border-radius: 2px;
 }
 
 .outline:hover {
@@ -198,7 +240,7 @@ export default {
 }
 
 .outline > .catalog > div:hover {
-  background: #fff;
+  background: #252525;
 }
 
 .convert {

frontend/src/pages/Home.vue

@@ -201,7 +201,8 @@ export default {
 }
 
 .header {
-  background: #89e8e5;
+  background: #4e4e4e;
+  color: #eee;
   line-height: 5vh;
   height: 5vh;
 }