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%;