【Typora CSS】自定义typora界面风格

1、简介

使用typora的时候，想要自定义一些颜色、字体，或者修改一些设置，这个时候需要修改或者自己编写css文件。以下以typora官网的ash.css文件为例做介绍。

2、方法

2.1 下载css文件

typora theme官网
找到ash主题，点击下载

2.2 css文件处理

打开typora $\to$ 偏好设置 $\to$ 打开主题文件夹，将ass.css文件复制到里面
重启typora，在主题里可以看到 ash 的选项

2.3 css文件内容

（1） font 字体设置
font-family：字体类型
font-style：normal、italic（正常、斜体）
font-weight：是否为粗体（bold）
font-size：字体大小
src：来源

/* vietnamese */
@font-face {
 font-family: 'Montserrat';
 font-style: normal;
 font-weight: 400;
 src: local('Montserrat Regular'), local('Montserrat-Regular'), url(ash/Montserrat-v.woff2) format('woff2');
 unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}

（2）root

root里定义的是界面颜色、文字颜色等
text-color：文字颜色
bg-color：背景颜色
code-block-bg-color：代码块颜色
side-bar-bg-color：文件夹、大纲处的颜色
window-border：窗口边界颜色

:root {
--text-color: #666;
--bg-color: #fff;
--code-block-bg-color: #4d4d4d;
--side-bar-bg-color: #fdf6f5;
--window-border: 1px solid #555;

--active-file-bg-color: #fff;
--active-file-text-color: #666;
--item-hover-text-color: #666;
--control-text-color: #777;
}

（3）目录

.md-toc-inner:before {
   content: "- ";
}

/*目录的字体定义
color：目录字体颜色
background-color：背景颜色
*/

a {
	color: #666;
}

[md-inline] a {
	background-color: #4d4d4d;
	color: #fff;
		text-decoration: none;
		padding: 4px;
		border-radius: 4px;
		font-size: 0.9rem;
}

（4）代码块

pre,
pre.md-meta-block,
md-fences {
		background-color: #ffedeb;
		padding-left: 8px;
		padding-right: 8px;
}
pre.md-meta-block {
color: #bdbdbd;
}

（5）六级标题的字体定义

h1 {
  font-size: 2.4rem;
}

h2 {
 font-weight: 600;
}

h3 {
 font-size:1.4rem
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
}

h3 {
	text-transform: uppercase;
}

h5, h6 {
	font-weight: bold;
}

（6）表格

*单元格*/
td {
	border: 1px solid #666;
	background-color: #ffedeb;
	padding-left: 8px;
}

/*标题栏*/
th {
	color: #ff8375;
	font-weight: 400;
	text-align: center;
}

（7）引用

/*引用
color：字体颜色
*/

blockquote:before {
	content: open-quote;
	font-size: 24pt;
	text-align: center;
    line-height: 42px;
    color: #fff;
	background: #ddd;
    float: left;
	position: absolute;
     border-radius: 25px;
  /* margin-right: 0.5em; */
   left: -8px;
    vertical-align: -0.4em;
    display: block;
    height: 25px;
    width: 25px;
    background-color: #555;
    font-style: normal;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
}

（8）task list

/*没打勾*/
.task-list-item input:before{
    border: 1px solid #d4d4d4;
	border-radius: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    background: #ffa9a9;
    content: ' ';
    transition: background-color 200ms ease-in-out;
    display: block;
}

/*打勾之后*/
.task-list-item input:checked:before,
.task-list-item input[checked]:before{
    background: #ffe5e5;
    border-width: 2px;
    display:inline-block;
    transition: background-color 200ms ease-in-out;
}

3、补充

3.1 颜色提取器

修改设置中，最常用到的就是颜色的修改，这个网站可以很方面的提取颜色代码：Encycolorpredia

3.2 视频介绍

详情可以参考视频教程：CSS 自制粉色Typora界面