diff --git a/themes/github-dark.css b/themes/github-dark.css
new file mode 100644
index 0000000..1e9bcad
--- /dev/null
+++ b/themes/github-dark.css
@@ -0,0 +1,538 @@
+:root {
+  --gray-000: #fafbfc;
+  --gray-100: #f6f8fa;
+  --gray-200: #e1e4e8;
+  --gray-300: #d1d5da;
+  --gray-400: #959da5;
+  --gray-500: #6a737d;
+  --gray-600: #586069;
+  --gray-700: #444d56;
+  --gray-800: #2f363d;
+  --gray-900: #2f363d;
+  --black:    #1b1f23;
+
+  --blue-100: #dbedff;
+  --blue-200: #c8e1ff;
+  --blue-300: #79b8ff;
+  --blue-400: #2188ff;
+  --blue-500: #0366d6;
+  --blue-600: #005cc5;
+  --blue-700: #044289;
+  --blue-800: #032f62;
+  --blue-900: #05264c;
+
+  --orange-400: #fb8532;
+  --orange-600: #e36209;
+
+  --red-400: #ea4a5a;
+  --red-500: #d73a49;
+
+  --purple-300: #b392f0;
+  --purple-500: #6f42c1;
+
+  --bg-color: var(--black);
+  --text-color: #fff;
+  --md-char-color: var(--gray-600); /* meta chars like `*` */
+  --meta-content-color: var(--gray-300); /* meta content like image text or link url */
+
+  --blur-text-color: var(--gray-600);
+  --control-text-color: var(--gray-500);
+
+  --primary-color: var(--blue-400); /* color of primary buttons */
+  --primary-btn-border-color: var(--primary-color);
+  --primary-btn-text-color: #fff;
+
+  --window-border: 1px solid var(--gray-800);
+  --active-file-bg-color: var(--gray-800);
+  --active-file-text-color: inherit;
+  --active-file-border-color: var(--gray-800);
+
+  --side-bar-bg-color: var(--bg-color); /*change background of sidebar*/
+  --item-hover-bg-color: rgba(229, 229, 229, 0.59); /*background of control items when hover, like menu in sidebar*/
+  --item-hover-text-color: inherit;
+
+  --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+/*
+ * Typora container
+ */
+#write {
+  max-width: 676px; /* Width of PR/issue/comment area */
+  margin: 0 auto;
+  padding: 1.71rem; /*24px*/
+}
+
+/*
+ * Base
+ */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 14px;
+  font-family: var(--system-fonts);
+  color: var(--text-color);
+  line-height: 1.5;
+}
+
+> *:first-child {
+  margin-top: 0 !important;
+}
+
+> *:last-child {
+  margin-bottom: 0 !important;
+}
+
+p,
+blockquote,
+ul,
+ol,
+dl,
+table,
+pre,
+details {
+ margin-top: 0;
+ margin-bottom: 1.14rem; /*16px*/
+}
+
+/*
+ * Headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.14rem; /*16px*/
+  margin-bottom: 1.71rem; /*24px*/
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+h1:hover a.anchor,
+h2:hover a.anchor,
+h3:hover a.anchor,
+h4:hover a.anchor,
+h5:hover a.anchor,
+h6:hover a.anchor {
+  text-decoration: none;
+}
+
+h1 tt, h1 code,
+h2 tt, h2 code,
+h3 tt, h3 code,
+h4 tt, h4 code,
+h5 tt, h5 code,
+h6 tt, h6 code {
+  font-size: inherit;
+}
+
+h1 {
+  padding-bottom: .3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--gray-700);
+}
+
+h2 {
+  padding-bottom: .3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--gray-700);
+}
+
+h3 {
+  font-size: 1.25em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.875em;
+}
+
+h6 {
+   font-size: 0.85em;
+   color: var(--gray-600);
+}
+
+/*
+ * Typography
+ */
+a {
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+b, strong {
+ font-weight: 600;
+}
+
+hr {
+  box-sizing: content-box;
+  margin: 24px 0;
+  padding: 0;
+  height: .25em;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  background-color: var(--gray-800);
+}
+
+/*
+ * Lists
+ */
+ul,
+ol {
+  padding-left: 2em;
+}
+
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ul ul {
+  list-style-type: circle;
+}
+
+ul ul ul {
+  list-style-type: square;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ol ol, ul ol {
+    list-style-type: lower-roman;
+}
+
+ol ol ol, ol ul ol, ul ol ol, ul ul ol {
+    list-style-type: lower-alpha;
+}
+
+li {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+ol li, ul li {
+  margin-left: 0;
+}
+
+/*
+ * Task lists
+ */
+.task-list {
+	padding-left: 0;
+}
+
+.task-list-item {
+	padding-left: 32px;
+}
+
+.task-list-item input {
+  vertical-align: middle;
+}
+
+/*
+ * Blockquotes
+ */
+blockquote {
+  padding: 0 1em;
+  color: var(--meta-content-color);
+  border-left: .25em solid var(--gray-800);
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/*
+ * Tables
+ */
+table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+  word-break: initial;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+table tr {
+  background-color: var(--bg-color);
+  border-top: 1px solid var(--gray-700);
+}
+
+table tr:nth-child(2n) {
+  background-color: rgba(255,255,255,0.04);
+}
+
+table th,
+table td {
+  padding: 6px 13px;
+  border: 1px solid var(--gray-700);
+}
+
+/*
+ * Code
+ */
+
+code, kbd, pre, samp, tt {
+  font-family: var(--monospace);
+}
+
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  border-radius: 3px;
+  color: var(--gray-100);
+  background-color: var(--gray-600);
+  border: 1px solid var(--gray-700);
+  border-bottom-color: var(--gray-800);
+  box-shadow: inset 0 -1px 0 var(--gray-900);
+  vertical-align: middle;
+}
+
+code,
+tt {
+  margin: 0;
+  padding: .2em .4em;
+  font-size: 85%;
+  border-radius: 3px;
+  background-color: var(--gray-900);
+}
+
+pre {
+  line-height: 1.45;
+  overflow: auto;
+  word-break: normal;
+  word-wrap: normal;
+  border-radius: 3px;
+  background-color: var(--gray-900);
+  font-size: 85%;
+  margin-bottom: 1em;
+}
+
+pre.md-meta-block {
+  color: var(--text-color);
+  background-color: var(--gray-900) !important;
+}
+
+/*
+ * Typora app
+ * ==============================
+ */
+
+/*
+ * Code blocks
+ */
+ .cm-s-inner {
+   line-height: 1.45;
+   overflow: auto;
+   word-break: normal;
+   word-wrap: normal;
+   border-radius: 3px;
+ }
+
+.CodeMirror.cm-s-inner {
+  font-size: 85%;
+  background-color: var(--gray-900);
+}
+
+.md-comment {
+  font-size: 85%;
+  color: var(--meta-content-color);
+}
+
+.md-meta-block {
+  font-size: 85% !important;
+  background-color: var(--meta-content-color) !important;
+}
+
+.md-meta-block,
+.cm-s-inner {
+  padding: 1em;
+}
+
+.CodeMirror-gutters {
+  border: 0;
+}
+
+.md-fences .code-tooltip {
+  top: -1em !important;
+  right: 1em;
+  bottom: auto !important;
+  padding: 5px !important;
+}
+
+.code-tooltip {
+  border-radius: 3px;
+  box-shadow: 0 1px 5px rgba(27,31,35,0.85) !important;
+}
+
+.code-tooltip .ty-input,
+.code-tooltip input {
+  line-height: 1;
+  margin: 0;
+  min-width: 120px !important;
+}
+
+.md-lang {
+  color: var(--blue-300);
+}
+
+
+ .cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); }
+ .cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); }
+ .cm-s-inner .cm-variable-2 { color: #80CBC4; }
+ .cm-s-inner .cm-variable-3 { color: #82B1FF; }
+ .cm-s-inner .cm-builtin { color: #DECB6B; }
+ .cm-s-inner .cm-atom { color: #F77669; }
+ .cm-s-inner .cm-number { color: #F77669; }
+ .cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); }
+ .cm-s-inner .cm-string { color: #C3E88D; }
+ .cm-s-inner .cm-string-2 { color: #80CBC4; }
+ .cm-s-inner .cm-comment { color: #546E7A; }
+ .cm-s-inner .cm-variable { color: #82B1FF; }
+ .cm-s-inner .cm-tag { color: #80CBC4; }
+ .cm-s-inner .cm-meta { color: #80CBC4; }
+ .cm-s-inner .cm-attribute { color: #FFCB6B; }
+ .cm-s-inner .cm-property { color: #80CBAE; }
+ .cm-s-inner .cm-qualifier { color: #DECB6B; }
+ .cm-s-inner .cm-variable-3 { color: #DECB6B; }
+ .cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); }
+ .cm-s-inner .cm-error {
+   color: rgba(255, 255, 255, 1.0);
+   background-color: #EC5F67;
+ }
+
+/*
+ * Typora app: source mode
+ */
+ /* When clicked, show the heading source (`# text`) */
+.cm-s-typora-default .cm-header,
+.cm-s-typora-default .cm-property {
+  color: var(--text-color);
+}
+
+.cm-s-typora-default .cm-header span,
+.cm-s-typora-default .cm-property span {
+  background-color: var(--blue-100);
+}
+
+/* When clicked, show the link source text (`[text]`) */
+.cm-s-typora-default .cm-link {
+  color: var(--primary-color);
+}
+
+/* When clicked, show the link source url (`(url)`) */
+.cm-s-typora-default .cm-string {
+  color: var(--meta-content-color);
+}
+
+/* When clicked, show the code source url (`<!-- text -->`) */
+.cm-s-typora-default .cm-comment,
+.cm-s-typora-default .cm-code {
+  margin: 0;
+  padding: .2em .4em;
+  font-size: 85%;
+  color: var(--text-color);
+  background-color: rgba(27,31,35,.05);
+  border-radius: 3px;
+}
+
+.md-html-inline .md-meta,
+.md-ruby .md-meta,
+.md-comment {
+  opacity: 1;
+  font-size: 85%;
+  color: var(--gray-400);
+}
+
+/* When clicked, show the blockquote source (`> text`) */
+.cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number {
+  color: var(--gray-600);
+}
+
+/* When clicked, show the image tag source (`![alt](url)`) */
+.md-image .md-meta {
+  padding: 3px 5px;
+  font-size: 85%;
+  font-family: var(--monospace);
+  color: var(--text-color);
+  border: 1px solid var(--gray-300);
+  border-radius: 3px;
+}
+
+/*
+ * Typora app: focus mode
+ */
+
+.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
+    color: var(--blur-text-color) !important;
+}
+
+/*
+ * Typora app: UI
+ */
+
+#top-titlebar,
+header, .context-menu, .megamenu-content, footer,
+.file-list-item-file-name, .file-list-item-summary {
+  font-family: var(--system-fonts) !important;
+}
+
+.file-list-item-parent-loc, .file-list-item-time {
+  font-family: var(--monospace) !important;
+  color: var(--meta-content-color) !important;
+}
+
+#md-notification {
+  border-bottom: solid 1px var(--gray-700);
+}
+
+/*
+ * Print styles
+ */
+@media print {
+  html {
+    font-size: 13px;
+  }
+
+  table,
+  pre {
+    page-break-inside: avoid;
+  }
+
+  pre {
+    word-wrap: break-word;
+  }
+}
diff --git a/themes/github.css b/themes/github.css
index f49b6d2..1afdd61 100644
--- a/themes/github.css
+++ b/themes/github.css
@@ -1,403 +1,578 @@
 :root {
-    --side-bar-bg-color: #fafafa;
-    --control-text-color: #777;
-}
+  --gray-000: #fafbfc;
+  --gray-100: #f6f8fa;
+  --gray-200: #e1e4e8;
+  --gray-300: #d1d5da;
+  --gray-400: #959da5;
+  --gray-500: #6a737d;
+  --gray-600: #586069;
+  --gray-700: #444d56;
+  --gray-900: #24292e;
 
-@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
+  --blue-100: #dbedff;
+  --blue-200: #c8e1ff;
+  --blue-500: #0366d6;
+  --blue-600: #005cc5;
+  --blue-700: #044289;
+  --blue-800: #032f62;
+  --blue-900: #05264c;
 
-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Open Sans Regular'),url('./github/400.woff') format('woff')
-}
+  --orange-600: #e36209;
+  --red-500: #d73a49;
+  --purple-500: #6f42c1;
 
-@font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: normal;
-    src: local('Open Sans Italic'),url('./github/400i.woff') format('woff')
-}
+  --bg-color:  #ffffff;
+  --text-color: var(--gray-900);
+  --md-char-color: var(--gray-400); /* meta chars like `*` */
+  --meta-content-color: var(--gray-500); /* meta content like image text or link url */
+
+  --control-text-color: var(--gray-500);
 
-@font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: bold;
-    src: local('Open Sans Bold'),url('./github/700.woff') format('woff')
+  --primary-color: var(--blue-500); /* color of primary buttons */
+  --primary-btn-border-color: var(--primary-color);
+  --primary-btn-text-color: #fff;
+
+  --window-border: 1px solid var(--gray-200);
+  --active-file-bg-color: var(--gray-200);
+  --active-file-text-color: inherit;
+  --active-file-border-color: var(--gray-400);
+
+  --side-bar-bg-color: var(--bg-color); /*change background of sidebar*/
+  --item-hover-bg-color: rgba(229, 229, 229, 0.59); /*background of control items when hover, like menu in sidebar*/
+  --item-hover-text-color: inherit;
+
+  --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 }
 
-@font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: bold;
-    src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff')
+/*
+ * Typora container
+ */
+#write {
+  max-width: 676px; /* Width of PR/issue/comment area */
+  margin: 0 auto;
+  padding: 1.71rem; /*24px*/
 }
 
-html {
-    font-size: 16px;
+/*
+ * Base
+ */
+* {
+  box-sizing: border-box;
 }
 
 body {
-    font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-    color: rgb(51, 51, 51);
-    line-height: 1.6;
+  font-size: 14px;
+  font-family: var(--system-fonts);
+  color: var(--text-color);
+  line-height: 1.5;
 }
 
-#write{
-    max-width: 860px;
-  	margin: 0 auto;
-  	padding: 20px 30px 40px 30px;
-	padding-top: 20px;
-    padding-bottom: 100px;
-}
-#write > ul:first-child,
-#write > ol:first-child{
-    margin-top: 30px;
+> *:first-child {
+  margin-top: 0 !important;
 }
 
-body > *:first-child {
-    margin-top: 0 !important;
+> *:last-child {
+  margin-bottom: 0 !important;
 }
-body > *:last-child {
-    margin-bottom: 0 !important;
-}
-a {
-    color: #4183C4;
+
+p,
+blockquote,
+ul,
+ol,
+dl,
+table,
+pre,
+details {
+ margin-top: 0;
+ margin-bottom: 1.14rem; /*16px*/
 }
+
+/*
+ * Headings
+ */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-    position: relative;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
-    line-height: 1.4;
-    cursor: text;
+  margin-top: 1.14rem; /*16px*/
+  margin-bottom: 1.71rem; /*24px*/
+  font-weight: 600;
+  line-height: 1.25;
 }
+
 h1:hover a.anchor,
 h2:hover a.anchor,
 h3:hover a.anchor,
 h4:hover a.anchor,
 h5:hover a.anchor,
 h6:hover a.anchor {
-    /*background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;*/
-    text-decoration: none;
-}
-h1 tt,
-h1 code {
-    font-size: inherit;
-}
-h2 tt,
-h2 code {
-    font-size: inherit;
-}
-h3 tt,
-h3 code {
-    font-size: inherit;
-}
-h4 tt,
-h4 code {
-    font-size: inherit;
-}
-h5 tt,
-h5 code {
-    font-size: inherit;
+  text-decoration: none;
 }
-h6 tt,
-h6 code {
-    font-size: inherit;
+
+h1 tt, h1 code,
+h2 tt, h2 code,
+h3 tt, h3 code,
+h4 tt, h4 code,
+h5 tt, h5 code,
+h6 tt, h6 code {
+  font-size: inherit;
 }
+
 h1 {
-    padding-bottom: .3em;
-    font-size: 2.25em;
-    line-height: 1.2;
-    border-bottom: 1px solid #eee;
+  padding-bottom: .3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--gray-200);
 }
+
 h2 {
-   padding-bottom: .3em;
-    font-size: 1.75em;
-    line-height: 1.225;
-    border-bottom: 1px solid #eee;
+  padding-bottom: .3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--gray-200);
 }
+
 h3 {
-    font-size: 1.5em;
-    line-height: 1.43;
+  font-size: 1.25em;
 }
+
 h4 {
-    font-size: 1.25em;
+  font-size: 1em;
 }
+
 h5 {
-    font-size: 1em;
+  font-size: 0.875em;
 }
+
 h6 {
-   font-size: 1em;
-    color: #777;
+   font-size: 0.85em;
+   color: var(--meta-content-color);
 }
-p,
-blockquote,
-ul,
-ol,
-dl,
-table{
-    margin: 0.8em 0;
+
+/*
+ * Typography
+ */
+a {
+ color: var(--primary-color);
+ text-decoration: none;
 }
-li>ol,
-li>ul {
-    margin: 0 0;
+
+a:hover {
+ text-decoration: underline;
 }
+
+b, strong {
+ font-weight: 600;
+}
+
 hr {
-    height: 4px;
-    padding: 0;
-    margin: 16px 0;
-    background-color: #e7e7e7;
-    border: 0 none;
-    overflow: hidden;
-    box-sizing: content-box;
-    border-bottom: 1px solid #ddd;
-}
-
-body > h2:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-body > h1:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-body > h1:first-child + h2 {
-    margin-top: 0;
-    padding-top: 0;
-}
-body > h3:first-child,
-body > h4:first-child,
-body > h5:first-child,
-body > h6:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-a:first-child h1,
-a:first-child h2,
-a:first-child h3,
-a:first-child h4,
-a:first-child h5,
-a:first-child h6 {
-    margin-top: 0;
-    padding-top: 0;
-}
-h1 p,
-h2 p,
-h3 p,
-h4 p,
-h5 p,
-h6 p {
-    margin-top: 0;
-}
-li p.first {
-    display: inline-block;
+  box-sizing: content-box;
+  margin: 24px 0;
+  padding: 0;
+  height: .25em;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  background-color: var(--gray-200);
 }
+
+/*
+ * Lists
+ */
 ul,
 ol {
-    padding-left: 30px;
+  padding-left: 2em;
+}
+
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ul ul {
+  list-style-type: circle;
+}
+
+ul ul ul {
+  list-style-type: square;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ol ol, ul ol {
+    list-style-type: lower-roman;
+}
+
+ol ol ol, ol ul ol, ul ol ol, ul ul ol {
+    list-style-type: lower-alpha;
+}
+
+li {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-ul:first-child,
-ol:first-child {
-    margin-top: 0;
+
+li + li {
+  margin-top: 0.25em;
+}
+
+ol li, ul li {
+  margin-left: 0;
+}
+
+/*
+ * Task lists
+ */
+.task-list {
+	padding-left: 0;
 }
-ul:last-child,
-ol:last-child {
-    margin-bottom: 0;
+
+.task-list-item {
+	padding-left: 32px;
 }
+
+.task-list-item input {
+  vertical-align: middle;
+}
+
+/*
+ * Blockquotes
+ */
 blockquote {
-    border-left: 4px solid #dddddd;
-    padding: 0 15px;
-    color: #777777;
+  padding: 0 1em;
+  color: var(--meta-content-color);
+  border-left: .25em solid var(--gray-300);
 }
-blockquote blockquote {
-    padding-right: 0;
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
 }
+
+/*
+ * Tables
+ */
 table {
-    padding: 0;
-    word-break: initial;
+  display: block;
+  overflow: auto;
+  width: 100%;
+  word-break: initial;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
+
 table tr {
-    border-top: 1px solid #cccccc;
-    margin: 0;
-    padding: 0;
+  background-color: #fff;
+  border-top: 1px solid var(--gray-300);
 }
+
 table tr:nth-child(2n) {
-    background-color: #f8f8f8;
-}
-table tr th {
-    font-weight: bold;
-    border: 1px solid #cccccc;
-    text-align: left;
-    margin: 0;
-    padding: 6px 13px;
+  background-color: var(--gray-100);
 }
-table tr td {
-    border: 1px solid #cccccc;
-    text-align: left;
-    margin: 0;
-    padding: 6px 13px;
-}
-table tr th:first-child,
-table tr td:first-child {
-    margin-top: 0;
+
+table th,
+table td {
+  padding: 6px 13px;
+  border: 1px solid var(--gray-300);
 }
-table tr th:last-child,
-table tr td:last-child {
-    margin-bottom: 0;
+
+/*
+ * Code
+ */
+
+code, kbd, pre, samp, tt {
+  font-family: var(--monospace);
 }
 
-.CodeMirror-gutters {
-    border-right: 1px solid #ddd;
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  background-color: var(--gray-100);
+  border: 1px solid var(--gray-300);
+  border-bottom-color: var(--gray-400);
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 var(--gray-400);
+  color: var(--gray-700);
+  vertical-align: middle;
 }
 
-.md-fences,
 code,
 tt {
-    border: 1px solid #ddd;
-    background-color: #f8f8f8;
-    border-radius: 3px;
-    padding: 0;
-    font-family: Consolas, "Liberation Mono", Courier, monospace;
-    padding: 2px 4px 0px 4px;
-    font-size: 0.9em;
-}
-
-.md-fences {
-    margin-bottom: 15px;
-    margin-top: 15px;
-    padding: 0.2em 1em;
-    padding-top: 8px;
-    padding-bottom: 6px;
-}
-.task-list{
-	padding-left: 0;
+  margin: 0;
+  padding: .2em .4em;
+  font-size: 85%;
+  border-radius: 3px;
+  background-color: rgba(27,31,35,.05);
 }
 
-.task-list-item {
-	padding-left:32px;
+pre {
+  line-height: 1.45;
+  overflow: auto;
+  word-break: normal;
+  word-wrap: normal;
+  border-radius: 3px;
+  background-color: var(--gray-100);
+  font-size: 85%;
+  margin-bottom: 1em;
 }
 
-.task-list-item input {
-  top: 3px;
-  left: 8px;
+/*
+ * Typora app
+ * ==============================
+ */
+
+/*
+ * Code blocks
+ */
+ .cm-s-inner {
+   line-height: 1.45;
+   overflow: auto;
+   word-break: normal;
+   word-wrap: normal;
+   border-radius: 3px;
+ }
+
+.CodeMirror.cm-s-inner {
+  font-size: 85%;
+  background-color: var(--gray-100);
 }
 
-@media screen and (min-width: 914px) {
-    /*body {
-        width: 854px;
-        margin: 0 auto;
-    }*/
+.md-comment {
+  font-size: 85%;
+  color: var(--meta-content-color);
 }
-@media print {
-    html {
-        font-size: 13px;
-    }
-    table,
-    pre {
-        page-break-inside: avoid;
-    }
-    pre {
-        word-wrap: break-word;
-    }
+
+.md-meta-block {
+  font-size: 85% !important;
+  background-color: rgba(27,31,35,.05) !important;
 }
 
-.md-fences {
-	background-color: #f8f8f8;
+.md-meta-block,
+.cm-s-inner {
+  padding: 1em;
 }
-#write pre.md-meta-block {
-	padding: 1rem;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: #f7f7f7;
-    border: 0;
-    border-radius: 3px;
-    color: #777777;
-    margin-top: 0 !important;
+
+.CodeMirror-gutters {
+  border: 0;
 }
 
-.mathjax-block>.code-tooltip {
-	bottom: .375rem;
+.md-fences .code-tooltip {
+  top: -1em !important;
+  right: 1em;
+  bottom: auto !important;
+  padding: 5px !important;
 }
 
-#write>h3.md-focus:before{
-	left: -1.5625rem;
-	top: .375rem;
+.code-tooltip {
+  border-radius: 3px;
+  box-shadow: 0 1px 5px rgba(27,31,35,0.15) !important;
 }
-#write>h4.md-focus:before{
-	left: -1.5625rem;
-	top: .285714286rem;
+
+.code-tooltip .ty-input,
+.code-tooltip input {
+  line-height: 1;
+  margin: 0;
+  min-width: 120px !important;
 }
-#write>h5.md-focus:before{
-	left: -1.5625rem;
-	top: .285714286rem;
+
+.md-lang {
+  color: var(--blue-700);
 }
-#write>h6.md-focus:before{
-	left: -1.5625rem;
-	top: .285714286rem;
+
+/*!
+ * GitHub Light v0.5.0
+ * Copyright (c) 2012 - 2019 GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ */
+
+.cm-s-inner .CodeMirror-cursor {
+  border-left: 1px solid #24292e; }
+
+.cm-s-inner div.CodeMirror-selected,
+.cm-s-inner .CodeMirror-line::selection,
+.cm-s-inner .CodeMirror-line > span::selection,
+.cm-s-inner .CodeMirror-line > span > span::selection,
+.cm-s-inner .CodeMirror-line::-moz-selection,
+.cm-s-inner .CodeMirror-line > span::-moz-selection,
+.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
+  background: var(--blue-200); }
+
+.cm-s-inner .CodeMirror-activeline-background {
+  background: #fafbfc; }
+
+.cm-s-inner .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: var(--gray-900) !important; }
+
+.CodeMirror-guttermarker-subtle {
+ color: var(--gray-300);
 }
-.md-image>.md-meta {
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    font-family: Consolas, "Liberation Mono", Courier, monospace;
-    padding: 2px 4px 0px 4px;
-    font-size: 0.9em;
-    color: inherit;
+
+.CodeMirror-linenumber {
+ color: var(--gray-400);
 }
 
-.md-tag{
-	color: inherit;
+.cm-s-inner .cm-comment {
+ color: var(--gray-500); }
+
+.cm-s-inner .cm-constant {
+ color: var(--gray-600);  }
+
+.cm-s-inner .cm-entity {
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ color: var(--purple-500); }
+
+.cm-s-inner .cm-keyword {
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ color: var(--red-500); }
+
+.cm-s-inner .cm-storage {
+ color: var(--red-500); }
+
+.cm-s-inner .cm-string {
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ color: var(--blue-800); }
+
+.cm-s-inner .cm-support {
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ color: var(--blue-900); }
+
+.cm-s-inner .cm-variable {
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ color: var(--orange-600); }
+
+ /* undefined */
+ .cm-s-inner .cm-atom,
+ .cm-s-inner .cm-attribute,
+ .cm-s-inner .cm-builtin,
+ .cm-s-inner .cm-def,
+ .cm-s-inner .cm-error,
+ .cm-s-inner .cm-meta,
+ .cm-s-inner .cm-number,
+ .cm-s-inner .cm-operator,
+ .cm-s-inner .cm-property,
+ .cm-s-inner .cm-qualifier,
+ .cm-s-inner .cm-string-2,
+ .cm-s-inner .cm-tag, {
+   color: var(--text-color);
+ }
+
+/*
+ * Typora app: source mode
+ */
+ /* When clicked, show the heading source (`# text`) */
+.cm-s-typora-default .cm-header,
+.cm-s-typora-default .cm-property {
+  color: var(--text-color);
 }
 
-.md-toc { 
-    margin-top:20px;
-    padding-bottom:20px;
+.cm-s-typora-default .cm-header span,
+.cm-s-typora-default .cm-property span {
+  background-color: var(--blue-100);
 }
 
-.sidebar-tabs {
-    border-bottom: none;
+/* When clicked, show the link source text (`[text]`) */
+.cm-s-typora-default .cm-link {
+  color: var(--primary-color);
 }
 
-#typora-quick-open {
-    border: 1px solid #ddd;
-    background-color: #f8f8f8;
+/* When clicked, show the link source url (`(url)`) */
+.cm-s-typora-default .cm-string {
+  color: var(--meta-content-color);
 }
 
-#typora-quick-open-item {
-    background-color: #FAFAFA;
-    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
-    border-style: solid;
-    border-width: 1px;
+/* When clicked, show the code source url (`<!-- text -->`) */
+.cm-s-typora-default .cm-comment,
+.cm-s-typora-default .cm-code {
+  margin: 0;
+  padding: .2em .4em;
+  font-size: 85%;
+  color: var(--text-color);
+  background-color: rgba(27,31,35,.05);
+  border-radius: 3px;
 }
 
-#md-notification:before {
-    top: 10px;
+.md-html-inline .md-meta,
+.md-ruby .md-meta,
+.md-comment {
+  opacity: 1;
+  font-size: 85%;
+  color: var(--gray-400);
 }
 
-/** focus mode */
-.on-focus-mode blockquote {
-    border-left-color: rgba(85, 85, 85, 0.12);
+/* When clicked, show the blockquote source (`> text`) */
+.cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number {
+  color: var(--gray-600);
 }
 
-header, .context-menu, .megamenu-content, footer{
-    font-family: "Segoe UI", "Arial", sans-serif;
+/* When clicked, show the image tag source (`![alt](url)`) */
+.md-image .md-meta {
+  padding: 3px 5px;
+  font-size: 85%;
+  font-family: var(--monospace);
+  color: var(--text-color);
+  border: 1px solid var(--gray-300);
+  border-radius: 3px;
 }
 
-.file-node-content:hover .file-node-icon,
-.file-node-content:hover .file-node-open-state{
-    visibility: visible;
+/*
+ * Typora app: UI
+ */
+
+#top-titlebar,
+header, .context-menu, .megamenu-content, footer,
+.file-list-item-file-name, .file-list-item-summary {
+  font-family: var(--system-fonts) !important;
 }
 
-.mac-seamless-mode #typora-sidebar {
-    background-color: #fafafa;
-    background-color: var(--side-bar-bg-color);
+.file-list-item-parent-loc, .file-list-item-time {
+  font-family: var(--monospace) !important;
+  color: var(--meta-content-color) !important;
 }
 
-.md-lang {
-    color: #b4654d;
+#md-notification {
+  border-bottom: solid 1px var(--gray-300);
+}
+
+/*
+ * Print styles
+ */
+@media print {
+  html {
+    font-size: 13px;
+  }
+
+  table,
+  pre {
+    page-break-inside: avoid;
+  }
+
+  pre {
+    word-wrap: break-word;
+  }
 }
diff --git a/themes/github/300.woff b/themes/github/300.woff
deleted file mode 100644
index 53fe574..0000000
Binary files a/themes/github/300.woff and /dev/null differ
diff --git a/themes/github/400.woff b/themes/github/400.woff
deleted file mode 100644
index 8b512d0..0000000
Binary files a/themes/github/400.woff and /dev/null differ
diff --git a/themes/github/400i.woff b/themes/github/400i.woff
deleted file mode 100644
index d6684e8..0000000
Binary files a/themes/github/400i.woff and /dev/null differ
diff --git a/themes/github/600i.woff b/themes/github/600i.woff
deleted file mode 100644
index 0a9591a..0000000
Binary files a/themes/github/600i.woff and /dev/null differ
diff --git a/themes/github/700.woff b/themes/github/700.woff
deleted file mode 100644
index 29c4f31..0000000
Binary files a/themes/github/700.woff and /dev/null differ
diff --git a/themes/github/700i.woff b/themes/github/700i.woff
deleted file mode 100644
index 2004dc9..0000000
Binary files a/themes/github/700i.woff and /dev/null differ