typora自定义主题

自定义typora主题

1.主题目录

文件->偏好设置，路径为：C:\Users\用户名\AppData\Roaming\Typora\themes

主题文件为xxx.css,xxx文件夹，文件夹通常里面放有.css文件以及字体等
所以theme目录下aaa.css和aaa文件夹为同一个主题，aaa.css引用了aaa文件夹的内容
以night主题为例：

@import "night/mermaid.dark.css";
@import "night/codeblock.dark.css";
@import "night/sourcemode.dark.css";

2.拷贝主题

比如将night.css和night文件夹拷贝并重新为新主题mini
注意将night.css的import文件改名

@import "mini/mermaid.dark.css";
@import "mini/codeblock.dark.css";
@import "mini/sourcemode.dark.css";

3.主题样式

typora提供了开发者工具shift+F12或者菜单视图-开发者工具，可以查看元素的样式，前端同学都会的。

如果不会的百度下浏览器的F12查找元素style

3.1修改文档宽度

通常为#write标签宽度设置

#write {
    max-width: 914px;
}

3.2修改标题样式

var函数引用的:root{}定义的颜色变量，可以改成RGB,RGBA或者#XXXXXX

/*修改源码header*/
#typora-source .cm-header {
    color: var(--theme-primary-color);
}
/*修改md输出页面的header*/
#write h3 {
    font-size: 1.4rem;
    font-weight: 800;
}

3.3修改表格样式

/* table */
.md-table-edit .btn-default {
  color: inherit;
}
table.md-table {
  width: auto;
  min-width: 80%;
}

table thead {
  font-weight: 900;
}

table tbody tr {
  border-bottom: 1px solid var(--table-border-color);
}
table tr:first-of-type {
  border-top: 1px solid var(--table-border-color);
}
table tr th, table tr td {
  border-left: 1px solid var(--table-border-color);
  padding: 6px 13px;
}
table tr th:last-of-type, table tr td:last-of-type {
  border-right: 1px solid var(--table-border-color);
}

3.4修改代码块样式

/*修改代码块背景*/
.cm-s-inner.CodeMirror {
    background-color: #003444;
    color: #999;
    padding: 0.75rem 0.15rem 0.75rem 0.15rem;
    border-radius: 6px;
}
/*修改属性样式*/
.cm-s-inner .cm-property {
  color: var(--code-blue-color) !important; /**/
}
/*修改操作符号样式*/
.cm-s-inner .cm-operator {
  color: var(--code-purple-color) !important;
}
/*修改关键字样式*/
.cm-s-inner .cm-keyword {
  color: var(--code-pink-color) !important;
}
/*修改标签样式*/
.cm-s-inner .cm-tag {
  color: var(--code-red-color) !important;
}
/*修改属性样式*/
.cm-s-inner .cm-attribute {
  color: var(--code-orange-color) !important;
}
/*修改字符串样式*/
.cm-s-inner .cm-string {
  color: var(--code-green-color) !important;
}
/*修改备注样式*/
.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
  /*     color: var(--code-orange-color) !important; */
  color: var(--code-grey-color) !important;
  font-style: italic;
}

3.5修改mermaid样式

常用属性：
–mermaid-theme: 可选项为default,dark, night, forest 和 neutral。
–mermaid-sequence-numbers: on或off,on表示图表线段带有序号，off没有。
–sequence-theme: simple或hand, simple是标准，hand是手工(官方给出有支持，可惜没有试出来)。
打开css文件，在:root标签修改属性，如果没有新增即可。

:root{
	/*mermaid-theme: base/default/dark/night/forest/neutral*/
  --mermaid-theme: night;
  --mermaid-sequence-numbers: off;
  --mermaid-flowchart-curve: linear;
  --mermaid--gantt-left-padding: 75;
  --sequence-theme: simple;
}

mermaid-sequence-numbers的on和off，左边是ON, 右边OFF。

注意修改样式时候，最好参考CSS文档，修改后保存重启typora生效。
系统有自带的内联样式,像这样

#mermaidChart6 .actor {
    stroke: hsl(78.1578947368, 58.4615384615%, 54.5098039216%);
    fill: #cde498;
}

因为内联样式优先级比较高，如果要覆盖原样式，必须后面加!important才能生效。

3.5.1修改参与者样式

rect.actor {
	fill: #F0B752 !important; /*修改背景颜色*/
	stroke: none !important; /*修改边框颜色，none为没有*/
}

text.actor > tspan {
	font-size: 1.2rem !important; /*修改字体，放大1.2倍*/
	fill: #1E2E3E !important; /*修改字体颜色*/
}

3.5.2修改标签样式

.labelBox {
	fill: rgb(2, 136, 209) !important; /*修改标签背景颜色*/
	stroke: none !important;
}

.labelText {
	text-transform: uppercase; /*修改为大写*/
}

.loopText, .loopText > tspan {
	fill: #CBE21E !important; /*修改字体颜色*/
    font-style: italic; /*修改为斜体*/
}

3.5.3修改聚焦点样式

/*activation0:聚焦点*/
.activation0 {
	fill: #F44336 !important; /*修改聚焦点颜色*/
	stroke: none !important;
}

3.5.4修改线条样式

.messageLine0 {
  marker-end: "url(#arrowhead)" !important;
  stroke: lightgrey !important;
}
.messageLine1 {
  stroke-dasharray: "2 2" !important;
  stroke: lightgrey !important;
}

.sequenceNumber {
	fill: #9D0D3E !important;
	font-size: 14.4px !important;
}

3.5.5修改diagram背景

.md-diagram-panel {
  border: 1px solid !important;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: rgba(43, 226, 152 ,0.28);
}

4.我的主题

typora官网有很多主题https://typoraio.cn/