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界面