自定义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%;