diff --git a/themes/github.css b/themes/github.css
index 5a4d5c8..d08c38c 100644
--- a/themes/github.css
+++ b/themes/github.css
@@ -1,11 +1,9 @@
-@include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
+:root {
+    --side-bar-bg-color: #fafafa;
+    --control-text-color: #777;
+}
 
-/**
- * css forked from https://github.com/GitbookIO/gitbook 
- * www.gitbook.com
- * Apache License
- * https://github.com/GitbookIO/gitbook/blob/master/LICENSE
- **/
+@include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
 
 @font-face {
     font-family: 'Open Sans';
@@ -222,10 +220,10 @@ blockquote blockquote {
 }
 table {
     padding: 0;
+    word-break: initial;
 }
 table tr {
     border-top: 1px solid #cccccc;
-    background-color: white;
     margin: 0;
     padding: 0;
 }
@@ -345,7 +343,6 @@ tt {
 }
 .md-image>.md-meta {
     border: 1px solid #ddd;
-    background-color: #f8f8f8;
     border-radius: 3px;
     font-family: Consolas, "Liberation Mono", Courier, monospace;
     padding: 2px 4px 0px 4px;
@@ -362,6 +359,10 @@ tt {
     padding-bottom:20px;
 }
 
+.sidebar-tabs {
+    border-bottom: none;
+}
+
 #typora-quick-open {
     border: 1px solid #ddd;
     background-color: #f8f8f8;
@@ -374,6 +375,10 @@ tt {
     border-width: 1px;
 }
 
+#md-notification:before {
+    top: 10px;
+}
+
 /** focus mode */
 .on-focus-mode blockquote {
     border-left-color: rgba(85, 85, 85, 0.12);
@@ -381,4 +386,14 @@ tt {
 
 header, .context-menu, .megamenu-content, footer{
     font-family: "Segoe UI", "Arial", sans-serif;
-}
\ No newline at end of file
+}
+
+.file-node-content:hover .file-node-icon,
+.file-node-content:hover .file-node-open-state{
+    visibility: visible;
+}
+
+.mac-seamless-mode #typora-sidebar {
+    background-color: #fafafa;
+    background-color: var(--side-bar-bg-color);
+}
diff --git a/themes/gothic.css b/themes/gothic.css
index 44ec083..0e3386b 100644
--- a/themes/gothic.css
+++ b/themes/gothic.css
@@ -1,8 +1,6 @@
 @include-when-export url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic);
 @include-when-export url(http://fonts.googleapis.com/css?family=Raleway:600,400&subset=latin,latin-ext);
 
-
-
 @charset "UTF-8";
 @font-face {
     font-family: 'TeXGyreAdventor';
@@ -38,6 +36,20 @@
 	src: url(./gothic/texgyreadventor-bolditalic.otf);
 }
 
+:root {
+	--window-border: none;
+	--typora-center-window-title: true;
+	--active-file-bg-color: #f3f3f3;
+	--bg-color: #fcfcfc;
+	--control-text-color: #777;
+}
+
+.mac-seamless-mode #typora-sidebar {
+	top: var(--mac-title-bar-height);
+	padding-top: 0;
+	height: calc(100% - var(--mac-title-bar-height));
+}
+
 html,
 body,
 #write{
@@ -320,11 +332,12 @@ blockquote p {
 	padding-top: 3em;
     margin-top: -1.5em;
 	color: #999;
-	border-left: 1000px #f8f8f8 solid;
-	margin-left: -1000px;
-	border-right: 1000px #f8f8f8 solid;
-	margin-right: -1000px;
-	margin-bottom: 2em;
+	
+	width: 100vw;
+	max-width: calc(100% + 60px);
+	margin-left: -30px;
+	border-left: 30px #f8f8f8 solid;
+	border-right: 30px #f8f8f8 solid;
 }
 .MathJax_Display {
 	font-size: 0.9em;
@@ -373,4 +386,20 @@ p.mathjax-block,
 
 .megamenu-menu-panel .btn {
 	border: 1px solid #ccc;
+}
+
+#typora-sidebar {
+	box-shadow: none;
+}
+
+.file-list-item ,
+.show-folder-name .file-list-item {
+	padding-top: 20px;
+	padding-bottom: 20px;
+	line-height: 20px;
+}
+
+.file-list-item-summary {
+	height: 40px;
+	line-height: 20px;
 }
\ No newline at end of file
diff --git a/themes/newsprint.css b/themes/newsprint.css
index 871347b..41e2677 100644
--- a/themes/newsprint.css
+++ b/themes/newsprint.css
@@ -31,6 +31,14 @@
     src: local('PT Serif'), local('PTSerif-BoldItalic'), url('./newsprint/PT_Serif-Web-BoldItalic.ttf')
 }
 
+:root {
+	--active-file-bg-color: #dadada;
+	--active-file-bg-color: rgba(32, 43, 51, 0.63);
+	--active-file-text-color: white;
+	--bg-color: #f3f2ee;
+	--text-color: #1f0909;
+}
+
 html {
 	font-size: 16px;
 }
@@ -293,7 +301,7 @@ hr {
 	content: '\221A';
 	display: inline-block;
 	width: 1.25rem;
-  	height: 1.5rem;
+  	height: 1.6rem;
 	vertical-align: middle;
 	text-align: center;
 	color: #ddd;
@@ -319,34 +327,30 @@ hr {
 	color: #9B5146;
 }
 
-.md-expand.md-image>.md-meta {
-	background-color: rgba(255, 255, 255, 0.65);
-}
-
 .md-image>.md-meta{
 	font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
 }
 
 
 #write>h3.md-focus:before{
-	left: -2.5rem;
+	left: -1.5rem;
 	color:#999;
 	border-color:#999;
 }
 #write>h4.md-focus:before{
-	left: -2.5rem;
+	left: -1.5rem;
 	top: .25rem;
 	color:#999;
 	border-color:#999;
 }
 #write>h5.md-focus:before{
-	left: -2.5rem;
+	left: -1.5rem;
 	top: .0.3125rem;
 	color:#999;
 	border-color:#999;
 }
 #write>h6.md-focus:before{
-	left: -2.5rem;
+	left: -1.5rem;
 	top: 0.3125rem;
 	color:#999;
 	border-color:#999;
@@ -366,19 +370,19 @@ hr {
 	background-color: #f3f2ee;
 }
 
-#outline-dropmenu {
+#typora-sidebar {
 	background-color: #f3f2ee;
 	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
   	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
 }
 
-.pin-outline #outline-dropmenu {
+.pin-outline #typora-sidebar {
 	background: inherit;
 	box-shadow: none;
 	border-right: 1px dashed;
 }
 
-.pin-outline #outline-dropmenu:hover .outline-title-wrapper {
+.pin-outline #typora-sidebar:hover .outline-title-wrapper {
 	border-left:1px dashed;
 }
 
@@ -465,6 +469,10 @@ header, .context-menu, .megamenu-content, footer {
 	background-color: #D2D1D1;
 }
 
+.btn-default {
+	background-color: transparent;
+}
+
 .typora-sourceview-on #toggle-sourceview-btn,
 .show-word-count #footer-word-count {
 	background: #c7c5c5;
@@ -478,3 +486,38 @@ header, .context-menu, .megamenu-content, footer {
 	margin-left: -1ch;
 	margin-top: 24px;
 }
+
+.file-list-item-file-name {
+	font-weight: initial;
+}
+
+.file-list-item-summary {
+	opacity: 1;
+}
+
+.file-list-item {
+	color: #777;
+}
+
+.file-list-item.active {
+	background-color: inherit;
+	color: black;
+}
+
+.file-list-item.active .file-list-item-file-name  {
+	font-weight: bold;
+}
+
+.file-list-item{
+    opacity:1 !important;
+}
+
+.file-library-node.active>.file-node-background{
+	background-color: rgba(32, 43, 51, 0.63);
+	background-color: var(--active-file-bg-color);
+}
+
+.file-tree-node.active>.file-node-content{
+	color: white;
+	color: var(--active-file-text-color);
+}
diff --git a/themes/night.css b/themes/night.css
index c0c9e04..de1b561 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -1,5 +1,27 @@
 @import "night/mermaid.dark.css";
 
+:root {
+    --bg-color:  #363B40;
+    --side-bar-bg-color: #2E3033;
+    --text-color: #b8bfc6;
+    --code-block-bg-color: inherit;//#f8f8f8;
+
+    --item-hover-bg-color: #0a0d16;
+    --control-text-color: #b7b7b7;
+    --control-text-hover-color: #eee;
+    --window-border: 1px dashed #9b9b9b;
+
+    --active-file-bg-color: rgb(34, 34, 34);
+    --active-file-border-color: #8d8df0;
+
+    --primary-color: #a3d5fe;
+
+    --active-file-text-color: white;
+    --item-hover-bg-color: #70717d;
+    --item-hover-text-color: white;
+    --primary-color: #6dc1e7;
+}
+
 html {
     font-size: 16px;
 }
@@ -9,6 +31,7 @@ body {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     background: #363B40;
+    background: var(--bg-color);
     fill: currentColor;
 }
 
@@ -66,12 +89,13 @@ h6 {
     word-wrap: break-word;
     margin: 0;
     padding: 0;
+    color: #DEDEDE
 }
 
 h1 {
-    font-size: 2.25rem;
+    font-size: 2.5rem;
     /* 36px */
-    line-height: 2.5rem;
+    line-height: 2.75rem;
     /* 40px */
     margin-bottom: 1.5rem;
     /* 24px */
@@ -79,50 +103,93 @@ h1 {
 }
 
 h2 {
-    font-size: 1.5rem;
+    font-size: 1.63rem;
     /* 24px */
     line-height: 1.875rem;
     /* 30px */
     margin-bottom: 1.5rem;
     /* 24px */
     letter-spacing: -1px;
+    font-weight: bold;
 }
 
 h3 {
-    font-size: 1.125rem;
+    font-size: 1.17rem;
     /* 18px */
     line-height: 1.5rem;
     /* 24px */
     margin-bottom: 1.5rem;
     /* 24px */
     letter-spacing: -1px;
+    font-weight: bold;
 }
 
 h4 {
-    font-size: 1rem;
+    font-size: 1.12rem;
     /* 16px */
     line-height: 1.375rem;
     /* 22px */
     margin-bottom: 1.5rem;
     /* 24px */
+    color: white;
 }
 
 h5 {
-    font-size: 1rem;
+    font-size: 0.97rem;
     /* 16px */
     line-height: 1.25rem;
     /* 22px */
     margin-bottom: 1.5rem;
     /* 24px */
+    font-weight: bold;
 }
 
 h6 {
-    font-size: 1rem;
+    font-size: 0.93rem;
     /* 16px */
     line-height: 1rem;
     /* 16px */
     margin-bottom: 0.75rem;
-    font-weight: bold;
+    color: white;
+}
+
+@media (min-width: 980px) {
+    #write h3:before,
+    #write h4:before,
+    #write h5:before,
+    #write h6:before {
+        color: #ddd;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        position: absolute;
+        left: -1.642857143rem;
+        top: .357142857rem;
+        float: left;
+        font-size: 9px;
+        padding-left: 2px;
+        padding-right: 2px;
+        vertical-align: bottom;
+        font-weight: normal;
+        line-height: normal;
+    }
+
+    #write h3:before {
+        content: 'h3';
+    }
+
+    #write h4:before {
+        content: 'h4';
+    }
+
+    #write h5:before {
+        content: 'h5';
+        top: 0px;
+    }
+
+    #write h6:before {
+        content: 'h6';
+        top: 0px;
+    }
 }
 
 a {
@@ -138,6 +205,11 @@ a:focus {
     outline: thin dotted;
 }
 
+sup.md-footnote {
+    background-color: #555;
+    color: #ddd;
+}
+
 p {
     -ms-word-wrap: break-word;
     word-wrap: break-word;
@@ -282,15 +354,6 @@ h1 {
     margin-top: 2em;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: #DEDEDE
-}
-
 a {
     color: #e0e0e0;
     text-decoration: underline;
@@ -300,6 +363,10 @@ a:hover {
     color: #fff;
 }
 
+.md-inline-math script {
+    color: #81b1db;
+}
+
 b,
 th,
 dt,
@@ -464,7 +531,7 @@ td {
 }
 
 .cm-s-inner .cm-builtin {
-    color: #694ea7;
+    color: #f3b3f8;
 }
 
 .cm-s-inner .cm-bracket {
@@ -537,7 +604,7 @@ td {
     border-bottom: 1px dashed #ccc;
     background: transparent;
     padding-bottom: 0.6em;
-    line-height: 1.2em;
+    line-height: 1.6em;
 }
 
 .btn,
@@ -557,10 +624,10 @@ td {
 
 .md-image>.md-meta {
     color: #BBBBBB;
+    background: transparent;
 }
 
 .md-expand.md-image>.md-meta {
-    background: transparent;
     color: #DDD;
 }
 
@@ -572,7 +639,8 @@ td {
     border-radius: 0px;
     color: #888;
     text-decoration: underline;
-    left: -1.875rem;
+    left: -1.4rem;
+    top: 0.2rem;
 }
 
 #write>h3.md-focus:before {
@@ -591,33 +659,38 @@ td {
     background-color: #363B40;
 }
 
-#outline-dropmenu .btn:hover,
-#outline-dropmenu .btn:focus,
+.dropdown-menu .btn:hover,
+.dropdown-menu .btn:focus,
 .md-toc .btn:hover,
 .md-toc .btn:focus {
     color: white;
+    background: black;
 }
 
-#outline-dropmenu {
+#toc-dropmenu {
     background: rgba(50, 54, 59, 0.93);
     border: 1px solid rgba(253, 253, 253, 0.15);
 }
 
-#outline-dropmenu .divider {
-    background-color: #b8bfc6;
+#toc-dropmenu .divider {
+    background-color: #9b9b9b;
 }
 
 .outline-expander:before {
     top: 2px;
 }
 
-.pin-outline #outline-dropmenu {
-    background: inherit;
+#typora-sidebar {
     box-shadow: none;
     border-right: 1px dashed;
+    border-right: none;
+}
+
+.sidebar-tabs {
+    border-bottom:0;
 }
 
-.pin-outline #outline-dropmenu:hover .outline-title-wrapper {
+#typora-sidebar:hover .outline-title-wrapper {
     border-left: 1px dashed;
 }
 
@@ -642,6 +715,11 @@ h6.md-focus .md-attr,
     display: inline;
 }
 
+.md-comment {
+    color: #5a95e3;
+    opacity: 1;
+}
+
 .md-inline-math g,
 .md-inline-math svg {
     stroke: #b8bfc6 !important;
@@ -657,7 +735,7 @@ h6.md-focus .md-attr,
 }
 
 .modal-content {
-    background: #292c2f;
+    background: var(--bg-color);
     border: 0;
 }
 
@@ -680,7 +758,7 @@ h6.md-focus .md-attr,
 }
 
 .modal-content .btn-primary {
-    border-color: #6dc1e7;
+    border-color: var(--primary-color);
 }
 
 .md-table-resize-popover {
@@ -701,11 +779,6 @@ h6.md-focus .md-attr,
     background-color: #42464A;
 }
 
-.context-menu.dropdown-menu > li > a:hover, 
-.context-menu.dropdown-menu > li > a:focus {
-    background-color: inherit;
-}
-
 .context-menu.dropdown-menu .divider {
     background-color: #777777;
 }
@@ -730,15 +803,7 @@ footer {
 
 .megamenu-content,
 .megamenu-opened header {
-    background: #292c2f;
-}
-
-.megamenu-menu-list li a.active,
-.megamenu-menu-list li a:hover,
-.long-btn:hover {
-    background-color: #4182c4;
-    color: white;
-    border-color: #4182c4;
+    background: var(--bg-color);
 }
 
 .megamenu-menu-panel h2,
@@ -819,15 +884,15 @@ footer {
     background-color: inherit;
 }
 
-::-webkit-scrollbar {
+.typora-node::-webkit-scrollbar {
     width: 5px;
 }
 
-::-webkit-scrollbar-thumb:vertical {
+.typora-node::-webkit-scrollbar-thumb:vertical {
     background: rgba(250, 250, 250, 0.3);
 }
 
-::-webkit-scrollbar-thumb:vertical:active {
+.typora-node::-webkit-scrollbar-thumb:vertical:active {
     background: rgba(250, 250, 250, 0.5);
 }
 
@@ -836,7 +901,7 @@ footer {
 }
 
 #top-titlebar, #top-titlebar * {
-    color: white;
+    color: var(--item-hover-text-color);
 }
 
 .typora-sourceview-on #toggle-sourceview-btn,
@@ -888,3 +953,63 @@ footer {
 .md-diagram-panel-error {
     color: #f1908e;
 }
+
+.active-tab-files #info-panel-tab-file,
+.active-tab-files #info-panel-tab-file:hover,
+.active-tab-outline #info-panel-tab-outline,
+.active-tab-outline #info-panel-tab-outline:hover {
+    color: #eee;
+}
+
+.sidebar-footer-item:hover,
+.footer-item:hover {
+    background: inherit;
+    color: white;
+}
+
+.ty-side-sort-btn.active,
+.ty-side-sort-btn:hover,
+.selected-folder-menu-item a:after {
+    color: white;
+}
+
+#sidebar-files-menu {
+    border:solid 1px;
+    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.79);
+    background-color: var(--bg-color);
+}
+
+.file-list-item {
+    border-bottom:none;
+}
+
+.file-list-item-summary {
+    opacity: 1;
+}
+
+.file-list-item.active:first-child {
+    border-top: none;
+}
+
+.sidebar-footer {
+    border-top: 1px solid #555;
+}
+
+.file-node-background {
+    height: 32px;
+}
+
+.file-library-node.active>.file-node-content,
+.file-list-item.active {
+    color: white;
+    color: var(--active-file-text-color);
+}
+
+.file-library-node.active>.file-node-background{
+    background-color: rgb(34, 34, 34);
+    background-color: var(--active-file-bg-color);
+}
+.file-list-item.active {
+    background-color: rgb(34, 34, 34);
+    background-color: var(--active-file-bg-color);
+}
\ No newline at end of file
diff --git a/themes/pixyll.css b/themes/pixyll.css
index db20779..f7c70f1 100644
--- a/themes/pixyll.css
+++ b/themes/pixyll.css
@@ -1,6 +1,9 @@
 @import-when-export url(http://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic&subset=latin-ext);
 @import-when-export url(http://fonts.googleapis.com/css?family=Lato:900,300&subset=latin-ext);
 
+:root {
+	--control-text-color: #777;
+}
 
 /**
  * forked from pixyll.com
@@ -313,15 +316,19 @@ a {
 #write {
 	padding-top: 2rem;
 }
+
 #write pre.md-meta-block {
 	min-height: 35px;
 	padding: 0.5em 1em;
 	white-space: pre;
 	border: 0px;
-	border-left: 1000px #f8f8f8 solid;
-	margin-left: -1000px;
-	border-right: 1000px #f8f8f8 solid;
-	margin-right: -1000px;
+
+	border-left: 30px #f8f8f8 solid;
+	border-right: 30px #f8f8f8 solid;
+	width: 100vw;
+	max-width: calc(100% + 60px);
+
+	margin-left: -30px;
 	margin-bottom: 2em;
 	margin-top: -2010px;
 	padding-top: 2000px;
@@ -424,12 +431,15 @@ a {
 	margin-top: 19px;
 }
 
-#outline-dropmenu {
-	background-color:white;
+#typora-sidebar {
 	font-size:1rem !important;
 }
 
-#outline-content li, #outline-content ul {
+.html-for-mac #typora-sidebar {
+	background-color:white;
+}
+
+.outline-content li, .outline-content ul {
 	font-size:1rem !important;
 }
 
@@ -478,6 +488,9 @@ a {
 	color: #777777;
 }
 
+.preference-item-hint {
+	margin-top: 16px;
+}
 
 .md-diagram-panel {
 	margin-top: 24px;
diff --git a/themes/whitey.css b/themes/whitey.css
index ba16dc3..2c82845 100644
--- a/themes/whitey.css
+++ b/themes/whitey.css
@@ -195,10 +195,13 @@ table tbody+tbody {
 	background: #f8f8f8;
 	border: 0px;
 	color: #999;
-	border-left: 1000px #f8f8f8 solid;
-	margin-left: -1000px;
-	border-right: 1000px #f8f8f8 solid;
-	margin-right: -1000px;
+	
+	width: 100vw;
+	max-width: calc(100% + 60px);
+	margin-left: -30px;
+	border-left: 30px #f8f8f8 solid;
+	border-right: 30px #f8f8f8 solid;
+
 	margin-bottom: 2em;
 	margin-top: -1.3333333333333rem;
 	padding-top: 26px;
@@ -242,6 +245,11 @@ table tbody+tbody {
     color: #6A6A6A;
 }
 
+.html-for-mac #typora-sidebar {
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+
 .cm-s-typora-default .cm-header, 
 .cm-s-typora-default .cm-property,
 .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
@@ -251,3 +259,9 @@ table tbody+tbody {
 .cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number {
 	color: #777777;
 }
+
+.typora-node .file-list-item-parent-loc, 
+.typora-node .file-list-item-time, 
+.typora-node .file-list-item-summary {
+	font-family: arial, sans-serif;
+}
\ No newline at end of file