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

已于 2023-12-15 20:33:31 修改
阅读量7.9k 收藏 37
点赞数 10
文章标签： css html 前端
于 2022-10-02 12:18:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62283830/article/details/127141612
版权

文章目录


如果下面有你看中的主题样式，可以在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: #777777;
    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: .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 {
    --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: #777777;
    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背景主题

基于黑马pink老师分享的主题样式改编，主要改动了可写区域范围、字体大小、代码块的内边距、标题的字体（原标题字体的数字会比普通字小一半，看起来像是个下标）。效果如下：
在这里插入图片描述

鼠标经过代码块也有阴影效果：
在这里插入图片描述
佩服pink老师把原版的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.642857143rem;
    top: 0.357142857rem;
    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: #151718;
  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: #151718;
  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: #777777;
}

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: #333333;
}

#toggle-sourceview-btn:hover {
  color: #eee;
  background: #333333;
}

/** focus mode */
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
  color: #686868 !important;
}

.on-focus-mode .md-end-block:not(.md-focus) img,
.on-focus-mode .md-task-list-item:not(.md-focus-container) > input {
  opacity: #686868 !important;
}

.on-focus-mode li[cid]:not(.md-focus-container) {
  color: #686868;
}

.on-focus-mode .md-fences.md-focus .CodeMirror-code > *:not(.CodeMirror-activeline) *,
.on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
  color: #686868 !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: #686868 !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: #656565;
}

.ty-preferences .btn-default {
  background: transparent;
}
.ty-preferences .btn-default:hover {
  background: #57616b;
}

.ty-preferences select {
  border: 1px solid #989698;
  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;
}
盖世馒头
关注
最好用的15个Typora主题
大邓和他的Python
06-03 2万+
Typora简介Typora是一个所见即所得的Markdown格式文本编辑器，支持Windows、macOS和GNU/Linux操作系统，拼写检查、自定义CSS样式、数学公式渲染（通过Ma...
Typora 最佳主题
12-11
该文档是在github主题基础上，做的一些改动，增加了暗色代码背景，调整了文档的字体、大标题、表格以及重点文字的颜色，使得写出的文档更加的美观。并且我对这个主题中的一些常用代码做了注释，喜欢的朋友可以根据自己的喜好做出相应的调整。
快来使用最强大的笔记软件Typora！配置你喜欢的主题吧！
最新发布
夜风的博客
03-11 170
主题为例，点击这个主题，进入介绍页面，点击。是需要收费的，可以下载免费的最后一个版本。将下载下来的主题源码中的。或者全部复制到该目录下。
Typora常用好看主题推荐!!!
热门推荐
柒柒公子呐
09-12 14万+
Typora常用好看主题推荐!!! Typora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，并且是完全免费的。 在作者心里，Typora的存在是简约而强大的，加上作者是艺术生出身，对于主题和颜色的美观是有一定要求，所以喜欢收集好看简约的主题，现有几款觉得好看的分享给大家。 先挂几个链接，以便同样喜欢自己研究主题的小伙伴参考 Typora官网主题: https://theme.typora.io/ 为 Typora 编写自定义主题:
Typora 主题
10-11
结合其他的主题进行修改后的Typora主题，和马克飞象相似
探索Typora新主题：HappySimple——简洁与优雅的完美结合
gitblog_00057的博客
03-30 1537
探索Typora新主题：HappySimple——简洁与优雅的完美结合 项目地址:https://gitcode.com/gh_mirrors/ty/Typora-theme-Happysimple 在Markdown世界中，Typora是一款备受赞誉的富文本编辑器，以其无缝预览和直观的操作体验赢得了众多用户的喜爱。而今天，我们要向您推荐一款为Typora量身定制的主题——HappySimple，...
强烈推荐一款简约，唯美的typora主题~one
weixin_39246554的博客
05-18 2810
https://theme.typora.io/theme/Phycat/https://theme.typora.io/theme/Happysimple/1.主题下载链接：https://pan.baidu.com/s/1AVEEEnGxQ24TIwhvKT9_Jg?pwd=ggq7 提取码：ggq72.主题安装打开Typora➡️文件➡️偏好设置➡️外观➡️打开主题文件夹➡️解压压缩包，将文件夹中的内容（one文件夹、one.css文件）移动至此目录（themes文件夹下）➡️重启Typora➡️选择
eclipse-绿豆沙主题.epf
08-19
eclipse_绿豆沙护眼主题，字体大小12号，其他没有设置
idea背景导出支持护眼绿豆沙模式
05-05
idea
Eclipse绿豆沙配色方案+Inconsolata字体（OpenType/PFA/TruType三种）
12-04
本文将详细介绍"Eclipse绿豆沙配色方案"与"Inconsolata字体"，帮助程序员打造一个既美观又护眼的开发环境。 首先，Eclipse是一款广泛使用的开源Java集成开发环境（IDE），它支持多种编程语言，提供了丰富的插件系统...
idea主题背景 idea_settings_gaoxinfu.zip
07-06
这个是idea工具开发的过程中一个绿豆色的护眼的主题背景， 大家可以参考一下； 参考安装地址：https://blog.csdn.net/u014636209/article/details/94905057
Typora的七个好看的主题
03-17
Typora主题
typora主题-typora-purple-theme-1.5.3.zip
08-11
typora很好看的主题，直接拖到typora数据目录下就好了！
typora-theme-acme:Typeora主题
04-12
错别主题 基于typora-theme-github修改的typeora主题
win10 ,8 ,可用绿豆沙主题+ material design壁纸
08-19
已经封装为主题包,直接在windows中加载可用, 引用了material design 设计的壁纸
Typora主题：好看的装扮样式分享
weixin_46010242的博客
05-30 787
Typora初始的样式不够好看，做笔记不够舒服。因此， 我自己基于Vue的装扮样式下，进行纯手更改，话不多说效果如图： 萝卜青菜，各有所爱，喜欢的可以自取！
Typora好看的两个主题
sunclaire的博客
12-07 607
1.Drake。
Typora自定义主题#简约风主题
胖手探长的博客
06-02 2765
基于haru主题，编写的一个简约风格的typora主题 亮色主题。typora主题自定义。typora主题推荐
Typora 使用总结 好用主题推荐
Gavin31415926的博客
05-06 2792
Typora 是一款由 Abner Lee 开发的[轻量级] Markdown 编辑器，与其他 Markdown 编辑器不同的是，Typora 没有采用[源代码]和预览双栏显示的方式，而是采用所见即所得的编辑方式
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值