How to Create a Beautiful Custom Theme for Typora

When writing technical documentation with Typora, the default theme is often considered plain; the author spent an afternoon adjusting the CSS to produce a more attractive appearance, as shown in the screenshot below.

The following stylesheet defines the new theme. It starts by setting root variables for sidebar background and control text colors, then customizes the base html font size and the body font family, text color, background, and line height. The editor area #write receives a max‑width, min‑width, padding, border radius, and box‑shadow. Heading elements ( h1 – h6) are given relative positioning, margins, font sizes, line heights, and colors, with hover styles for anchor links. Paragraphs, blockquotes, tables, lists, and code blocks are restyled with specific margins, paddings, borders, background colors, and syntax‑highlight colors. Additional rules handle media queries for screen width and print layout, as well as counters for automatic heading numbering.

/* 如有不懂，参看 https://theme.typora.io/doc/zh/Write-Custom-Theme/ */
/* https://www.jianshu.com/p/62b61fd69d33 */
:root {
    --side-bar-bg-color: #FFFFFF;
    --control-text-color: #777;
}
html {
    font-size: 18px;
}
body {
    font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue','Helvetica','Arial',sans-serif;
    color: #333;
    background-color: #FFFFFF; /*body bg color*/
    line-height: 2;
}
/* 编辑区域样式 */
#write{
    max-width: 80%;
    min-width: 860px;
    margin-top:    30px; /*top*/
    margin-bottom: 30px;
    padding: 100px 60px; /*top to title padding*/
    border-radius: 5px;
    -o-box-shadow: 0 8px 8px #999999;
    -webkit-box-shadow: 0 8px 8px #999999;
    -moz-box-shadow: 0 8px 8px #999999;
    box-shadow: 0 8px 8px #999999;
}
#write p {
    margin: 10px auto;
}
#write > ul:first-child,
#write > ol:first-child{
    margin-top: 30px;
}
body > *:first-child {
    margin-top: 0 !important;
}
body > *:last-child {
    margin-bottom: 0 !important;
}
a {
    color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    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 {
    /*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;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    font-family: "PT Serif";
    padding-bottom: .6em;
    font-size: 2em;
    line-height: 1.2;
    text-align: center;
}
h2 {
   padding-bottom: .6em;
    font-size: 1.8em;
    line-height: 1.225;
    border-bottom: 1px dashed rgb(184, 77, 82);
}
h3 {
    font-size: 1.6em;
    line-height: 1.43;
}
h4 {
    font-size: 1.4em;
}
h5 {
    font-size: 1.2em;
}
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;
}
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;
}
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: 4px solid rgb(239, 112, 96);
    padding: 10px 15px;
    color: #3f3f3f;
    background-color: #fff9f9;
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
    background-color: rgba(93, 172, 129, 0.2); /*若竹*/
}
table tr:nth-child(2n),
thead {
    background-color: rgba(93, 172, 129, 0.2); /*set even row color*/
}
tbody tr:nth-child(2n-1) {
    background-color: transparent !important; /*only odd row has color*/
}
table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}
/* 代码样式*/
.CodeMirror-lines {
  padding: 8px 16px;
}
.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    border-top: 1px solid #eef2f2;
}
/* 代码区配置 */
code {
    background-color: #f3f4f4;
}
#write pre {
    font-family: "Courier New", sans-serif;
  font-size: 18px;
}
.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;    
    border: 1px solid #999;
    border-radius: 4px;
}
.md-task-list-item > input {
  margin-left: -1.3em;
}
@media screen and (min-width: 914px) {
    /*body {
        width: 854px;
        margin: 0 auto;
    }*/
}
@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}
#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;
}
.md-fences,
code,
tt {
    /*border: 1px solid #e7eaed;*/
    background-color: rgb(249,253,234); /* code block inline BGcolor */
    border-radius: 3px;
    font-size: 0.8em;
    font-family: menlo;
  color: rgb(253,50,12);
    /*color: #f9f2f4; /*code block inline font color*/
    padding: 4px 8px 0px 8px;
  margin: auto 4px;
  font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue','Helvetica','Arial',sans-serif;
}
.md-fences {
    background-color: #1e2128; /*code block bg color*/
    color: #989fad; /*comma*/
}
.cm-s-inner .cm-comment {color: rgb(89, 150, 84); /*comment color*/ }
.cm-s-inner .cm-keyword {color: #c678dd; /*function*/ }
.cm-s-inner .cm-def {color: #f9f2f4; }
.cm-s-inner .cm-operator {color: #b75bd0; } /*return var*/
.cm-s-inner .cm-variable {color: #d19a66; /*window*/ }
.cm-s-inner .cm-variable-2 {color: #e2b76a; } /*window jquery*/
.cm-s-inner .cm-string {color: #98c379; } /* string */
.cm-s-inner .cm-attribute {color: #FFCB6B; }
.cm-s-inner .cm-property {color: #d19a66; } /*property*/
.cm-s-inner .cm-variable-3 {color: #DECB6B; }
.cm-s-inner .cm-error {color: rgba(209, 154, 102, 1.0); background-color: #448867;}
.cm-s-inner .cm-atom {color: #F77669; } /*null undefined*/
.cm-s-inner .cm-number {color: #F77669; }
.cm-s-inner .cm-builtin {color: #DECB6B; } /*system built in command*/
.cm-s-inner .cm-tag {color: #80CBC4; }  /*LaTeX command*/
.cm-s-inner .cm-meta {color: #80CBC4; } /*LaTeX command*/
.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
.mathjax-block>.code-tooltip {
    bottom: .375rem;
}
.md-mathjax-midline {
    background: ;
}
#write > h3.md-focus:before{
    left: -1.5625rem;
    top: .375rem;
}
#write > h4.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
#write > h5.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
#write > h6.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
.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 .context-menu {
    --item-hover-bg-color: #E6F0FE;
}
strong {
    padding: 0.4em; 
    color: #E91E63;
    font-weight: 600;
}
/* 首先全局进行一次reset，这样即使不添加h1标题也可以使用较低级别的标题 */
#write {
    counter-reset: h2 0 h3 0 h4 0 h5 0 h6 0;
}
/* #write {
    counter-reset: h1
} */
h1 {
    counter-reset: h2
}
h2 {
    counter-reset: h3
}
h3 {
    counter-reset: h4
}
h4 {
    counter-reset: h5
}
h5 {
    counter-reset: h6
}
/* put counter result into headings */
#write h1:before {
    counter-increment: h1;
    /* content: counter(h1) ". " */
}
#write h2:before {
    counter-increment: h2;
    content: counter(h2) ". "
}
#write h3:before,
 h3.md-focus.md-heading:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) " "
}
#write h4:before,
 h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) " "
}
#write h5:before,
 h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}
#write h6:before,
 h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}