typora定制主题分享–绿豆沙背景主题+新night背景主题

大家好，欢迎来到IT知识分享网。

如果下面有你看中的主题样式，可以在typora的偏好设置->外观->打开主题文件夹，来到存放主题样式的文件夹里，然后新建一个文本文件，文件名随便定义，文件后缀名改为 .css，把下面的代码复制粘贴过去就可以了。新建CSS文件方法当然不止这种，不过这方法适用性我觉得比较广一些。重启typora后可以在主题里看到这些新定义的主题。

1.绿豆沙背景主题

基于typora自带的github.css改编，主要改动了可写区域范围代码块样式、行内代码块样式、引用块样式、表格样式、字体大小、背景颜色、导出为HTML文件时的背景颜色。
具体怎么改可以参考一下这篇博客：传送门

主题效果如下：

鼠标经过代码块时会有阴影效果：

注意：得把下面这张图片放到根样式代码同一级目录下的一个命名为night-new的文件夹里，图片名为flag.png。

就像是这样放：

样式代码：

:root { 
     /* 不加这行代码时导出的html文件的背景颜色是白色 */ --bg-color: #C7EDCC; --side-bar-bg-color: #C7EDCC; --control-text-color: #777; } content { 
     background-color: #C7EDCC; } @include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext); /* open-sans-regular - latin-ext_latin */ @font-face { 
     font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: local('Open Sans Regular'), local('OpenSans-Regular'), url('./github/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* open-sans-italic - latin-ext_latin */ @font-face { 
     font-family: 'Open Sans'; font-style: italic; font-weight: normal; src: local('Open Sans Italic'), local('OpenSans-Italic'), url('./github/open-sans-v17-latin-ext_latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* open-sans-700 - latin-ext_latin */ @font-face { 
     font-family: 'Open Sans'; font-style: normal; font-weight: bold; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('./github/open-sans-v17-latin-ext_latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* open-sans-700italic - latin-ext_latin */ @font-face { 
     font-family: 'Open Sans'; font-style: italic; font-weight: bold; src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('./github/open-sans-v17-latin-ext_latin-700italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { 
     font-size: 22px; -webkit-font-smoothing: antialiased; } body { 
     font-family: "cascadia code", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif; color: rgb(51, 51, 51); /* font-size:22px; */ line-height: 1.6; } #write { 
     /* 设置可写区域的宽�? */ max-width: 1160px; margin: 0 auto; padding: 20px; padding-bottom: 100px; } @media only screen and (min-width: 1400px) { 
     #write { 
     max-width: 1260px; } } @media only screen and (min-width: 1800px) { 
     #write { 
     max-width: 1400px; } } #write>ul:first-child, #write>ol:first-child { 
     margin-top: 30px; } a { 
     color: #4183C4; } h1, h2, h3, h4, h5, h6 { 
     position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; } 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 { 
     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; } h6 tt, h6 code { 
     font-size: inherit; } h1 { 
     font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid #eee; } h2 { 
     font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid #eee; } /*@media print { .typora-export h1, .typora-export h2 { border-bottom: none; padding-bottom: initial; } .typora-export h1::after, .typora-export h2::after { content: ""; display: block; height: 100px; margin-top: -96px; border-top: 1px solid #eee; } }*/ h3 { 
     font-size: 1.5em; line-height: 1.43; } h4 { 
     font-size: 1.25em; } h5 { 
     font-size: 1em; } h6 { 
     font-size: 1em; color: #777; } p, blockquote, ul, ol, dl, table { 
     margin: 0.8em 0; } li>ol, li>ul { 
     margin: 0 0; } hr { 
     height: 2px; padding: 0; margin: 16px 0; background-color: #e7e7e7; border: 0 none; overflow: hidden; box-sizing: content-box; } li p.first { 
     display: inline-block; } ul, ol { 
     padding-left: 30px; } ul:first-child, ol:first-child { 
     margin-top: 0; } ul:last-child, ol:last-child { 
     margin-bottom: 0; } blockquote { 
     border-left: 6px solid #53e873; padding: 0 12px; background-color: #c6e2f8; color: #065b27; font-size: 21px; } blockquote blockquote { 
     padding-right: 0; } table { 
     padding: 0; word-break: initial; } table tr { 
     border: 1px solid #0b9fa7; margin: 0; padding: 0; } table tr:nth-child(2n), thead { 
     background-color: rgb(247, 222, 222); } table th { 
     font-weight: bold; border: 1px solid #979e9e; border-bottom: 0; margin: 0; padding: 6px 13px; } table td { 
     border: 1px solid #0b9fa7; margin: 0; padding: 6px 13px; } table th:first-child, table td:first-child { 
     margin-top: 0; } table th:last-child, table td:last-child { 
     margin-bottom: 0; } .CodeMirror-lines { 
     padding-left: 4px; } .code-tooltip { 
     box-shadow: 0 1px 1px 0 rgba(0, 28, 36, .3); border-top: 1px solid #eef2f2; } .md-fences, code, tt { 
     border: 1px solid #e7eaed; background-color: #1c1313; border-radius: 3px; padding: 0; padding: 2px 4px 0px 4px; font-size: 1em; } code { 
     background: #fff; padding: 0 8px 0 8px; color: navy; } .md-fences { 
     margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; } .md-task-list-item>input { 
     margin-left: -1.3em; } @media print { 
     html { 
     font-size: 13px; } table, pre { 
     page-break-inside: avoid; } pre { 
     word-wrap: break-word; } } .md-fences { 
     background-color: #f8f8f8; } #write pre.md-meta-block { 
     padding: 1rem; font-size: 85%; line-height: 1.45; background-color: #f7f7f7; border: 0; border-radius: 3px; color: #; margin-top: 0 !important; } .mathjax-block>.code-tooltip { 
     bottom: .375rem; } .md-mathjax-midline { 
     background: #fafafa; } #write>h3.md-focus:before { 
     left: -1.5625rem; top: .375rem; } #write>h4.md-focus:before { 
     left: -1.5625rem; top: .rem; } #write>h5.md-focus:before { 
     left: -1.5625rem; top: .rem; } #write>h6.md-focus:before { 
     left: -1.5625rem; top: .rem; } .md-image>.md-meta { 
     /*border: 1px solid #ddd;*/ border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; } .md-tag { 
     color: #a7a7a7; opacity: 1; } .md-toc { 
     margin-top: 20px; padding-bottom: 20px; } .sidebar-tabs { 
     border-bottom: none; } #typora-quick-open { 
     border: 1px solid #ddd; background-color: #f8f8f8; } #typora-quick-open-item { 
     background-color: #FAFAFA; border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee; border-style: solid; border-width: 1px; } / focus mode */ .on-focus-mode blockquote { 
     border-left-color: rgba(85, 85, 85, 0.12); } header, .context-menu, .megamenu-content, footer { 
     font-family: "Segoe UI", "Arial", sans-serif; } .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); } .md-lang { 
     color: #b4654d; } /*.html-for-mac { --item-hover-bg-color: #E6F0FE; }*/ #md-notification .btn { 
     border: 0; } .dropdown-menu .divider { 
     border-color: #e5e5e5; opacity: 0.4; } .ty-preferences .window-content { 
     background-color: #fafafa; } .ty-preferences .nav-group-item.active { 
     color: white; background: #999; } .menu-item-container a.menu-style-btn { 
     background-color: #f5f8fa; background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0)); } /*因为不同主题的代码块部分不一样，code部分统一*/ .CodeMirror-lines { 
     padding-left: 4px; } .code-tooltip { 
     box-shadow: 0 1px 1px 0 rgba(0, 28, 36, .3); border-top: 1px solid #eef2f2; } .md-fences, tt { 
     background-color: #f8f8f8; border-radius: 3px; padding: 0; padding-left: 4px !important; padding-right: 4px !important; font-size: 0.9em; } /* code { background-color: #f3f4f4; padding: 0 2px 0 2px; } */ .md-fences { 
     margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; } /* 鼠标经过时阴影效�? */ .md-fences:hover { 
     /* box-shadow: 1px 1px 10px blue; */ box-shadow: 0px 0px 10px #2a6fd6; /* transition: all .1s; */ transform: scale(1.0012); } .md-task-list-item>input { 
     margin-left: -1.3em; } @media print { 
     html { 
     font-size: 13px; } table, pre { 
     page-break-inside: avoid; } pre { 
     word-wrap: break-word; } } .md-fences { 
     background-color: #f8f8f8; } #write pre.md-meta-block { 
     padding: 1rem; font-size: 85%; line-height: 1.45; background-color: #f7f7f7; border: 0; border-radius: 10px; color: #; margin-top: 0 !important; } .mathjax-block>.code-tooltip { 
     bottom: .375rem; } /*深色背景*/ #write .md-fences:not([mermaid-type]) { 
     padding-top: 7px; border-radius: 5px; background-color: #282c34; color: #eeeeee; } .code-tooltip .ty-input, .code-tooltip input { 
     color: #eee; } /*MAC的三个图�??*/ .CodeMirror-wrap .CodeMirror-scroll { 
     padding-top: 20px; } #write .md-fences:before { 
     content: ""; z-index: 4; display: block; position: absolute; top: 7px; left: 19px; width: 15px; height: 15px; border-radius: 50%; float: left; background-color: #fa3534; } #write .CodeMirror-scroll:before { 
     content: ""; display: block; position: absolute; top: 0px; left: 35px; width: 15px; height: 15px; border-radius: 50%; float: left; z-index: 999; background-color: #ff9900; } #write .md-fences::after { 
     content: ""; z-index: 4; display: block; position: absolute; top: 7px; left: 59px; width: 15px; height: 15px; border-radius: 50%; float: left; background-color: #19be6b; } /*配色*/ .CodeMirror-line .cm-number, /*数字*/ .CodeMirror-line .cm-property { 
     /*被调用的方法*/ color: #f08d49; } .CodeMirror-line .cm-variable-3, /*形参,类型*/ .CodeMirror-line .cm-qualifier, /*css class*/ .CodeMirror-line .cm-variable-2 { 
     /*被使用的形参*/ color: #FFCB6B; } .CodeMirror-line .cm-meta, /*省略号,注解等*/ .CodeMirror-line .cm-atom, /*css属性值，布尔值等等*/ .CodeMirror-line .cm-keyword { 
     /*关键字*/ color: #cc99cd; } .CodeMirror-line .cm-def, /*变量名*/ .CodeMirror-line .cm-variable { 
     /*被使用的变量名*/ color: #FFCB6B; } .CodeMirror-line .cm-builtin { 
     /*被调用的属性*/ color: #82AAFF; } .CodeMirror-line .cm-comment { 
     /*注释*/ color: #888; } .CodeMirror-line .cm-string, /*字符串*/ .CodeMirror-line .cm-string-2 { 
     /*正则表式*/ color: #7ec699 } .CodeMirror-line .cm-operator { 
     /*运算符*/ color: #67cdcc } .CodeMirror div.CodeMirror-cursor { 
     /*光标*/ border-left: 1px solid #fff; z-index: 3; } .CodeMirror-selected, /*选中的背景*/ .CodeMirror-selectedtext { 
     background: #666 !important; } /*html*/ .CodeMirror-line .cm-tag { 
     /*标签名字*/ color: #F07178; } .CodeMirror-line .cm-bracket { 
     /*标签尖括号*/ color: #FFF; } .CodeMirror-line .cm-attribute { 
     /*属性*/ color: #FFCB6B; } 

2.新night背景主题

样式代码：

@import 'night/mermaid.dark.css'; @import 'night/codeblock.dark.css'; @import 'night/sourcemode.dark.css'; :root { 
     --bg-color: #363b40; --side-bar-bg-color: #2e3033; --text-color: #b8bfc6; --select-text-bg-color: #4a89dc; --item-hover-bg-color: #0a0d16; --control-text-color: #b7b7b7; --control-text-hover-color: #eee; --window-border: 1px solid #555; --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; --rawblock-edit-panel-bd: #333; } html { 
     font-size: 22px; } html, body { 
     -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #363b40; background: var(--bg-color); fill: currentColor; line-height: 1.625rem; } #write { 
     /* 可写区域 */ max-width: 1160px; } @media only screen and (min-width: 1400px) { 
     #write { 
     max-width: 1260px; } } @media only screen and (min-width: 1800px) { 
     #write { 
     max-width: 1400px; } } html, body, button, input, select, textarea, div.code-tooltip-content { 
     color: #b8bfc6; border-color: transparent; } div.code-tooltip, .md-hover-tip .md-arrow:after { 
     background: #333; } .popover.bottom > .arrow:after { 
     border-bottom-color: #333; } html, body, button, input, select, textarea { 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } hr { 
     height: 2px; border: 0; margin: 24px 0 !important; } h1, h2, h3, h4, h5, h6 { 
     font-family: "cascadia code", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif; font-weight: normal; clear: both; -ms-word-wrap: break-word; word-wrap: break-word; margin: 0; padding: 0; color: #dedede; } h1 { 
     font-size: 2.5rem; /* 36px */ line-height: 2.75rem; /* 40px */ margin-bottom: 1.5rem; /* 24px */ letter-spacing: -1.5px; } h2 { 
     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.17rem; /* 18px */ line-height: 1.5rem; /* 24px */ margin-bottom: 1.5rem; /* 24px */ letter-spacing: -1px; font-weight: bold; } h4 { 
     font-size: 1.12rem; /* 16px */ line-height: 1.375rem; /* 22px */ margin-bottom: 1.5rem; /* 24px */ color: white; } h5 { 
     font-size: 0.97rem; /* 16px */ line-height: 1.25rem; /* 22px */ margin-bottom: 1.5rem; /* 24px */ font-weight: bold; } h6 { 
     font-size: 0.93rem; /* 16px */ line-height: 1rem; /* 16px */ margin-bottom: 0.75rem; color: white; } @media (min-width: 980px) { 
     h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before { 
     color: #ddd; border: 1px solid #ddd; border-radius: 3px; position: absolute; left: -1.rem; top: 0.rem; float: left; font-size: 9px; padding-left: 2px; padding-right: 2px; vertical-align: bottom; font-weight: normal; line-height: normal; } h3.md-focus:before { 
     content: 'h3'; } h4.md-focus:before { 
     content: 'h4'; } h5.md-focus:before { 
     content: 'h5'; top: 0px; } h6.md-focus:before { 
     content: 'h6'; top: 0px; } } a { 
     text-decoration: none; outline: 0; } a:hover { 
     outline: 0; } a:focus { 
     outline: thin dotted; } sup.md-footnote { 
     background-color: #555; color: #ddd; } p { 
     -ms-word-wrap: break-word; word-wrap: break-word; } p, ul, dd, ol, hr, address, pre, table, iframe, .wp-caption, .wp-audio-shortcode, .wp-video-shortcode { 
     margin-top: 0; margin-bottom: 1.0rem; /* 24px */ } li > blockquote { 
     margin-bottom: 0; } audio:not([controls]) { 
     display: none; } [hidden] { 
     display: none; } ::-moz-selection { 
     background: #4a89dc; color: #fff; text-shadow: none; } *.in-text-selection, ::selection { 
     background: #4a89dc; color: #fff; text-shadow: none; } ul, ol { 
     padding: 0 0 0 1.875rem; /* 30px */ } ul { 
     list-style: square; } ol { 
     list-style: decimal; } ul ul, ol ol, ul ol, ol ul { 
     margin: 0; } b, th, dt, strong { 
     font-weight: bold; } i, em, dfn, cite { 
     font-style: italic; } blockquote { 
     padding-left: 1.875rem; margin: 0 0 0.875rem 0.875rem; border-left: solid 5px #42b983; background-color: #2e3033; padding-left: 30px; padding-right: 20px; margin-top: 30px; margin-left: 0; padding-top: 10px; padding-bottom: 10px; font-size: 21px; } pre, code, kbd, tt, var { 
     background: rgba(0, 0, 0, 0.05); font-size: 1.0rem; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; } kbd { 
     padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } pre.md-fences { 
     padding: 10px; margin-bottom: 20px; background: #; border-radius: 5px; transition: all 0.3s ease; } /* 鼠标经过时有阴影，看起来像发光 */ pre.md-fences:hover { 
     /* box-shadow: 1px 1px 10px blue; */ box-shadow: 0px 0px 10px #8AB3C6; /* transform: scale(1.01); */ } code { 
     color: aqua; background-color: #2e3033; } .cm-s-inner .cm-comment { 
     color: #8e908c; font-family: 'Roboto Mono,Monaco,courier,monospace'; font-size: 20px; } .cm-s-inner .cm-tag { 
     color: #d62672; } pre.md-fences::before { 
     content: ' '; height: 33px; width: 100%; display: block; background: url('night-new/flag.png') no-repeat; background-position: 0px 0px; /* background-size: 83px 33px; */ /* background-size: 63px 25px; */ background-size: 70px 28px; } .CodeMirror-gutters { 
     background: #; border-right: 1px solid transparent; } .cm-s-inner .cm-bracket { 
     color: #33a6e6 !important; } .cm-s-inner .cm-variable { 
     color: #85b14e !important; } .enable-diagrams pre.md-fences[lang='sequence'] .code-tooltip, .enable-diagrams pre.md-fences[lang='flow'] .code-tooltip, .enable-diagrams pre.md-fences[lang='mermaid'] .code-tooltip { 
     bottom: -2.2em; right: 4px; } code, kbd, tt, var { 
     padding: 2px 5px; } table { 
     max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; border-top: 3px solid #e03997; font-size: 18px; } th, td { 
     padding: 5px 10px; vertical-align: top; } a { 
     -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } hr { 
     background: #474d54; /* variable */ } h1 { 
     margin-top: 2em; } a { 
     color: #e0e0e0; text-decoration: underline; } a:hover { 
     color: #fff; } .md-inline-math script { 
     color: #81b1db; } b, th, dt, strong { 
     color: #dedede; /* variable */ } mark { 
     background: #d3d40e; } blockquote { 
     color: #efefef; } table a { 
     color: #dedede; /* variable */ } th, td { 
     border: solid 1px #474d54; /* variable */ } .task-list { 
     padding-left: 0; } .md-task-list-item { 
     padding-left: 1.25rem; } .md-task-list-item > input { 
     top: auto; } .md-task-list-item > input:before { 
     content: ''; display: inline-block; width: 0.875rem; height: 0.875rem; vertical-align: middle; text-align: center; border: 1px solid #b8bfc6; background-color: #363b40; margin-top: -0.4rem; } .md-task-list-item > input:checked:before, .md-task-list-item > input[checked]:before { 
     content: '\221A'; /*鈼?*/ font-size: 0.625rem; line-height: 0.625rem; color: #dedede; } / quick open / .auto-suggest-container { 
     border: 0px; background-color: #525c65; } #typora-quick-open { 
     background-color: #525c65; } #typora-quick-open input { 
     background-color: #525c65; border: 0; border-bottom: 1px solid grey; } .typora-quick-open-item { 
     background-color: inherit; color: inherit; } .typora-quick-open-item.active, .typora-quick-open-item:hover { 
     background-color: #4d8bdb; color: white; } .typora-quick-open-item:hover { 
     background-color: rgba(77, 139, 219, 0.8); } .typora-search-spinner > div { 
     background-color: #fff; } #write pre.md-meta-block { 
     border-bottom: 1px dashed #ccc; background: transparent; padding-bottom: 0.6em; line-height: 1.6em; } .btn, .btn .btn-default { 
     background: transparent; color: #b8bfc6; } .ty-table-edit { 
     border-top: 1px solid gray; background-color: #363b40; } .popover-title { 
     background: transparent; } .md-image > .md-meta { 
     color: #bbbbbb; background: transparent; } .md-expand.md-image > .md-meta { 
     color: #ddd; } #write > h3:before, #write > h4:before, #write > h5:before, #write > h6:before { 
     border: none; border-radius: 0px; color: #888; text-decoration: underline; left: -1.4rem; top: 0.2rem; } #write > h3.md-focus:before { 
     top: 2px; } #write > h4.md-focus:before { 
     top: 2px; } .md-toc-item { 
     color: #a8c2dc; } #write div.md-toc-tooltip { 
     background-color: #363b40; } .dropdown-menu .btn:hover, .dropdown-menu .btn:focus, .md-toc .btn:hover, .md-toc .btn:focus { 
     color: white; background: black; } #toc-dropmenu { 
     background: rgba(50, 54, 59, 0.93); border: 1px solid rgba(253, 253, 253, 0.15); } #toc-dropmenu .divider { 
     background-color: #9b9b9b; } .outline-expander:before { 
     top: 2px; } #typora-sidebar { 
     box-shadow: none; border-right: 1px dashed; border-right: none; } .sidebar-tabs { 
     border-bottom: 0; } #typora-sidebar:hover .outline-title-wrapper { 
     border-left: 1px dashed; } .outline-title-wrapper .btn { 
     color: inherit; } .outline-item:hover { 
     border-color: #363b40; background-color: #363b40; color: white; } h1.md-focus .md-attr, h2.md-focus .md-attr, h3.md-focus .md-attr, h4.md-focus .md-attr, h5.md-focus .md-attr, h6.md-focus .md-attr, .md-header-span .md-attr { 
     color: #8c8e92; display: inline; } .md-comment { 
     color: #5a95e3; opacity: 1; } .md-inline-math g, .md-inline-math svg { 
     stroke: #b8bfc6 !important; fill: #b8bfc6 !important; } [md-inline='inline_math'] { 
     color: #9cb2e9; } #math-inline-preview .md-arrow:after { 
     background: black; } .modal-content { 
     background: var(--bg-color); border: 0; } .modal-title { 
     font-size: 1.5em; } .modal-content input { 
     background-color: rgba(26, 21, 21, 0.51); color: white; } .modal-content .input-group-addon { 
     color: white; } .modal-backdrop { 
     background-color: rgba(174, 174, 174, 0.7); } .modal-content .btn-primary { 
     border-color: var(--primary-color); } .md-table-resize-popover { 
     background-color: #333; } .form-inline .input-group .input-group-addon { 
     color: white; } #md-searchpanel { 
     border-bottom: 1px dashed grey; } / UI for electron */ .context-menu, #spell-check-panel, #footer-word-count-info { 
     background-color: #42464a; } .context-menu.dropdown-menu .divider, .dropdown-menu .divider { 
     background-color: #; } footer { 
     color: inherit; } @media (max-width: 1000px) { 
     footer { 
     border-top: none; } footer:hover { 
     color: inherit; } } #file-info-file-path .file-info-field-value:hover { 
     background-color: #555; color: #dedede; } .megamenu-content, .megamenu-opened header { 
     background: var(--bg-color); } .megamenu-menu-panel h2, .megamenu-menu-panel h1, .long-btn { 
     color: inherit; } .megamenu-menu-panel input[type='text'] { 
     background: inherit; border: 0; border-bottom: 1px solid; } #recent-file-panel-action-btn { 
     background: inherit; border: 1px grey solid; } .megamenu-menu-panel .dropdown-menu > li > a { 
     color: inherit; background-color: #2f353a; text-decoration: none; } .megamenu-menu-panel table td:nth-child(1) { 
     color: inherit; font-weight: bold; } .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 
     color: white; } .modal-footer .btn-default, .modal-footer .btn-primary, .modal-footer .btn-default:not(:hover) { 
     border: 1px solid; border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { 
     color: white; border: 1px solid #ddd; background-color: inherit; } .modal-header { 
     border-bottom: 0; } .modal-footer { 
     border-top: 0; } #recent-file-panel tbody tr:nth-child(2n-1) { 
     background-color: transparent !important; } .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 
     color: inherit; } .megamenu-menu-panel .btn { 
     border: 1px solid #eee; background: transparent; } .mouse-hover .toolbar-icon.btn:hover, #w-full.mouse-hover, #w-pin.mouse-hover { 
     background-color: inherit; } .typora-node::-webkit-scrollbar { 
     width: 5px; } .typora-node::-webkit-scrollbar-thumb:vertical { 
     background: rgba(250, 250, 250, 0.3); } .typora-node::-webkit-scrollbar-thumb:vertical:active { 
     background: rgba(250, 250, 250, 0.5); } #w-unpin { 
     background-color: #4182c4; } #top-titlebar, #top-titlebar * { 
     color: var(--item-hover-text-color); } .typora-sourceview-on #toggle-sourceview-btn, #footer-word-count:hover, .ty-show-word-count #footer-word-count { 
     background: #; } #toggle-sourceview-btn:hover { 
     color: #eee; background: #; } / focus mode */ .on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * { 
     color: # !important; } .on-focus-mode .md-end-block:not(.md-focus) img, .on-focus-mode .md-task-list-item:not(.md-focus-container) > input { 
     opacity: # !important; } .on-focus-mode li[cid]:not(.md-focus-container) { 
     color: #; } .on-focus-mode .md-fences.md-focus .CodeMirror-code > *:not(.CodeMirror-activeline) *, .on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * { 
     color: # !important; } .on-focus-mode .md-focus, .on-focus-mode .md-focus-container { 
     color: #fff; } .on-focus-mode #typora-source .CodeMirror-code > *:not(.CodeMirror-activeline) * { 
     color: # !important; } /*diagrams*/ #write .md-focus .md-diagram-panel { 
     border: 1px solid #ddd; margin-left: -1px; width: calc(100% + 2px); } /*diagrams*/ #write .md-focus.md-fences-with-lineno .md-diagram-panel { 
     margin-left: auto; } .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; } .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); } #ty-tooltip { 
     background-color: black; color: #eee; } .md-task-list-item > input { 
     margin-left: -1.3em; margin-top: 0.3rem; -webkit-appearance: none; } .md-mathjax-midline { 
     background-color: #57616b; border-bottom: none; } footer.ty-footer { 
     border-color: #; } .ty-preferences .btn-default { 
     background: transparent; } .ty-preferences .btn-default:hover { 
     background: #57616b; } .ty-preferences select { 
     border: 1px solid #; height: 21px; } .ty-preferences .nav-group-item.active { 
     background: var(--item-hover-bg-color); } .ty-preferences input[type='search'] { 
     border-color: #333; background: #333; line-height: 22px; border-radius: 6px; color: white; } .ty-preferences input[type='search']:focus { 
     box-shadow: none; } [data-is-directory='true'] .file-node-content { 
     margin-bottom: 0; } .file-node-title { 
     line-height: 22px; } .html-for-mac .file-node-open-state, .html-for-mac .file-node-icon { 
     line-height: 26px; } ::-webkit-scrollbar-thumb { 
     background: rgba(230, 230, 230, 0.3); } ::-webkit-scrollbar-thumb:active { 
     background: rgba(230, 230, 230, 0.5); } #typora-sidebar:hover div.sidebar-content-content::-webkit-scrollbar-thumb:horizontal { 
     background: rgba(230, 230, 230, 0.3); } .nav-group-item:active { 
     background-color: #474d54; } *::selection { 
     background-color: #fd7333; color: #ffe3d6; } figure { 
     border-radius: 3px 3px 0 0; }